Working with Audio

Must Read

Nikon D7000, Reducing Red-Eye

We’ve all seen the result of using on-camera flashes when shooting people: the dreaded red-eye! This demonic effect is...

Consideration of Choosing a Digital Camera

Price Usually, the price differently depends upon the quality of machine and the retailer. The machine which contains higher functions...

Tools to Identify Your Competitors’ Links

The following tools can be used to obtain a list of locations on the Internet that are linked to...

2010 Walmart Cyber Monday TV Sales Ad Released in Early November – Vizio, Samsung and Philips HDTVs

Over the last several years it has been the case that more and more Americas are looking to take...

Debt Consolidation Loans For Bad Credit

Many people are in debt, some to a degree that they can no longer manage their bills. Their financial...

Student Loan Consolidation – Help For Students in Crisis

Are you a student or recent graduate from college that is bogged down by a huge student loan debt?...

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

Digital Marketing for Beginners

Digital marketing for starter, Let to basic learning about connecting with your audience in the right place...

What are 7 things poor people do that the rich don’t?

1. poor people watch TV in which people read books how many hours you spend in front of the TV and when...

Top 18 best small business ideas for beginners starting

A small business can be frightening and requires plenty of careful planning there are many small business ideas which can be beneficial...

Summer that makes you happy

We saw were already here I've been thinking about some of the things. I used to do with my husband even though...

4 Point to helpful tips specifically for caregivers

What you need to take a vacation. I know it sounds impossible creative and try to make it work for you almost...

More Articles Like This