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. Here is the little helper class that I wrote to help with this:

var SoundManager = function(options) {

    this.options = options || {}
    this.options.alternateExtensions || (this.options.alternateExtensions = [])

    this.initialize()

}

SoundManager.prototype.initialize = function() {

    if (!this.canPlaySounds())
        return

    createjs.Sound.alternateExtensions = this.options.alternateExtensions

    createjs.Sound.addEventListener('fileload', function(e) {

        // An audio file was loaded.

    })

    for (var i in this.options.sounds)
    {
        var sound = this.options.sounds[i]

        createjs.Sound.registerSound({
            src: this.options.basePath + sound.fileName,
            id: sound.id,
            basePath: this.options.basePath
        })
    }

}

SoundManager.prototype.play = function(id) {

    if (!this.canPlaySounds())
        return

    var sound = this.findSoundById(id)

    if (!sound)
        // Nothing to play..
        return

    var fullFilePath = this.options.basePath + sound.fileName
    var options = {}

    options.offset = sound.offset || 0

    var instance = createjs.Sound.play(fullFilePath, options)

    if (sound.length)
        setTimeout(function() {

            instance.stop()

        }, sound.length)

}

SoundManager.prototype.findSoundById = function(id) {

    for (var i in this.options.sounds)
    {
        var sound = this.options.sounds[i]

        if (!!sound.id && sound.id == id)
            return sound
    }

    return null

}

SoundManager.prototype.canPlaySounds = function() {

    return !!createjs.Sound.initializeDefaultPlugins()

}

You may have noticed the references to createjs. This is the third-party library I was talking about earlier. You can find it here. It makes working with HTML5 audio across browsers much easier.

Here is the snippet that creates an instance of the SoundManager class from above:

var Sound = new SoundManager({

    basePath: 'sounds/',

    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'}
    ],

    alternateExtensions: ['m4a']

})

You might notice the extra padding on the sounds above. This is due to the imprecision in HTML5 audio playback. This is something that likely varies between browsers, but I've found that it's just a good idea to include a bit of padding between each sound. I think rounding up to the neareast whole second is probably sufficient.

And now, all that is left to be done is listen to the button-click events and play some sounds:

var button1 = document.getElementById('play-sound-button-1'),
    button2 = document.getElementById('play-sound-button-2'),
    button3 = document.getElementById('play-sound-button-3')

button1.addEventListener('click', function(e) {

    Sound.play('sound1')

})

button2.addEventListener('click', function(e) {

    Sound.play('sound2')

})

button3.addEventListener('click', function(e) {

    Sound.play('sound3')

})

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