The html5 tutorials

 
About HTML5
Home
Introduction to HTML5
Features of HTML5
Older versions Vs. HTML5
 
Tags  
source
article
aside
audio
canvas
command
datalist
details
embed
figcaption
figure
footer
header
hgroup
keygen
mark
meter
nav
output
progress
ruby
section
summary
time
video
wbr
 

The <audio> Tag

HTML5 solves the dependence on external third party plug ins where a user viewing a web page can directly listen to the sound file in the page as soon as the page loads.

The user may control the sound stream through the provided control provisions. Currently, three sound formats are playable on HTML 5. These are .Ogg, .MP3 and .WAV.

Currently Internet explorer 8 doesn't support playing sound files but other browsers like Firefox 3.5, Chrome 3.0 and Saafri 3.0 do. Please note that not all browsers support all the given three formats.

Below is the list of type of sound formats and the browsers supporting it:

Format of Audio IE 8 Safari 3.0 Firefox 3.5 Opera 10.5 Chrome 3.0
OGG VORBIS Not supported Not supported Supported Supported Supported
MP3 Not supported Supported Not supported Not supported Supported
WAV Not supported Supported Supported Supported Not supported

You can display an error message to the viewer using fallback content to display an error message if the viewer is using an incompatible or outdated browser that doesn't support audio playback.

Example code:

<html>
  <body>
    <audio src="newsong.ogg" controls="controls">
      <p>Your browser does not support the audio playback. Please upgrade to a modern browser.</p>
    </audio>
  </body>
</html>

Attributes of Audio tag

The audio element has the following attributes for either independent playback or possible playback control from the user:

Attribute Values Description of the attribute
src url Provides the url (path) of the audio file (could be a local machine, a remote server or any place on the net)
loop loop The audio starts playing from beginning after reaching the end again and again continuously
Preload




Auto

Metadata


none

The Preload attribute specifies that the audio file should be preloaded or not in the page. However the autoplay attribute overrides this attribute.

If it's auto, then the entire audio file is loaded as soon as the page starts loading.

If it's metadata then it means that the audio file itself would not be loaded but the data regarding the audio file would be sent like dimensions, first frame, track list, duration, etc.

If it's none then no audio file is loaded at the time of page loading.

autoplay autoplay The audio file would start playing automatically as soon it's ready without stopping.
controls controls The browser offers controls for the media to be controlled by the user like playback, volume, pause, etc.