Working with Audio

15 Working with Audio

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:

Download html5_audio/audio.html

<article class="sample"> <header><h2> Drums </h2></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.

Download html5_audio/audio.html

<article class="sample"> <header><h2> Drums </h2></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>

W ORKING WITH A UDIO 134

<article class="sample"> <header><h2> Guitar </h2></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 class="sample"> <header><h2> Organ </h2></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 class="sample"> <header><h2> Bass </h2></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 pro- vided 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.

W ORKING WITH A UDIO 135

Figure 7.1: Our page in Safari

However, this might not be the best possible approach. You may en- counter 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:

Download html5_audio/advanced_audio.html

<article class="sample"> <header><h2> Drums </h2></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>

W ORKING WITH A UDIO 136

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 canPlayType() method, like this:

Download html5_audio/advanced_audio.html

var canPlayAudioFiles = !!(document.createElement( 'audio' ).canPlayType); We evaluate the response and then hide any anchors that are nested

within our sample sections.

Download html5_audio/advanced_audio.html

$( function (){ var canPlayAudioFiles = !!(document.createElement( 'audio' ).canPlayType);

if (canPlayAudioFiles){ $( ".sample a" ).hide(); }; });

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 .

E MBEDDING V IDEO 137