HTML and CSS Reference
In-Depth Information
var myAudio = document.getElementsByTagName('audio')[0];
if(myAudio.paused)
myAudio.play();
else
myAudio.pause();
}
}
</script>
This script adds functionality to the custom controls we added to the page. It will only
activate if the
Modernizr.audio
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>“Turn the Page” / <em>Veil & 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>
</div>
</div>
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: