For the needs of my game I need to have 2D sound. That means, the emmiter should be positioned somewhere on a 2D plane. How do I achieve this effect in Javascript? Do I need to use a special sound format or can I control the volume on the speakers?
I think I can get to the point where I have 2 volumes for each speaker, but I am clueless as how to apply different volumes for the same sound in Javascript.
For the needs of my game I need to have 2D sound. That means, the emmiter should be positioned somewhere on a 2D plane. How do I achieve this effect in Javascript? Do I need to use a special sound format or can I control the volume on the speakers?
I think I can get to the point where I have 2 volumes for each speaker, but I am clueless as how to apply different volumes for the same sound in Javascript.
Share Improve this question edited Jun 28, 2012 at 6:45 arttronics 9,9552 gold badges29 silver badges62 bronze badges asked Jun 24, 2012 at 13:20 corazzacorazza 32.4k39 gold badges120 silver badges191 bronze badges 2-
2
A
<canvas>game? Where's the sound ing from? An<audio>element? – Šime Vidas Commented Jun 27, 2012 at 23:33 - 4 Read this: Web Audio API – Šime Vidas Commented Jun 27, 2012 at 23:38
2 Answers
Reset to default 7 +25An article describing exactly this including a demo can be found here.
To prevent link rot I will be quoting the most relevant parts below
Luckily, Web Audio API es with built-in hardware accelerated positional audio features that are quite straight forward to use.
The core idea is demonstrated in the code below:
PositionSample.prototype.changePosition = function(position) {
// Position coordinates are in normalized canvas coordinates
// with -0.5 < x, y < 0.5
if (position) {
if (!this.isPlaying) {
this.play();
}
var mul = 2;
var x = position.x / this.size.width;
var y = -position.y / this.size.height;
this.panner.setPosition(x * mul, y * mul, -0.5);
} else {
this.stop();
}
};
The full source code of the working demo in the first link above can be found here.
Offtopic: I considered rewriting the quoted article by hand as a custom answer here, but that seemed relatively pointless as the article is already more than clear enough and doing double work seems pointless
Compatibility wise, only a bination of flash and the previously mentioned code gives a true cross-browser positioning/panning audio solution (as flash is not available on certain mobile devices). Ideally I would advise against use of the audio API if this can be circumvented as it's not unlikely that things will change in the specification, thus possibly breaking your code (+ it's not unlikely for this not to work either way on mobile devices). The only scenario where using the more advanced web audio api's makes sense is if you are expecting to work at least another 6 to 18 months on your game (as that's the likely time it will take for the implementations to even stabalize to a usable point).
We've used SoundManager2 at work, at it was a really easy turn-key solutions and well documented API.
http://www.schillmania./projects/soundmanager2/
Example:
soundManager.createSound({
id:'mySound1',
url:'../mpc/audio/CHINA_1.mp3'
});
soundManager.play('mySound1');
BSD License: http://www.schillmania./projects/soundmanager2/license.txt