Working with Audio in HTML 5 Games

By on June 25, 2012

This tutorial explains how to add question audio and change game sounds in HTML 5 games.

Note: .wav files are the most universally compatible with browsers and devices. (However, only .mp3 works in Internet Explorer.)

Adding Question Audio
You can add your own audio to each question. Here are the steps to add audio:

1. Copy your audio file to the questions folder in your game files.
2. (Questions tab) Uncomment the audio code line on the question. (For example: q1_audio=xxxxx.wav) You should see one audio code line in each question section.
3. Type your audio file name after the = sign. (For example: q1_audio=YourAudioFileName.wav


Changing Game Sounds

You can change the sounds in the games such as the introduction, correct, incorrect, and conclusion sounds.

Each of the games has 3 audio file types that is tries to used based on the browser type. You don’t have to create 3 types each time. A .wav file is most universal.

Here are the game sounds that you’ll find in games:
hover=hover.wav,hover.ogg,hover.mp3 (Rollover sound for buttons.)
finish=finish.wav,finish.ogg,finish.mp3 (Sound when you complete the game.)
correct=correct.wav,correct.ogg,correct.mp3 (Correct sound on questions.)
incorrect=incorrect.wav,incorrect.ogg,incorrect.mp3 (Incorrect sounds on questions.)
select=click.wav,click.ogg,click.mp3 (Click sound for buttons.)
start=start.wav,start.ogg,start.mp3 (Sound in the beginning of the game.)

The game sounds are found in the config/sounds folder of each game. There are two ways to change a game sounds:

Method 1 to Change Game Sounds
You can name your sound file the same as the existing one and copy over it in the config/sounds folder.

Method 2 to Change Game Sounds
You can upload a new sound file to the config/sounds folder and then update the sounds.ini file (Sounds tab).
start=YourFile.wav (Make sure that your uploaded file name matches the audio code in the Sounds tab.)


Removing Game Sounds

The sounds.ini file (Sounds tab) controls the game sound. To remove the sounds just comment out each line that pulls in the audio file. For example:

#hover=hover.wav,hover.ogg,hover.mp3 (Notice that I put a “#” in front of this line to comment it out.)
#finish=finish.wav,finish.ogg,finish.mp3
#correct=correct.wav,correct.ogg,correct.mp3
#incorrect=incorrect.wav,incorrect.ogg,incorrect.mp3
#select=click.wav,click.ogg,click.mp3
#start=start.wav,start.ogg,start.mp3

Additional HTML 5 Tutorials
Getting Started with HTML 5 Games
Changing Visual Elements, Backgrounds, and Colors in HTML 5 Games
Editing Questions and Answers in HTML 5 Games
Adding Images to Questions in HTML 5 Games

 

Posted in: Edit HTML 5 Games