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. Notice the src attribute directs the browser to an audio file, such as assets/dink.mp3. The type attribute indicates the audio format, such as audio/mpeg. JavaScript accesses the audio tags in order to respond to game events such as tapping, 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 some Firefox browsers require 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 other free HTML5 audio tutorials, for details. The Determine Audio Format: Example finds the audio file format useful per browser, then assigns audio files in response to tap events. Developers can change audio files, but not formats, 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.

Page 22

Game Tutorial for Beginners was prepared a few years ago. HTML5, CSS3, and JavaScript have improved over time, yet this free course continues to include useful features and long standing software development techniques. Enjoy more projects with free Web & game development tutorials.

Tags

free tutorials, learn web design, learn web programming, read books online free, free ebooks, free books online,free books to read, online books, learn web development, STEM, CSS 3, HTML 5, Web developer, learn to code, learn programming, interactive web design, interactive website design,

Copyright © 2015 Seven Thunder Software. All Rights Reserved.