Skip to content Skip to sidebar Skip to footer

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 f

Solution 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><buttononclick="myFunction()">
        Click me
      </button></div><script>functionmyFunction()
{
  //---------------------------------------------------------------------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>

Post a Comment for "Createpanner With Gainnode In Safari"