HTML5 Audio Is Here (Sorta)

Figuring out how to implement a pure HTML5 Audio solution for my game was quite a chore. I found countless threads and post complaining that audio support is just not there yet and that the best thing to do is use flash based solutions (like the SoundManager 2 script). However, I found other information which lead me to believe it could be done. After much searching and trial and error I figured out something that would work and that would preload the sounds before the game would start. My ultimate solution was pure HMTL5 without the use of a script and used a variety of techniques I gleaned from reading others posts and blogs(mostly stackoverflow).

Here is how I did it:

First I load all the game sounds using HTML audio elements in the body of my page. You have to provide at least a .mp3 file and a .ogg file to be compatible with most browsers. Also, If you plan on doing multi-shot sounds (sounds that can be played overlapping themselves such as a rapid fire gun sound in a game) you will have to load multiple instance of them into separate audio elements (Many of my sounds have 5 or 6 instances of themselves)

<audio id=”gun_sound_1″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_2″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />
<audio id=”gun_sound_3″ preload=”auto”>
<source src=”sounds/gun.mp3″ type=”audio/mpeg” />
<source src=”sounds/gun.ogg” type=”audio/ogg” />

Secondly the JavaScript

//Create a counter for the sound
gunSound_counter = 1

//Variable holding the number of audio elements that exist
gunSound_maxNumber = 3;

function playSound_html5(soundName)
//Add the counter suffix
soundToPlay = soundName+gunSound_counter;

//Play The Sound
audioElement = document.getElementById(soundToPlay);;

// For Multi-Shot sounds Increment the counter. If counter is at the max reset to one
if (gunSound_counter >= gunSound_maxNumber)
gunSound_counter = 1;

Now when ever I want to play the sound I just call the playSound function and pass it a string with the name of the sound I want to play (without the number suffix).


I am pretty sure there is likely more eloquent ways to do this, but hopefully this can help you get a good start.

Update: Upon reading this it now looks like the SoundManager 2 now offers support (beta) for HTML5 audio. Looks like I will have to check this out on my next game cause sound really was just a pain.


Some of the sources I used:

Building HTML5 video controls with JavaScript