HTML 5 TutorialHTML 5 Tutorial

Chapter 4Chapter 4AudioAudio

AudioAudio• 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.

FormatFormat• 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 SyntaxBasic SyntaxBasic 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 SyntaxBasic 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>

AttributeAttribute• The HTML 5.0 supports the following attributes :

Attribute Value Description

autoplay autoplaySpecifies that the audio will start playing as soon as it is ready.

controls controlsSpecifies that controls will be displayed, such as a play button.

loop loopSpecifies that the audio will start playing again (looping) when it reaches the end

preload preloadSpecifies 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

ReferenceReference

1. Hickson, I. (Eds.). (2011). HTML Living Standar. Retrieved from http://www.whatwg.org/specs/web-apps/current-work/multipage/

2. World Wide Web Consortium. (n.d.). HTML 5 Tutorial. Retrieved from http://www.w3schools.com/html5/default.asp