createPanner with gainNode in safari

问题

I want to pan left or right at a time and also set the volume for it, I have done it with other browsers but on safari createStereoPanner is not a function so i used createPanner for safari Now, Problem is that i want to use gain with panner to set volume currently its playing both gain and pan separately it should set gain for panner

here is my code

            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);
        }
    });

im playing audio how to handle it

回答1:

The implementation of the PannerNode in webKit is still a little off. This has already been answered in a previous SO post, though without a full working example and the added complexity of the gain node.

The output of panner is always stereo, so it should be the last in the chain. The connections should go

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

Example code is given below and a JSFiddle can be Found Here. This example hard pans to the right channel.

<!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>

来源：https://stackoverflow.com/questions/59544961/createpanner-with-gainnode-in-safari

标签

javascript

html

audio

web-audio-api

audiocontext