Shtééf Shtééf -5 years ago 226
Javascript Question

Sound effects in JavaScript / HTML5

I'm using HTML5 for its noblest purpose: games, of course! The obstacle I've run into now is how to play sound effects.

The game is a port of an old Macintosh game, and because of its age, the requirements are few in number:

  • Play and mix multiple sounds,

  • Play the same sample multiple times, possibly overlapping playbacks

  • Interrupt playback of a sample at any point

  • Preferably play WAV files containing (low quality) raw PCM, but I can convert these, of course

My first approach was to use the HTML5 <audio> element and define all sound effects in my page. Firefox plays the WAV files just peachy, but calling #play multiple times doesn't really play the sample multiple times. From my understanding of the HTML5 spec, the <audio> element also tracks playback state, so that explains why.

My immediate thought was to clone the audio elements, so I created the following tiny javascript library to do that for me (depends on jquery):

var Snd = {
init: function() {
$("audio").each(function() {
var src = this.getAttribute('src');
if (src.substring(0, 4) !== "snd/") { return; }
// Cut out the basename (strip directory and extension)
var name = src.substring(4, src.length - 4);
// Create the helper function, which clones the audio object and plays it
var Constructor = function() {};
Constructor.prototype = this;
Snd[name] = function() {
var clone = new Constructor();;
// Return the cloned element, so the caller can interrupt the sound effect
return clone;

So now I can do Snd.boom(); from the Firebug console and play 'snd/boom.wav'. Neat. But I still can't play the same sample multiple times. It seems that the <audio> element is really more of a streaming feature rather than something to play sound effects with.

Is there a clever way to make this happen that I'm missing? Preferebly something within HTML5 and Javascript, because this experiment is focused on these two technologies. (And I lack any experience in Flash or Silverlight.)

I should also mention that, my test environment is Firefox 3.5 on Ubuntu 9.10. The other browsers I've tried -- Opera, Midori, Chromium, Epiphany -- produced varying results. Some don't play anything, and some throw exceptions.

Answer Source

You don't need to bother with <audio> elements. HTML 5 lets you access Audio objects directly:

var snd = new Audio("file.wav"); // buffers automatically when created;

There's no support for mixing in current version of the spec.

To play same sound multiple times, create multiple instances of the Audio object. You could also set snd.currentTime=0 on the object after it finishes playing.

Since the JS constructor doesn't support fallback <source> elements, you should use

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

to test whether the browser supports Ogg Vorbis.

If you're writing a game or a music app (more than just a player), you'll want to use more advanced Web Audio API, which is now supported by most browsers.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download