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 &amp; Subdue: Courtship of the Black Sultan"/>
<div id="caption">
<div id="audio">
<source src="turnthepage.ogg">
<source src="turnthepage.mp3">
<p><input type=button onclick="playPause()" value=" " tabindex="0" />
&ldquo;Turn the Page&rdquo; / <em>Veil &amp; Subdue</em> / Paul
</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 . 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
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 .
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 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:
if ( {
function playPause() {
Search WWH ::

Custom Search