在 safari 中使用 gainNode 创建 Panner

Question

我想一次向左或向右平移并为其设置音量，我已经用其他浏览器完成了但是在 safari 上 createStereoPanner 不是一个函数所以我使用 createPanner for safari 现在，问题是我想使用增益和声相器来设置音量，目前它同时播放增益和平移它应该为声相器设置增益

这是我的代码

            audioElement.setAttribute('src', '/Asset/sounds/calibrate.mp3');
    audioElement.volume = 0.5;
    audioElement.play().then(function (d) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        source = audioCtx.createMediaElementSource(audioElement);
        if (isSafari) {
            gainNode = audioCtx.createGain();
            gainNode.gain.setValueAtTime(audioElement.volume, audioCtx.currentTime);
            source.connect(gainNode);
            gainNode.connect(audioCtx.destination);

            panNode = audioCtx.createPanner();
            panNode.panningModel = 'HRTF';
            source.connect(panNode);
            panNode.connect(audioCtx.destination);
            //panNode.setPosition(10, 0, 0);

        }
        else {
            panNode = audioCtx.createStereoPanner();
            panNode.pan.value = 0;
            source.connect(panNode);
            panNode.connect(audioCtx.destination);
        }
    });

正在播放音频怎么处理

Answer 1

webKit 中PannerNode 的实现还有点偏差。这已经在 a previous SO post 中得到了回答，尽管没有完整的工作示例并且增加了增益节点的复杂性。

声像器的输出始终是立体声，因此它应该是链中的最后一个。连接应该

Source Sound -> GainNode -> PannerNode -> AudioContext.destination

示例代码如下，a JSFiddle can be Found Here。此示例硬摇到右声道。

<!DOCTYPE html>
<html>

  <head>
    <script>
var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
var gainNode = audioCtx.createGain();
var gain = 0.01;
gainNode.gain.setValueAtTime(gain, audioCtx.currentTime);
//---------------------------------------------------------------------
var pan = 1; // This should be in range [-1, 1]

if (audioCtx.createStereoPanner)
{
  var panner = audioCtx.createPanner();
  panner.pan.value = pan;
}
else
{
  var panner = audioCtx.createPanner();
  panner.panningModel = 'equalpower';
  panner.setPosition(pan, 0, 1 - Math.abs(pan));
}

gainNode.connect(panner);
panner.connect(audioCtx.destination);
    </script>
  </head>
  <!-- ===================================================================== -->

  <body>

    <div>
      <button onclick="myFunction()">
        Click me
      </button>
    </div>
    <script>
function myFunction()
{
  //---------------------------------------------------------------------
  var duration = 0.5; // in seconds
  //---------------------------------------------------------------------
  var oscillator = audioCtx.createOscillator();
  oscillator.type = 'square';
  oscillator.frequency.value = 500;
  oscillator.connect(gainNode);
  oscillator.start(audioCtx.currentTime);
  oscillator.stop(audioCtx.currentTime + duration);
  //---------------------------------------------------------------------
}
    </script>
  </body>
  <!-- ===================================================================== -->

</html>

在 safari 中使用 gainNode 创建 Panner

createPanner with gainNode in safari

html

javascript

audio

audiocontext

web-audio-api