Geek Answers Handbook

How to create a very basic left / right equal powerful pan with createPanner ();

I am considering a specification for the web audio API, and panning a node uses three values ​​to create a 3D spectrum for sound. I was wondering if, to create a basic two-dimensional "equal power", for a programmer, you need to program a formula to scale it ... or I already think about it, and there is an easier way to do this.

EDIT

The node stereo glider is currently being introduced.

+6
source share
3 answers

I can get the panning effect by changing only the first argument to setPosition () and leaving the other arguments null.

<!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 in order to get a natural panning effect, you also need to specify a third argument.

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

here's an even simpler (less boilerplate?) 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>
+8
source

The panner node uses the "HRTF" (Head Related Transfer Function) function by default, which is a stereo isolation engine designed for 3D sound.

To have basic pan functions and lower resource usage, you need to set the panningModel attribute to "equalpower".

 var panner = context.createPanner(); panner.panningModel = "equalpower"; panner.setPosition(1,0,0);

Read more about the documentation .

+1
source

More articles:


All Articles