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 "orginaljun.deviantart.com". I upload it to gamingjs.com 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';
  audio.appendChild(source);
  audio.play();
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 audio.play() call into the collision event (from Physijs) of the player:
  player.addEventListener('collision', function(object) {
    audio.play();
  });
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) {
      audio.play();
    });
  }, 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: Sounds.donk.play(). 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

3 comments:

  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!

    ReplyDelete
    Replies
    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="http://gamingJS.com/Sounds.js"></script>

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

      Delete