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.

Important point need to be remembered:

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

There is a HTML5 audio element 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 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
S Ghosh

Leave a Reply

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