Home » Tutorials » Game Development » HTML5 Game Development: Adding Sound Effects

HTML5 Game Development: Adding Sound Effects

HTML5 Game Development: Adding Sound Effects

Welcome to the 4th tutorial of ‘HTML5 Canvas Game Development’!  We will learn to add sound effects to your game using HTML5.

Sound, one of the key element for building successful game. A successful game,  not only requires high quality of graphics and attractive story line, it  also requires sound effects to impress the players. Adding sound effects to your game is not only can enhance its entertainment value,  it also contribute to the game’s overall cachet of quality. Ok, please check out the demo here before we start the tutorial.

View Demo

As you can see from the demo, bounce sound effects occur when the ball hits something. We can easily attach an sound effects to the canvas game with the help of HTML5 technology – ‘Audio‘ tag.

Setup Audio Tag

The source code we are going to use in today lesson is the previous published post called – ‘Most Easiest & Simplest Way to Create a Game Using HTML5 Canvas‘.

Let’s open up the source code in your web authoring tool and setup the audio player after the canvas tag.

<body onLoad="drawGameCanvas()">
  <canvas id="gameBoard" width="300" height="300"></canvas>
  <audio id="soundEfx" src="pop.wav" style="display: none;"></audio>
</body>

An ID – ‘soundEfx‘ is assigned to the audio tag for DOM access in JavaScript later and pre-load a bounce sound effects for later use as well.

Implementation

Now, we have the audio tag defined in our HTML structure, let’s implement it to the game through JavaScript. First of all, we requires 2 variables for that, which is ‘soundEfx‘ and ‘soundLoad‘.

// Global variables.
var ballX = 150; // Ball x position.
var ballY = 150; // Ball y position.
var ballDX = 2; // Change in ball x position.
var ballDY = 4; // Change in ball y position.
var boardX = 300; // Board width.
var boardY = 300; // Board height.
var racquetX = 150; // Initial racquet location.
var racquetH = 10; // racquet height.
var racquetD = boardY - racquetH; // racquet depth.
var racquetW = 150; // racquet width.
var canvas; // Canvas element.
var ctx; // Canvas context.
var gameLoop; // Game loop time interval.
var titleFontSize = "bold 24px Georgia";//Set title font size
var contentFontSize = "normal 12px Arial";//Set content font size

var soundEfx; // Sound Efx
var soundLoad = "over.wav"; //Game Over sound efx
  • soundEfx is used for quick access to the audio tag in HTML.
  • soundLoad is used to store another sound effects file and use it when the game is over.

Secondly, assign the audio tag to the soundEfx variable when the page is load. So, we can achieve this by writing this line of code and place it inside the function of ‘drawGameCanvas‘, which run during the page load:

function drawGameCanvas() {
    //Assign audio to soundEfx
    soundEfx = document.getElementById("soundEfx");
    
    // Get the canvas element.
    canvas = document.getElementById("gameBoard");
    
    // Make sure you got it.
    if (canvas.getContext) {
      // Specify 2d canvas type.
      ctx = canvas.getContext("2d");
    
      // Play the game until the ball stops.
      gameLoop = setInterval(drawBall, 16);
    
      // Add keyboard listener.
      window.addEventListener('keydown', whatKey, true);
    
    }
}

Next, we insert the following code into where the bounce happens.

soundEfx.play();

In this case, we want the bounce sound play during the following circumstance:

// Bounce on a left or right edge.
if (ballX + ballDX > boardX - 15 || ballX + ballDX < 15) { 
    ballDX = -ballDX;
    soundEfx.play();
}

// If ball hits the top, bounce it.
if (ballY + ballDY < 15) {
    ballDY = -ballDY;
    soundEfx.play();
}
// If the ball hits the bottom, check see if it hits a racquet.
else if (ballY + ballDY > boardY - 15) {
  // If the ball hits the racquet, bounce it.
  if (ballX > racquetX && ballX < racquetX + racquetW) {
      ballDY = -ballDY;
      soundEfx.play();
  }
  • When the ball hits left or right edge.
  • When the ball hits the top edge.
  • When the ball hits the racquet.

and lastly, we change the source of the audio to the sound effects of game over, and play it when the ball hits on the bottom edge.

//game over sound
soundEfx.src = soundLoad;
soundEfx.play();

clearInterval(gameLoop);
//alert("Game over!");
ctx.font = titleFontSize;
ctx.fillStyle = "red";
ctx.fillText("Game Over", 80, 130);

ctx.font = contentFontSize;
ctx.fillStyle = "blue";
ctx.fillText("Please refresh the page to replay", 55, 150);

That’s it! Save your document, and play it in canvas, audio supported browser. Your game should work and behave as the demo below.

View Demo

Like it? Don’t forget to share it to your group! Please do us know your thoughts on the comment section.


  • I actually did the same, but someone pointed out to me that using html audio tag is not necessary – you could do it with JS only using
    soundEfx = new Audio(‘pop.wav’);

    • Hi Sebastian Poręba,

      Thanks for your suggestion! Your method is much more better than the one mentioned in the tutorial, and I do believe this is the proper way to integrating the sound with canvas.

  • Scarletbeherit

    Hello!
    I tried both your tutorial with the html5 tags and Sebastian’s jscript way for getting a sound effect to play.
    Problem is that the sound plays randomly, as if it’s always loading/buffering after each call to Sndfx.play();.

    Any leads?

Android, iOS Development Tutorials