HTML5 Audio Sprites

Since you're reading this, you probably have a pile of sound files in a web application wondering if there's a better way. And since you already know how image sprites work, you got to thinking that maybe you could do the same thing for audio. Well, you're in luck. You can! And, with a bit of third-party-library magic, it's possible across all the major browsers.

Right off the bat, here's a working demo of an audio sprite:

Each button plays a different sound, but all from a single audio file. This is done by specifying an offset and a length for each individual sound that is contained within the audio sprite file. When you want to play a particular sound, the audio file begins playing at that sound's offset and finishes playing after a specific amount of time specified by that sound's length.

If you inspect the source of the demo, you will notice that I am using the createjs sound library for audio playback. SoundJS does not support audio sprites, as I was attempting to do, so I had to create a wrapper class to handle this part. Here is a sample of the wrapper class in use:

// Create an instance of the wrapper class.
var Sound = new SoundManager({
    // The base URI path for downloading sound files.
    basePath: 'sounds/',
    // Define all the sounds we want to use in our application.
    // You can reference separate audio files, or the same audio file for each sound.
    sounds: [
        { fileName: 'all.ogg', offset: 0, length: 115, id: 'sound1' },
        { fileName: 'all.ogg', offset: 1000, length: 205, id: 'sound2' },
        { fileName: 'all.ogg', offset: 2000, length: 524, id: 'sound3' }
    ],
    // Fallback file extension(s).
    alternateExtensions: ['m4a']
});

// Listen for some user event to trigger a sound.
var button2 = document.getElementById('play-sound-button-2');
button2.addEventListener('click', function(evt) {
    Sound.play('sound2');
});

Note the offset value of each proceeding sound. I have added some padding between each sound so that it is less likely that the audio playback from one track will overlap with the next one. The reason for this is the inaccuracy of JavaScript's setTimeout function. This is also why I've included a custom setTimeout function in the wrapper class:

SoundManager.prototype.setTimeout = function(callback, delay) {
    var start = Date.now();
    var end = start + delay;
    var expected = start + interval;
    var interval = 50;
    setTimeout(function step() {
        var now = Date.now();
        if (now > end) {
            // Enough time has passed.
            // Execute the callback.
            return callback();
        }
        var drift = now - expected;
        expected += interval;
        setTimeout(step, Math.max(0, interval - drift));
    }, interval);
};

The above function creates a loop internally which checks and adjusts for the drift since the last loop. It will continue until the original delay time has passed, then it will execute the callback function it was given. The isn't a perfect solution, because there could still be significant delays in the event loop caused by slowly executing code somewhere else in the application.

Well, that's about it for audio sprites. Have some noisy fun out there!