AwesomeCo is developing a site to showcase some royalty-free audio
loops for use in screencasts, and it would like to see a demo page
mocked up of a single loop collection. When we’re done, we’ll have a list
of the audio loops, and a visitor will be able to quickly audition each
one. We don’t have to worry about finding audio loops for this project,
because the client’s sound engineer has already provided us with the
samples we’ll need in both MP3 and OGG formats. You can find a small
bit of information on how to encode your own audio files in Appendix C,
on page 247.
Building the Basic List
The audio engineer has provided us with four samples: drums, organ,
bass, and guitar. We need to describe each one of these samples using
HTML markup. Here’s the markup for the drums loop:
<article>
<headerxh2>Drums</h2x/header>
<audio id=”drums” controls»
<source src=”sounds/ogg/drums.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/drums.mp3″ type=”audio/mpeg”>
<a href=”sounds/mp3/drums.mp3″>Download drums.mp3</a>
</audio>
</article>
We define the audio element first and tell it that we want to have some
controls displayed. Next, we define multiple sources for the file. We first
define the MP3 and OGG versions of the sample, and then we display a
link to allow the visitor to download the MP3 file directly if the browser
doesn’t support the audio element.
This very basic bit of code will work in Chrome, Safari, and Firefox. Let’s
put it inside an HTML5 template with the three other sound samples.
<article>
<headerxh2>Drums</h2x/header>
<audio id=”drums” controls»
<source src=”sounds/ogg/drums.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/drums.mp3″ type=”audio/mpeg”>
<a href=”sounds/mp3/drums.mp3″>Download drums.mp3</a>
</audio>
</article><article>
<headerxh2>Gui tar</h2x/header>
<audio id=”guitar” controls»
<source src=”sounds/ogg/guitar.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/guitar.mp3″ type=”audio/mpeg”>
<a href=”sounds/mp3/guitar.mp3″>Download guitar.mp3</a>
</audio>
</article>
<article>
<headerxh2>Organ</h2x/header>
<audio id=”organ” controls»
<source src=”sounds/ogg/organ.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/organ.mp3″ type=”audio/mpeg”>
<a href=”sounds/mp3/organ.mp3″>Download organ.mp3</a>
</audio>
</article>
<article>
<headerxh2>Bass</h2x/header>
<audio id=”bass” controls»
<source src=”sounds/ogg/bass.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/bass.mp3″ type=”audio/mpeg”>
<a href=”sounds/mp3/bass.mp3″>Download bass.mp3</a>
</audio>
</article>
</body>
</html>
When we open the page in an HTML5-compatible browser, each entry
in the list will have its own audio player, as you see in Figure 7.1, on
the following page. The browser itself handles the playback of the audio
when you press the Play button.
When we open the page in Internet Explorer, the download links show
since the browser doesn’t understand the audio element. This makes
for a decent fallback solution, but let’s see whether we can do better.
Falling Back
Audio fallback support is built into the element itself. We’ve defined
multiple sources for our audio using the source element and have provided
links to download the audio files. If the browser cannot render
the audio element, it will display the link we’ve placed inside the field.
We could even go a step further and use Flash as a fallback after we
define our sources.
However, this might not be the best possible approach. You may encounter
a browser that supports the audio element but doesn’t support
the formats you’ve supplied. For example, you may decide it’s not worth
your time to provide audio in multiple formats. Additionally, the HTML5
specification specifically mentions that the fallback support for audio is
not to be used to place content that would be read by screen readers.
The simplest solution is to move the download link outside the audio
element and use JavaScript to hide it, like this:
orticle>
<headerxh2>Drums</h2x/header>
<audio id=”drums” controls»
<source src=”sounds/ogg/drums.ogg” type=”audio/ogg”>
<source src=”sounds/mp3/drums.mp3″ type=”audio/mpeg”>
</audio>
<a href=”sounds/mp3/drums.mp3″>Download drums.mp3</a>
</article>
Then we just need to detect support for audio and hide the links. We do
that by creating a new audio element in JavaScript and checking to see
whether it responds to the canPlayTypeO method, like this:
var c a n P l a y A u d i o F i l e s = ! ! ( d o c u m e n t . c r e a t e E l e m e n t C ‘ a u d i o ‘ ) . c a n P l a y T y p e ) ;
We evaluate the response and then hide any anchors that are nested
within our sample sections.
Down! oad html5_audio/advanced_audio.html
$(function(){
var c a n P l a y A u d i o F i l e s = ! ! ( d o c u m e n t . c r e a t e E l e m e n t ( ‘ a u d i o ‘ ) . c a n P l a y T y p e ) ;
i f ( c a n P l a y A u d i o F i l e s ) {
$(“.sample a ” ) . h i d e ( );
};
Fallbacks with audio are relatively easy, and some of your users may
actually appreciate the ability to easily download the file.
Playing audio in the browser natively is just the beginning. Browsers
are just starting to support the HTML5 JavaScript APIs for audio and
video, which you can read about in the sidebar on page 141.