Uzma’s Quest: Adding Sound Effects and Music

Posted on 13 March 2020 by Chris Dann

Categories: Coding

After revising the software architecture, the next thing I decided to do with Uzma’s Quest was to add sound effects and music. Thanks to HTML5’s <audio> tag and its ability to be easily controlled by Javascript, this was a pretty simple task.

Getting the sounds and music

The first thing is to find the audio files we want to include in the game. I found two excellent free resources for game designers to add sounds to their game.

For sound effects, Zapsplat is a free (create a free account) resource with tens of thousands of sound effects for games, from retro sounds to more modern.

Sounds are downloadable in mp3 format and then can simply be included in our game.

For music, I found a link to BoxCat Games on the Free Music Archive, which had plenty of examples which will do for now.

I also found an awesome country and western track which I loved but was payable. For now the important thing is still just to get all the features working, then look more seriously at artwork and sound design later on.

Setting up Sound Objects

W3Schools have a ready made function constructor for sound objects, and there’s no need to reinvent the wheel. All I did was take the original function constructor and add a little extra code to be able to set a parameter for whether the sound should loop (music should loop indefinitely, sounds should play once and stop).

var sound = function(src, loop) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none"); = "none";
    if (loop) { this.sound.loop = true; } = function(){;
    this.stop = function(){

The function constructor in place, we can now create sound objects with the music and sounds we need. This IIFE sets up all the sound objects for the game:

soundController = (function() {

    // set up sound objects. Runs inline with page
    mySound = new sound("sounds/boing.mp3", 0);
    collectObjectiveSound = new sound("sounds/brrring.mp3", 0);
    myMusic = new sound("sounds/musik.mp3", 1);
    myChillMusic = new sound("sounds/chill-music.mp3", 1)
    myWin = new sound("sounds/win.mp3", 0);
    myLose = new sound("sounds/lose.mp3", 0);


We can now use these sounds and their methods from anywhere in the script. To play a sound or music is as simple as:;

Sounds will not play until the user has interacted with the DOM. So the music can’t start straight away on page load but only on the second intro screen after the user has “clicked space to continue”.

User Sound and Music Control

It’s good practice to allow the user to turn on and off the sounds and music. I added two icons to the top of the screen during the game and on the intro/end of level screens to turn sounds and music on and off.

Both the icons are attached to click handlers which will run functions on click to start or stop the music and change the icon to the appropriate one (sound on / sound mute).

Sound control is easy to implement within the game by wrapping every game sound in conditional logic:

if ( {;

Variables in the global data object maintain state by recording whether music and sound are currently turned on or off. The code above tests whether sounds are activated by testing whether = true, before playing the sound.

Music is a little more complicated as there is separate music for the game itself and for the intro / end of level screens. Although they look the same, the buttons to turn the music on and off on the screens are separate to the buttons in the game, making the state maintenance variables essential.

On each transition between the main game and the static screens (see thinking about software architecture) the music needs to stop, then the state maintenance variables checked to see whether the new music should start, and finally the correct icons displayed depending on whether music and sounds are on or off.

Looking for a Web Developer?

We hope you found this post useful. We're here to help with all your web requirements, from quick tweaks through to complete websites and bespoke web platforms. Speak to us today and let's start making the web work for you.

Call 0800 048 7608 or Email Us

Contact Us