Working with Audio

Must Read

Student Loans – How Interest Rates Are Set on Federal Loans

You've got to take on student loan debt these days if you want to go to college unless you...

Canon 7D Set Your Autofocus

Autofocus (AF) on the Canon 7D is extremely sophisticated and very easy to work with. It’s important to understand...

How a Home Equity Loan Refinance Can Save You Money – Should You Refinance Your Texas Home Loan?

In Texas you can refinance your home as well as your investment property. And with today's low mortgage rates,...

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:

<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>

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.

<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>

<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 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 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>

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:

<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>

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
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.


Previous articleEmbedding Audio and Video
Next articleEmbedding Video

Latest News

Top 10 Provinces of Thailand Not to be missed for Travel

10 SuratthaniThe source of the proverbial Chaiya salted egg. Surat Thani is a province with many attractions,...

Underlight As Accent, For Power and The Main Light for Photography

Underlighting, in which fill or accent light comes from under the topic, is not widely used technique in the traditional Portraits, even though it will have...

How To Fix Overexposure As A Creative Tool, The Complete Guide

As an creative tool, overexposure is sort of underrated. What I’m close to propose could be a deliberate and well thought out technique for...

7D Mark II is Canon’s best DSLR cameras without full-frame sensor.

The expected long-awaited Canon EOS 7D Mark II are shipping in November for $ 1,799 without a lens. With a higher price tag, you...

Low key photography and How to isolate your subject.

Low key photography doesn’t depend on underexposure to make its point; the key to low key is that the majority of tones, even correctly...

More Articles Like This