The HTML5 <audio> tag

Before HTML5, the audio files could not be played on a web page without support of third party plug-ins like Adobe Flash Player, Apple QuickTime Player etc. But HTML5 defines a new element – <audio> which provides native audio playback support in the browser. The <audio> tag specifies a way to embed an audio file within a web page.

Web browser support:

HTML5 <audio> element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There is a HTML5 <audio> tag example given below:

<audio controls="controls" loop="loop" autoplay="autoplay" preload="none">
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    Your browser does not support the audio element.

The text written between <audio> and </audio> tags is displayed if the browser does not support <audio> element.

HTML5 Audio Tags:

<audio> It defines the sound content
<source> It defines the attributes of media resource

Supported Audio Formats with Mime Types:

Presently three audio file formats are supported by HTML5 <audio> element.

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Attributes of Audio Element with Functionality:

controls The control attribute adds an default audio control with options like play, stop, pause, volume
src The src attribute defines a valid source path of audio file
loop The loop attribute specifies whether the audio file should be repeatedly played
autoplay The autoplay attribute helps to start playing of an audio file automatically
preload The preload attribute specifies when the audio file gets preloaded. Possible values are – none / metadata / auto.

Supported Audio Formats with Mime Types:

Internet Explorer 9+ MP3
Firefox 3.6+ Wav, Ogg
Chrome 6+ MP3, Wav, Ogg
Safari 5+ MP3, Wav
Opera 10+ Wav, Ogg

Leave a Reply

Your email address will not be published. Required fields are marked *

7 × seven =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>