HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 10

Creating Audio for Games

In This Chapter

• Introducing HTML5 audio

• Dealing with audio formats

• Using the Web Audio API

• Implementing an audio module

• Adding sound effects to the game

NOW THAT THE visual aspect of the game is taken care of, you can turn to adding audio. This chapter introduces you to the new HTML5 audio element that aims to solve the age-old problem of adding sound to web applications.

First, you explore the basics of the audio element, covering most of the details and API functions described in the HTML5 specification. You also see an example of how the new Web Audio API enables even cooler things such as positional audio and advanced audio processing.

Finally, you use the HTML5 audio element to implement an audio module for Jewel Warrior. You also see how to bind sound effects to game events, thereby adding an extra dimension to the game experience.

HTML5 Audio

In the early days of the web, there was no way to put sound on web pages, nor was there a need for it because the web was largely just a way to display documents. However, with the games and applications being produced today, it's suddenly a feature that makes sense.

Microsoft introduced a bgsound element to Internet Explorer that allowed authors to attach a single audio file to a page, which then played in the background. Its use was frowned upon, however, because users couldn't turn the sound off, so instead of enhancing the page, it was distracting and annoying.

Over time, various ...