HTML and CSS Reference
Playing Sounds, the Mobile Achilles Heel
What's in this chapter?
• Learning the <audio> tag
• Creating a desktop sound engine
• Creating a mobile sound engine
Wrox.com Code Downloads for this Chapter
You can find the wrox.com code downloads for this chapter at www.wrox.com/rem-
title.cgi?isbn=9781118301326 on the Download Code tab. The code is in the Chapter 25 download and individu-
ally named according to the names throughout the chapter.
Along with its many other enhancements to browser capabilities, HTML5 finally brought with it the promise
of sound as a first-class citizen. Despite its limitations, the basic <audio> tag can be used in desktop HTML5
games for music and sound effects with a little coaxing. Unfortunately, HTML5 audio on mobile has been some-
what neglected. This chapter examines the current limitations of HTML5 audio on mobile and some possible
workarounds for those limitations.
Working with the Audio Tag
As mentioned, HTML5 defines an <audio> tag as part of the core HTML5 specification. It's designed primarily
for in-page sound playback, but the flexibility of the tag means that game developers have repurposed it for game
audio as well.
Using the Audio Tag for Basic Playback
The <audio> tag can be used to create an on-page audio player with a single tag:
<audio src="music.mp3" controls/>
More interesting from a game development perspective, however, is that the <audio> tag can also be created
entirely separate from a visual component using the Audio object as you saw briefly in Chapter 10, “Bootstrap-
ping the Quintus Engine: Part II.”