HTML5 Canvas

Home / Topic / HTML5 Canvas / Adding Sound Effects and Music

Adding Sound Effects and Music

In this chapter, we will learn how to incorporate sound effects and music into our game on canvas, which adds a layer of immersion and enhances the player's experience. We will use the Audio API in JavaScript to control sound playback and its integration into game events.

Playing a Basic Sound

The Audio API in JavaScript allows us to create sounds using the Audio object. Below, we show how to load and play a sound at the start of the game.

javascript

"In this code, we create an Audio object and set its source to the sound file path. Then, we use the play method to play the sound."

It is important to ensure that the sound file path is correct and that the format is compatible with browsers.

Adding Sounds to Game Events

To make the game more interactive, we can play specific sounds in response to events such as collisions, score increases, or victory conditions.

Example: Sound on a Collision

Let's imagine we want to play a sound each time two rectangles collide on the canvas. We will use the collision event we configured earlier.

javascript

"Here, inside the checkCollisionAndPlaySound function, each time a collision occurs, we reset the sound with currentTime equal to zero and play the sound with play, to ensure it is heard with each collision."

Playing Background Music

We can add a background music track that plays continuously while the game is active. To make the music loop, we can enable the loop property of the Audio object.

javascript

"Here, we create an Audio object for the background music, setting the loop property to true so that the music plays continuously. Then, we use the startBackgroundMusic function to start the music when the game begins."

It is a good practice to provide controls to the player to enable or disable background music.

Volume Control and Muting

To provide a flexible user experience, we can add volume controls and a mute button for players to adjust the audio to their preferences.

Example: Volume Control

We can adjust the volume of sound and music by modifying the volume property, which accepts values between 0 and 1.

javascript

"Here, we set the volume of backgroundMusic to 0.5 to reduce it to half, and the volume of collisionSound to 0.7, to adjust the level of the collision sound."

Example: Mute Button

We can implement a button that allows players to mute or unmute the sound as they prefer.

javascript

"In this example, we use the muted property of audio objects to turn the sound on or off. We create a toggleMute function that changes the state of the isMuted variable and applies this state to both backgroundMusic and collisionSound."

Exercise: Add a Victory Sound

As an exercise, implement a special sound to be played when the player reaches a victory condition, such as reaching a certain score.

javascript

"In this exercise, we create a victory sound and play it only once when the score reaches ten. We use a victorySoundPlayed variable to prevent the sound from playing multiple times."

Conclusion

In this chapter, we have learned to add sound effects and music to our canvas game, enhancing the player's experience and increasing immersion.

Back to previous chapter

Mark as read and continue

Ask me anything