Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

444 CHAPTER 11 HTML5 supports multimedia


Much of the content in this lesson is similar to that of the <video> element; they both
inherit from the HTMLMediaElement. The most notable difference is that the <video>
element consumes more screen space to display video.

After this lesson, you will be able to:
■■Describe the common audio formats available on the Internet.
■■Implement the <audio> element.

Estimated lesson time: 20 minutes

Audio formats


The W3C does not specify which audio formats browsers should support, but the battle over
formats is not as competitive as for the video formats. The W3C is trying to decide on an
audio format that can be specified for all browsers to support as a minimum. There are many
audio formats, but the following are the most common.
■■Ogg/Vorbis (.oga, .ogg extention) This format appears to be royalty free without
patent issues. It’s supported by the Firefox, Chrome, and Opera browsers and has a
MIME type of audio/ogg and a codec of vorbis.
■■MP3 (.mp3 extension) This format is pervasive because it’s a common format for
much of the music media. It’s supported by the Safari, Chrome, and Internet Explorer
browsers and has a MIME type of audio/mpeg and a codec of .mp3.
■■MP4 (.mp4, .mp4a, .aac extension) This format is primarily used by Apple. In spite
of this format’s high quality AAC or AAC+ codec, the MP3 format is still more preva-
lent. This format is supported on the Internet Explorer and Safari browsers and has a
MIME type of audio/mp4; mp4a.40.5 is the codec value.
■■WAV (.wav extension) This format is also pervasive and is usually used for audio
fragments, or snippets, such as ring tones and sounds. It’s supported by the Firefox,
Chrome, and Opera browsers and has a MIME type of audio/wav and a codec of 1 (the
number one).

The


The <audio> element is used to play audio. The following is a sample implementation of the
<audio> element.
<audio controls="controls">
<source src="song.mp3" />
You need a browser that supports HTML5!
</audio>
Free download pdf