HTML and CSS Reference
once the page has loaded, your audio clip should start playing. The page, however,
will be blank.
Press F12 to open the developer tools pane, if not already opened. Change the
browser mode to IE8. The music will stop and you'll see the “HTML5 audio is not
supported on your browser” text displayed.
This first exercise demonstrated the basic use of the audio element. You simply enter the src attribute,
which specifies the URL of the audio file. The content inside the audio element is used when the browser does
not support the audio element. Since IE8 does not support the audio element, the text included in the p tag is
displayed instead. You can take advantage of this to simply display a message as you did here. However, you
could use this to provide a link to download the file or use a plugin to implement a fallback solution.
Using the Native Controls
In terms of the UI, there are basically three options:
No controls - the audio plays but there are no controls available to the user. The clip can
be started automatically when the page is loaded using the autoplay attribute. You can
Native controls - the browser provides controls for the user to play, pause, and stop the
audio clip and control the volume.
Custom controls - The page provides custom controls that interact with the
To enable the native control simply add the controls attribute like this:
<audio src="~/Media/Linus and Lucy.mp3" autoplay controls >
Press F5 to debug the application and the native controls should appear similar to Figure 8-5 .
Figure 8-5. Displaying the native audio controls in Internet Explorer
In Opera, the controls look like Figure 8-6 .
Figure 8-6. The audio controls in Opera
In Chrome the controls look like Figure 8-7 .
Figure 8-7. The audio controls in Chrome