Native Audio - HTML5 - page 95

CHAPTER 4
Native Audio
Emily Lewis
4.0 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: