HTML and CSS Reference
In-Depth Information
If we wanted to really make this page cross-browser compatible, we
would probably use a Flash audio player as a fallback. However, for the
purposes of this recipe, we want to keep this example fairly simple.
Here is our basic HTML code for our player:
<img src="vscover.jpg" alt="Veil & Subdue: Courtship of the Black Sultan"/>
<div id="caption">
<div id="audio">
<audio>
<source src="turnthepage.ogg">
<source src="turnthepage.mp3">
</audio>
<p><input type=button onclick="playPause()" value=" " tabindex="0" />
“Turn the Page” / <em>Veil & Subdue</em> / Paul
Ramey</p>
</div>
</div><!--end caption-->
We've included an image of the album cover art and our
audio
element, along with
customized controls.
First, download the Modernizr JavaScript library from
http://modernizr.com
. Include a
reference to this file within the
head
of your HTML document:
<script src="js/modernizr-1.6.min.js"></script>
This script must be included in the
head
of your document with a normal
script
tag; it cannot be loaded dynamically with script loader
techniques.
When this script runs, it detects whether or not the browser supports the
audio
element
and then does two things:
1. Assigns a value (true or false) to the JavaScript property
Modernizr.audio
.
2. Adds a class to the HTML tag. If the browser supports the
audio
element, it will
add a class called
audio
. If the browser doesn't support the
audio
element, it
will add a class called
no-audio
.
Now you can write a script specifying what to do if the
Modernizr.audio
property is
true or false and code your CSS, specifying styles for elements when the
audio
element
is supported and when it isn't.
So, let's write a small script (we can put this in the
head
of our document) that only
runs when the
audio
element is supported:
<script>
if (Modernizr.audio) {
function playPause() {
