Declaring Your Media Element

For the very simplest example (the example file audio.html), let’s create a page that shows an audio player for a soothing, satisfying, and very public domain audio clip: Shontelle "Impossible":

<!DOCTYPE html>
<html>
<title>HTML5 Audio </title>
<audio controls src="Beyonce_Halo.ogg">
An audio clip from Beyonce.
</audio>

</html>


This clip assumes that the HTML document and the audio file—in this case, Shontelle_Impossible.ogg are served from the same directory. When the user clicks the play button, the audio track starts as expected.

Declaring Your Media Element in HTML 5

The controls attribute tells the browser to display common user controls for starting, stopping, and seeking in the media clip, as well as volume control. Leaving out the controls attribute hides them, and leaves the clip with no way for the user to start playing.

The content between the audio tags is text representation of what the browser will display if it does not support the media tag. This is what you and your users will see if they are running an older browser. It also gives the opportunity to include an alternate renderer for the media, such as a Flash player plugin or a direct link to the media file.

Media Types and Attribute Values

Media Types and Attribute Values in HTML 5

No comments:

Post a Comment