Add Sound to Games

Free HTML5 Game Tutorial for Beginners: Page 22

Overview HTML5 Audio Tags Control Sound with JavaScript Play Sound Tips Summary
Musical Notes

Overview

This tutorial explains how to add interactive audio to online desktop and mobile games. Audio provides helpful user feedback. Music and sound effects enhance the experience.

This tutorial demonstrates how to use HTML5 to play different sound files. When the player taps, gains points, a level or game's over, various sound effects play.

Implementing sound for games includes five steps. First, prepare audio files in at least two formats. Include MP3 and OGG audio formats. Second, provide HTML5 markup for audio and source tags. Third include src and type attributes. Fourth, obtain references to HTML5 audio tags with JavaScript. Fifth, call functions on the audio tags to interactively start and stop music, sound effects, or speech.

HTML5

The markup below includes separate tags for audio which responds to tap events, correct answers, and level or game over events. id attributes include aTapped, aRight, and aLevel.

<audio 
id="aTapped"
>
<source 
src="assets/dink.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/dink.ogg"  
type="audio/ogg" 
/>          
</audio>
  
<audio 
id="aRight"
>          
<source 
src="assets/right.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/right.ogg"  
type="audio/ogg" 
/>          
</audio> 

<audio 
id="aLevel"
>          
<source 
src="assets/level.mp3" 
type="audio/mpeg"
/>
<source 
src="assets/level.ogg"  
type="audio/ogg" 
/>          
</audio>  

The HTML audio tag's src attribute's are assigned both MP3 and OGG versions of the same sound. The src attribute of the audio tag also accepts WAV formatted sound.

Various browsers and devices require audio in different formats. For example Internet Explorer plays files in the MP3 format, and Firefox requires files in the OGG format.

Control Sound with JavaScript

When the game initializes, obtain references to audio elements, using the id values assigned with the previous HTML markup. The following listing saves references auRight, auTapped, and auLevel.

auRight = document.getElementById
(
 'aRight'
);
auTapped = document.getElementById
(
 'aTapped'
);				
auLevel = document.getElementById
(
 'aLevel'
);

Play Sound

After obtaining a reference to an audio tag, simply play the associated sound with the tag's play() method.

If a level is over, the controller plays the level over sound with auLevel.play(). If the player selected the correct answer, the controller plays the right sound with auRight.play(). If the player taps anything, the controller plays the tap sound with auTapped.play().

Tips

Support for the audio reference's loop property seems a little inconsistent. Try assigning auLevel.loop = true; if you'd like to play the game over music continually.

The audio reference's pause() method seems to work consistently across devices if you need to stop a sound.

This example provided separate HTML5 audio tags for each sound. However with JavaScript one HTML5 audio tag can play multiple sound files. See the Determine Audio Format: Example with tutorial for details. The example finds the format useful per browser, then assigns audio files in response to tap events. However developers can change audio files based on game events as well.

Summary

This tutorial explained how to add interactive audio to online desktop and mobile games. Audio provides helpful user feedback. Music and sound effects enhance the experience.

This tutorial demonstrated how to use HTML5 to play different sound files. When the player taps, gains points, a level or game's over, various sound effects play.

Implementing sound for games includes five steps. First, prepare audio files in at least two formats. Include MP3 and OGG audio formats. Second, provide HTML5 markup for audio and source tags. Third include src and type attributes. Fourth, obtain references to HTML5 audio tags with JavaScript. Fifth, call functions on the audio tags to interactively start and stop music, sound effects, or speech.

For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.