I am looking at the web audio API spec and the panning node uses three values to create a 3D spectrum for sound. I was wondering if in order to create a basic 2D "equal power" panner the programmer needs to do the formulaic programming to scale this ... or if I am over thinking it and there is a simpler way to do it.
EDIT
There is now a stereoPanner node being introduced.
I am looking at the web audio API spec and the panning node uses three values to create a 3D spectrum for sound. I was wondering if in order to create a basic 2D "equal power" panner the programmer needs to do the formulaic programming to scale this ... or if I am over thinking it and there is a simpler way to do it.
EDIT
There is now a stereoPanner node being introduced.
Share Improve this question edited Feb 19, 2015 at 6:47 William asked Jan 17, 2013 at 11:42 WilliamWilliam 4,58818 gold badges66 silver badges117 bronze badges 1 |3 Answers
Reset to default 9here's an even simpler (less formulaic?) way to achieve 2D panning:
( full code here )
<input type="range" name="pan" id="pan" min="-1" max="1" step="any" />
<script>
var panner = context.createPanner();
panner.panningModel = 'equalpower';
function pan(event) {
var x = this.valueAsNumber,
y = 0,
z = 1 - Math.abs(x);
panner.setPosition(x,y,z);
}
document.getElementById('pan').addEventListener(pan);
</script>
I can still get a panning effect by changing only the first argument to setPosition() and keeping other arguments zero.
<!DOCTYPE html>
<html>
<head>
<script>
var c = new webkitAudioContext();
var s = c.createBufferSource();
var g = c.createGainNode();
var p = c.createPanner();
s.connect(g);
g.connect(p);
p.connect(c.destination);
function play(e) {
var fr = new FileReader();
var file = document.getElementById("file").files[0];
fr.onload = function(e) {
c.decodeAudioData(e.target.result,
function (buf) {
s.buffer = buf;
g.gain.value = 0.5;
s.noteOn(0)
},
function () {
console.error('decodeAudioData failed.');
}
);
};
fr.readAsArrayBuffer(file);
}
function pan(range) {
var x = Math.sin(range.value * (Math.PI / 180));
p.setPosition(x, 0, 0);
}
</script>
</head>
<body>
Choose your MP3 file:<br>
<input type="file" id="file" name="file" /><br>
<input type="submit" id="go" onclick="play()" value="Play" /><br>
L<input type="range" min="-45" max="45" value="0" onchange="pan(this);">R
</body>
</html>
But to get a natural panning effect, you need to specify the third argument as well.
function pan(range) {
var xDeg = parseInt(range.value);
var zDeg = xDeg + 90;
if (zDeg > 90) {
zDeg = 180 - zDeg;
}
var x = Math.sin(xDeg * (Math.PI / 180));
var z = Math.sin(zDeg * (Math.PI / 180));
p.setPosition(x, 0, z);
}
The panner node defaults to "HRTF" (Head Related Transfer Function) which is a stereo convolution engine and it is designed for 3D sound.
In order to have basic panning functionality and lower resource usage you need to set panningModel attribute to "equalpower".
var panner = context.createPanner();
panner.panningModel = "equalpower";
panner.setPosition(1,0,0);
Check the documentation for more details.
createStereoPannermethod works beautifully. Set left and right speaker panning using the pan node'span.valueproperty. Use any values between -1 (panned fully to the left speaker) and 1 (panned fully to the right speaker.) – d13 Commented Apr 1, 2015 at 19:26