How to Add Sound to Your HTML5 Game - dummies

How to Add Sound to Your HTML5 Game

By Andy Harris

Sound effects have long been one of the biggest weaknesses of the web as an HTML gaming platform. Web browsers had very inconsistent and troublesome audio capabilities. Fortunately, HTML5 solves the sound issue (at least at some level).

The simpleGame library makes it very easy to build new sounds by adding a Sound object. Here’s a very simple program that plays a sound effect:

<html lang="en-US">
 <meta charset="UTF-8">
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var scene;
  var ribbit;
  function init(){
   scene = new Scene();
   owMP3 = new Sound("ow.mp3");
   owOgg = new Sound("ow.ogg");
  } // end init
  function update(){
   if (keysDown[K_SPACE]){;;
   } // end if  
  } // end update
<body onload = "init()">
 <div>DO NOT press the space bar!!</div>

Sound effects are easy to manage with the simpleGame library:

  1. Create your sound effect.

    The best formats are mp3 and ogg. Put your audio file in the same directory as your program.

    To maximize browser compatibility, continue to Step 2.

  2. Make a variable to hold your sound effect.

    Like every game asset, you’ll have a variable containing your sound. Define the variable outside any functions.

  3. Build a Sound object to initialize your sound effect.

    The simpleGame library has a Sound object. Create an instance of this object to build your sound. The object requires one parameter: the name of the file containing your sound effect. Normally, you’ll do this in the init() function of your game.

  4. Play the sound with the play() method.

    Once you’ve defined a sound effect, you can play it back easily with the sound object’s play() method.


Sound effects add a lot to your game. It used to be quite difficult to work with sound effects in web pages, but HTML5 has a wonderful new <sound> tag that finally gives the browser access to sound effects without third-party plug-ins. The Sound object in the simpleGame library is based on the HTML5 <sound> tag.

Great as the sound element is, there are some problems. Although all HTML5-compliant browsers play audio files, they do not play the same file types. The mp3 format is very well known, but not all browsers support it. Many browsers prefer the newer (and open source) Ogg format. If this isn’t confusing enough, the support changes from version to version of the same browser.

My suggestion is to use both mp3 and Ogg formats and let the browser play whichever one it can. That will resolve most issues.

Of course, it isn’t easy to find the same sound effect in both formats. Consider using the free audio editor, Audacity. This tool allows you to record and edit sound effects in multiple formats. Depending on the version of Audacity you get, you may also need the LAME plug-in. With these tools, you can easily record your own sound effects and save them in both Ogg and mp3 formats.