I'm trying to use a simple HTML range input to control the panning of my Web Audio API audio but I can only get 3 "positions" for my audio output:
-Center
-100% to the left
-100% to the right.
I would like to have something in between does positions, like 20% left and 80% right and so on...
The code that 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 it refers to this input on my HTML file:
<input id="panInput" type="range" min="-1" max="1" step="0.001" value="0"/>
Does anyone knows what am I doing wrong?
You shouldn't need to use two panners - Panner is stereo. This old answer is a great one to this question:
How to create very basic left/right equal power panning with createPanner();