Saturday, February 23, 2013

Adding Sound to Three.js Games

‹prev | My Chain | next›

One thing that I do not cover in 3D Game Programming for Kids is sound. I am concentrating more on the 3D gaming aspects than overall multimedia experience. Also, I am really trying to teach JavaScript, but don't tell anyone—I'd rather people think game programming is my main goal (better marketing). Anyhow, I would be remiss if I did not at least explore game sound.

The book has the distinct advantage of requiring Chrome. I may try to add Firefox as well, but the bottom line is that I do not have to worry about certain backwater browsers due to the need for WebGL. This means that I do not have to worry my pretty little head over backward compatibility in sound—HTML5 will work just fine.

Of course, I have never played with HTML5 sound before...

I grab a single sound from Freesound. I am not looking for game soundtracks, just ~1 second collision sounds. In case I actually do end up using these, I opt for an attribution-only (all Freedsound files are creative commons) sound from "". I upload it to as "sounds/donk.mp3".

I will add this sound to the stripped-down version of a recent Three.js game in which arrow controls move a little ball around the screen:

I add the "donk" sound as:
  var audio = document.createElement('audio');
  var source = document.createElement('source');
  source.src = '/sounds/donk.mp3';
And that does the trick. When the game loads, I get hear the desired "donk".

To hear it when the player runs into the wall, I move the call into the collision event (from Physijs) of the player:
  player.addEventListener('collision', function(object) {;
That is all there is to it. Now when the player runs into one of the walls, I hear a surprisingly reassuring "donk" noise.

I add a timeout before adding the sound:
  setTimeout(function() {
    player.addEventListener('collision', function(object) {;
  }, 500);
This prevents a "donk" when the player is first added to the screen.

I must admit that even a simple sound like "donk" does add something to the experience. It might be worthwhile creating a simple library with a few sounds that can be played like: I will have to think about that as the book is already getting nearing capacity for concepts. Simple sounds like this seem simple enough, but I need to figure out how or if I would like to support continuous sounds (loop=true) like those that a player might make while walking. That is something for another day.

The sound-enabled simulation.

Day #671


  1. Completely agree. Adding sound to the book gives it that extra dimension. Even a simple example like that shown above would be enough to give the reader to go experiment!

    1. Thanks! It'll be a bit before I figure out how to add it to the book, but the simple library is available from ICE with:

      <script src=""></script>

      There are 11 sounds: bubble, buzz, click, donk, drip, guitar, knock, scratch, snick, spring, swish. Each can be played: ``. They can also be repeated: `Sounds.bubble.repeat()` (and stopped with `.stop()`).