HTML 5 Tutorial

1
HTML 5 Tutorial

• Chapter 4
• Audio

2
Audio

• The HTML 5.0 specification allows us playing
  sound using the ltaudiogt element.
• The ltaudiogt 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.

3
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
4
Basic Syntax

• Basic Syntax to Embed Video
• ltaudio src"music.ogg" controls"controls"gt
• Content we place in between the tags will be
  displayed when the browser doesn't support
  playing audiolt/audiogt
• The control attribute is for adding the play,
  pause and volume controls

5
Basic Syntax

• The audio element allows multiple source
  elements. Source elements can link to different
  audio files.
• We can add the ltsourcegt child elements in between
  the audio element tags. The browser will use the
  first supported format.
• ltaudio controls"controls"gt
• ltsource src"mymusic.ogg" type"audio/ogg"gt
• ltsource src"mymusic.mp3" type"audio/mpeg"gt
• browser does not support html 5.0
• lt/audiogt

6
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
7
Reference

• Hickson, I. (Eds.). (2011). HTML Living Standar.
  Retrieved from http//www.whatwg.org/specs/web-app
  s/current-work/multipage/
• World Wide Web Consortium. (n.d.). HTML 5
  Tutorial. Retrieved from http//www.w3schools.com/
  html5/default.asp