Beginning HTML5 Game Development – Adding Sound

Goals:

• Learn to load sound files with the <audio> tag.
• Learn to fire off a sound as a sound effect.
• Learn to set up a bgm variable and update it.

What game is complete without adding sound? It’s not a difficult task thanks to the <audio> tag. Currently the supported formats are wav, mp3, and ogg all with varying support from different browsers. Wav seems to be the most supported so we’ll use it.

<audio id="collide" src="Sound/collide.wav" type="audio/wav" preload="auto"></audio>
<audio id="score" src="Sound/score.wav" type="audio/wav" preload="auto"></audio>
<audio id="start" src="Sound/start.wav" type="audio/wav" preload="auto" autoplay></audio>

The <audio> tag has quite a few options that I should explain before you place one in your html file’s header. Give the id a meaningful name so that we can easily use it to fire off from our script. The src option is the relative path to the sound file you would like to use. The preload option should be left on auto unless you have some need to load it later on in the game’s lifespan; this doesn’t PLAY the file, just makes it ready to use. You can use the autoplay option to fire off a sound on page load or, when used with the loop option, to set a repeating bgm but most likely, you’ll want to play sound from the script controlling the game.

Firing off a sound effect is pretty simple:

sndCollide = document.getElementById('collide');
sndCollide.play();

We store a reference to the file, and then we tell that variable to play(). There is one glaring limitation to this method, you can’t play multiple instances of the sound through the same variable. The best option is to make an array with X amount of space to fire off your sound effects. Once a sound is done, set that index to null. When you need to fire off a new sound, find the first null slot, load the context to that slot, and play() it. If the array is full, there’s a few options. You could just not play the sound, that’s the simplest option. You could expand the array but I’d advise against this; you never know how big it could get. Last you could calculate which sound is nearest to completion (time left = duration – currentTime) and put the new sfx there.

Adding background music is just as simple:

var bgm = document.getElementById('BGM1');

bgm.play();
bgm.pause();

bgm.volume =0.5;

if(bgm.currentTime == bgm.duration)
     bgm = document.getElementById('BGM2');

bgm.loop = true;

Grab a context to the file by its id, and hit play. These are a few of the useful options to get your creative juices flowing.

As always, I hope you found this useful. Is the post clear? Do you need elaboration on a subject? Did something not work? Please leave feedback. ^^