Gradually change the web audio API API Panner

Question

I am trying to use simple HTML range input to control the panning of my audio audio API on the Internet, but I can only get 3 "positions" for my audio output:
-Centre
-100% left
-100% right.

I would like to have something in between the positions, for example, 20% on the left and 80% on the right, etc ...

The code I'm using is:

//Creating the node var pannerNode = context.createPanner(); //Getting the value from the HTML input and using it on the position X value document.getElementById('panInput').addEventListener('change', function () { pannerNode.setPosition(this.value, 0, 0); }); 

And this refers to this entry in my HTML file:

 <input id="panInput" type="range" min="-1" max="1" step="0.001" value="0"/> 

Does anyone know what I'm doing wrong?

Answer 1

You do not need to use two panners - Panner is stereo. This old answer is very suitable for this question:

How to create a very simple left / right pan using createPanner ();

Answer 2

I really found simple left / right panning to be complex using the web audio API. It is really tuned for volumetric / spatial material, and I honestly don't understand it very well.

The way I usually pan is as follows:

 var panLeft = context.createGain(); var panRight = context.createGain(); var merger = context.createMerger(2); source.connect(panLeft); source.connect(panRight); panLeft.connect(merger, 0, 0); panRight.connect(merger, 0, 1); merger.connect(context.destination); document.getElementById('panInput').addEventListener('change', function () { var val = this.value; panLeft.gain.value = ( val * -0.5 ) + 0.5; panRight.gain.value = ( val * 0.5 ) + 0.5; }); 

Basically, you send a signal to two gain nodes that you intend to use as the left and right channels. Then you take a value from your range element and use it to set the gain on each node.

This is a kind of lazy version. In serious audio applications, there is usually a bit more math involved with panning to make sure there are no changes in the overall level - but hopefully this is enough to get you started.

Answer 3

I'm sure there is a better and easier way to do this, but so far it definitely works for me.
If anyone else has a better / cleaner way to do this, please share it here!
Thanks to Kevin Ennis for giving me this hint!

Javascript file

 //Create a splitter to "separete" the stereo audio data to two channels. var splitter = context.createChannelSplitter(2); //Connect your source to the splitter (usually, you will do it with the last audio node before context destination) audioSource.connect(splitter); //Create two gain nodes (one for each side of the stereo image) var panLeft = context.createGain(); var panRight = context.createGain(); //Connect the splitter channels to the Gain Nodes that we've just created splitter.connect(panRight,0); splitter.connect(panLeft,1); //Getting the input data from a "range" input from HTML (the code used on this range will be shown right on the end of this code) var panPosition = document.getElementById("dispPanPositionLiveInput"); document.getElementById('panControl').addEventListener('change', function () { var val = this.value; panPosition.value = val; panLeft.gain.value = ( val * -0.5 ) + 0.5; panRight.gain.value = ( val * 0.5 ) + 0.5; }); //Create a merger node, to get both signals back together var merger = context.createChannelMerger(2); //Connect both channels to the Merger panLeft.connect(merger, 0, 0); panRight.connect(merger, 0, 1); //Connect the Merger Node to the final audio destination (your speakers) merger.connect(context.destination); 

HTML file

<input id = "panControl" type = "range" min = "- 1" max = "1" step = "0.001" value = "0" / ">