Transcript HTML 5 Tutorial

HTML 5 Tutorial
Chapter 4
Audio
Audio
• The HTML 5.0 specification allows us playing sound
using the <audio> element.
• The <audio> element can play sound files or an
audio stream.
• The HTML 5.0 specification aims at supporting the
following sounds formats: MP3, WAV and Ogg Vorbis.
Format
• Until now, there has never been a standard for playing audio on
a web page. Today, most audio are played through a plugin (like
flash). However, not all browsers have the same plugins.
• Currently, there are 3 supported audio formats for the audio
element:
Format
Firefox 3.5
Opera 10.5
Chrome 3.0
IE 9
Safari 3.0
Ogg Vorbis
Yes
Yes
Yes
No
No
MP3
No
No
Yes
Yes
Yes
Wav
Yes
Yes
No
No
Yes
Basic Syntax
Basic Syntax to Embed Video :
<audio src="music.ogg" controls="controls">
*Content we place in between the tags will be displayed when the
browser doesn't support playing audio
</audio>
• The control attribute is for adding the play, pause
and volume controls
Basic Syntax
• The audio element allows multiple source elements.
Source elements can link to different audio files.
• We can add the <source> child elements in between
the audio element tags. The browser will use the first
supported format.
<audio controls="controls">
<source src="mymusic.ogg" type="audio/ogg">
<source src="mymusic.mp3" type="audio/mpeg">
browser does not support html 5.0
</audio>
Attribute
• The HTML 5.0 supports the following attributes :
Attribute
Value
Description
autoplay
autoplay
Specifies that the audio will start playing as
soon as it is ready.
controls
controls
Specifies that controls will be displayed,
such as a play button.
loop
loop
Specifies that the audio will start playing
again (looping) when it reaches the end
preload
preload
Specifies that the audio will be loaded at
page load, and ready to run. Ignored if
autoplay is present.
src
url
Specifies the URL of the audio to play
Reference
1. Hickson, I. (Eds.). (2011). HTML Living Standar.
Retrieved from http://www.whatwg.org/specs/webapps/current-work/multipage/
2. World Wide Web Consortium. (n.d.). HTML 5
Tutorial. Retrieved from
http://www.w3schools.com/html5/default.asp