Building HTML5 Games with ImpactJS

Chapter 6. Working With Sound

Impact also supports sound as well as background music for your game. In this chapter, we will learn how to add sound effects, background music, and learn a little more about browser compatibility issues.

Adding Sounds

In order to add sound to our game, we are going to have to use the ig.Sound class. Impact supports two file formats: Ogg Vorbis and MP3. The ig.SoundManager class can automatically detect which file to load based on the browser. Here are some examples of how to set up an ig.Sound instance:

var sound = new ig.Sound( 'media/sounds/jump.ogg' );
var sound = new ig.Sound( 'media/sounds/jump.mp3' );
var sound = new ig.Sound( 'media/sounds/jump.*' );

The last example is a wild card that lets the ig.SoundManager automatically load the correct file for us. Our sound files, just like images, should live inside the media directory. I also keep them in a subdirectory called sounds, so they stay organized. Let’s add some sound effects to our player. Open the player.js class and set up the following properties at the top of our player class:

jumpSFX: new ig.Sound( 'media/sounds/jump.*' ),
shootSFX: new ig.Sound( 'media/sounds/shoot.*' ),
deathSFX: new ig.Sound( 'media/sounds/death.*' ),

Now we need to play the sound for each of these actions. Add the following line to the code where our player jumps:

if( this.standing && ig.input.pressed('jump')){
    this.vel.y = -this.jump;
    this.jumpSFX.play();
}

Next, we want to add a sound effect to our shoot animation. Locate ...