Smashing Html5

Chapter 10: Sound

Adding sound to Web pages allows developers to create a wide range of Web sites. Sites that play music, provide instruction, or add sound effects certainly widen the range of possibilities of what you can do with HTML5. This chapter examines how to prepare sound for the Web and how you can use sound to help your Web pages make some noise.

You’ll learn how to work with the different <audio> tag attributes and settings. Also, you’ll see how different browsers handle sound and different sound files. As with graphics, specialized programs are available to create audio and edit it. So, after examining the basic HTML5 elements and attributes, this chapter goes on to show you how to create sounds for your Web site.

The Basics of Audio in HTML5

One of the most exciting new tags in the HTML5 collection is <audio>. With it you can play audio files using the speakers on your computer or headset on a mobile device. The basic format to select a sound file to play is:

<audio src=”jazz.mp3”></audio>

The src attribute works just like it does in an <img> tag — it’s a reference to the source of the file. However, to get the audio to play, you need to look at the attributes.

Autoplay

The autoplay attribute is fairly self-explanatory. As soon as the page loads, the sounds begin to play. Before adding the autoplay attribute, you want to be sure that all your users are going to be okay with listening to whatever you’re playing. One way to guarantee that users will not return to a ...