In this tutorial we will go over how to add sound to your Kiwi.js games. Using sound is simple and effective, and requires very little setup.

Below is a demo game showcasing the techniques and functions showed in this tutorial. Use the 1, 2, and 3 keys to change weapon and mouse click to shoot. The ‘A’ and ‘D’ keys control the characters movement. The game also has an audio toggle button, this is to mute or unmute the sound from the game.

Download or view the code for this tutorial in the Kiwi.js example repo here inside of the /tutorials/website_examlpes folder.

Loading Audio Files

To be able to use sound file in our game we first need to load them into the global cache. Use the addAudio function on your state and pass through a name and your file location. We recommend storing your sound files in a separate folder within your asset folder, although this is not necessary.

What File Types Can Be Used

Different browsers handle their interaction with the <audio> tag in different ways. Therefore, some browsers do not support all audio file types. Check the handy chart below to see what your browser can run.

Browser	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO	YES	YES
Safari	YES	YES	NO
Opera	NO	YES	YES

Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3.

Creating an Audio Object

A Kiwi.Audio object contains the functionality needed to play a single sound/sound file on a game.

To create an Audio object we will need to give it a name, set the volume, and a boolean value to indicate if the audio track will loop or not.

Playing, Pausing and Stopping Audio

We don’t want all our sounds to be continuously playing all the time. Usually they accompany an action or event in game, shooting a gun, for example. Therefore we need to specify when to play and stop audio tracks.

To play an audio object use the play function. You can also specify a particular moment during the track to start with. This is described in the Setting and Using Markers section below. By default the audio track will play from the beginning.

An audio object can be paused at any point using the pause function. This allows you to resume the track, using the resume function, at any time. Calling the play function on a paused track will restart the track from the beginning rather than from the point at which it was paused.

The stop function on an audio object will cause the track to stop playing.

Setting and Using Markers

Markers, in the audio object, are used to set specific points of a track which you would like to return to at any time. To create a marker, use the addMarker function on an audio object. The line below adds a marker to our backgroundMusic track. We need to pass a unique name for the marker, a start and end time (in seconds), and whether or not this section loops.

To remove any existing marker use the removeMarker function and pass through the name of the marker to be removed.

Markers are relatively useless if we don’t know how to play them. When using the play function of an audio object you are able to pass trough a name of a marker. If you do this the audio will play from the start point to the end point of the marker instead of it’s usual duration.