The last thing we need to do is start playing the sounds at the right moment. You should already have determined this when you were planning your sounds. So you need to identify where in your code you will call the commands to start playing each sound.
This of course will be different in each of your games. In my example, it goes like this:
- The goodyAudio will play when the player collides with a goodie. So, the code will be in the main() function, inside the goodies loop, and inside the collision test.
- The winAudio will play when the player has collected all goodies, when they win. So, the code will be in the main() function, inside the checkWin moment.
- The bgAudio will start playing (and start looping) when the player first moves. Remember that browsers do not like auto playing sounds. This is because of abuse by advertisers. Many browsers will refuse to play a sound without first registering a user input. So, an option is to start the background loop at the first user interaction. And, in this game, this is when the player clicks any arrow on the keyboard or touches a button. So, the code will be in the keydown and touchstart event listeners. We also want the background to stop playing when the player wins.
goodyAudio
Whenever you want to play a sound, like for painting an image, you need to check if it is ready to play. And if it is, then you call the play() command to start playing.
So we want to play this sound when the player collides with a goodie. In the example game, the goodies loop is at line 194, and the collision test block starts at line 195. So the code to play the sound goes right in there, at line 197. And it looks like this.
if (goodyAudioReady) {
goodyAudio.play();
}
Go see in the example game code where exactly this is. Remember that in your game, it can be at a different place. The whole goodies loop block, with the sound code, looks like this. (Yours will be different, focus on the new audio code. In colour.)
//check collisions
for (var i in goodies) {
if (checkCollision(player,goodies[i])) {
goodies.splice(i,1);
if (goodyAudioReady) { //check if sound is ready
goodyAudio.play(); //play sound
}
}
}
winAudio
The win sound will be triggered when the game is finished, when all the goodies have been collected. This happens, in the code, in the first moment of the main() function: the checkWin() condition. (at line 159 in the example) Within this block, we first paint the win image and then, at line 168 in the example, we play the winAudio.
Note that we also stop the bg loop at the same time. There is no stop() command in audio objects in JS. So here we use pause(). Code looks like this.
if (winAudioReady) {
bgAudio.pause();
winAudio.play();
}
bgAudio
Lastly, we want to start looping the background sound at the first interaction of the user. Again, the browser does not play sounds automatically, so we make it happen when the user presses a key on the keyboard or touches a button. So we will add the code to play the bg in the keydown event listener. (line 81 in the example game)
Remember that for the background, we have an extra condition to prevent it from playing multiple times. So not only will we check that the sound is ready to play, but we will also check if it is already playing.
//Play bg music only once
if (!bgPlaying && bgAudioReady) {
bgAudio.play();
bgPlaying = true;
}
Here !bgPlaying means, in English: “bgPlaying is false” (notice the exclamation point). So if bgPlaying is false and bgAudioReady is true, play bgAudio, and set bgPlaying to true. That last bit is to make sure it does not play multiple layers of the sound.
Again, this code is placed in the event listener for the keydown. That block will look like this. (Audio code in colour.) This is just an excerpt, not the whole block.
// Handle keyboard controls
addEventListener("keydown", function (e) {
//Play bg music only once
if (!bgPlaying && bgAudioReady) {
bgAudio.play();
bgPlaying = true;
}
//Keystrokes
if (e.keyCode == 38) { // UP
vX = 0;
vY = -player.speed;
}
... ... ...
You will need to place the same code in the event listener for the touchstart so the sound plays on mobile. (line 113) But keep in mind that mobile browsers are even more picky than desktop browsers when it comes to sounds. So it may not work. Don’t worry about it. Of course, there are ways of making sure that the sound will play, but I try to keep all this simple for you.