HTML5 Cookbook

Chapter 4. Native Audio

Emily Lewis

Introduction

You already deal with embedded content—content that is imported or inserted into a web page—almost every day (see http://www.w3.org/TR/html5/content-models.html#embedded-content-0). Think about the img element. It inserts content—the image—into your web page via the src attribute.

With HTML5, we now have many more options for embedded content, including native audio via the new audio element (see http://dev.w3.org/html5/markup/audio.html).

Native? Yes. That means no more ungainly object and embed. No more need to deliver audio with a third-party plug-in and, as such, no more design headaches with dynamic layouts or drop-down menus.

With audio in our arsenal, not only can we deliver audio files directly through the browser, but we can style and manipulate the element and its attributes via CSS and JavaScript.

4.1. Adding HTML5 Audio

Problem

You want to play native audio on your web page.

Solution

Add the audio element, with the src attribute referencing the location of your audio file and fallback content for older browsers:

<audio src="audio.ogg" controls>
    Download <a href="audio.ogg">episode 42 of Learning to Love HTML5</a>
</audio>

Also be sure to include the controls attribute if you want browsers to display a default control interface for your audio (see Figure 4-1):

<audio src="audio.ogg" controls>

Figure 4-1. Default audio controls in Chrome ...