HTML and CSS Reference
In-Depth Information
var myAudio = document.getElementsByTagName('audio')[0];
This script adds functionality to the custom controls we added to the page. It will only
activate if the value is true (and thus won't waste browser resources
if the browser doesn't support the audio element).
Next, it would be nice if we could get rid of the customized controls altogether when
the browser doesn't support the audio element. This is easy to do with Modernizr, as
we can take advantage of the class it added to the HTML tag:
.no-audio #audio {
display: none;
.audio #audio input[type="button"] {
width: 45px;
height: 29px;
background: url(button.png);
border: 0px solid #000;
float: left;
margin-right: 10px;
When the audio element isn't supported, Modernizr adds a no-audio class to the
header element. So, we can select for this class in our CSS and set the display value to
none for any element we want to disappear. Here, it would be the div we labeled “audio,”
which encloses the controls.
When the audio element is supported, however, Modernizr adds the audio class to the
header element. To cover this case we can select for this class instead and style our
control button as we please.
The next step is to set up an error message for when the audio element isn't supported.
First, we need to add the HTML for this error box to our HTML and then place a notice
underneath the “audio” div :
<div id="error">
<p>&ldquo;Turn the Page&rdquo; / <em>Veil &amp; Subdue</em> / Paul Ramey</p>
<div id="error-box">
<p>Too bad! This browser does not support the audio features on this page.
Might I suggest installing the latest version of your browser?</p>
Using the same basic technique as above, we can hide this div when the audio element
is supported and style it appropriately when it is not supported:
Search WWH ::

Custom Search