Help
So, you've heard of the new audio element in HTML5 and would like to take advantage of it right away. This excerpt from Christopher Schmitt's CSS Cookbook, Third Edition will explain its use.
If you want to add audio to a web page with HTML5, use the audio element to specify an audio file,
as shown in Figure 1.7:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Cookbook</title> </head> <body> <h1>Audio Example</h1> <span class="strong"><strong><audio src="html5audio.ogg" autoplay controls></strong></span> <a href="html5test.ogg">Download audio</a> <span class="strong"><strong></audio></strong></span> </body> </html>
The audio element has five attributes
associated with it: src,
autobuffer, autoplay,
loop, and controls. If you don’t
have the controls attribute, the audio player disappears.
At the time of this writing, no one audio file type plays across all the browsers
that support the HTML5 audio element, as shown in
Table 1.1
Table 1.1. Audio file format support in HTML5
|
Firefox 3.5 |
Safari 4 |
Chrome 3 beta |
Opera 10 | |
|---|---|---|---|---|
|
Ogg Vorbis |
Y |
Y | ||
|
MP3 |
Y |
Y | ||
|
WAV |
Y |
Y |
Y |
To create a cross-browser solution, use the
audio element along with the
source element that cites both OGG and MP3 files.
Then include Flash Player embed and
object code afterward:
<audio controls autobuffer> <span class="strong"><strong><source src="html5audio.ogg" /></strong></span> <span class="strong"><strong><source src="html5audio.mp3" /></strong></span> <span class="strong"><strong><!-- include Adobe Flash player EMBED and OBJECT code here --></strong></span> </audio>
Note
If you do insert audio, setting the file to
autoplay is not recommended, as it interferes
with the experience for web surfers using screen readers.
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.
