Uzma’s Quest: Adding Sound Effects and Music

Categories: Coding, Uzma's Quest

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");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    if (loop) { this.sound.loop = true; }
    this.play = function(){
      this.sound.play();
    }
    this.stop = function(){
      this.sound.pause();
    }
  }

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:

collectObjectiveSound.play();

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 (data.game.soundOn) {
   mySound.play();
}

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 data.game.soundOn = 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.

Can I Help?

I hope you found this article useful. I'm always available to help with any web questions or issues you have, and offer a wide range of services from simple by-the-hour tweaks and repairs through to fully custom websites. I'm a WordPress specialist and can fix or modify your WordPress installation or build in new functionality. I also offer a free website review (see below) to see where the web could be working harder for your business.

Click here to drop me a line today with any questions or anything you'd like to discuss. I'm here to help!

Free Website Review

Do you wonder whether your website is doing you justice? I look at your website, search engine rankings, social media and reviews, and let you know where you could be leveraging your online presence to do more for your business.

My PDF report is 1000 words written specifically for you. I'll tell you simple, easy wins you can do quickly and for free, through to what you might want to consider if you redesigned your web presence. It's completely free and comes with no obligation other than to tell other people if you find it useful.

Click here to get your free website review