HTML and CSS Reference
In-Depth Information
13.
once the page has loaded, your audio clip should start playing. The page, however,
will be blank.
14.
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
also start, pause, and stop the audio clip using JavaScript.
•
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
audio
element through JavaScript.
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
