HTML5 Audio



Audio Player In HTML5

In recent years the popularity of multimedia sharing sites has increased rapidly.The web was not built with such content in mind.The use of adobe platforms was required for showing multimedia content on web.HTML5 includes the support of audio on web.

Advantage Of HTML5 Over HTML4.01

HTML5 includes an audio tag.

HTML5 Audio Formats Supported

Several browsers have started supporting the audio element of HTML5.But right now only 3 audio formats are supported by the major browsers.

Browser Ogg Vorbis WAV MP3
Chrome10.0 yes yes yes
Firefox4.0 yes yes no
IE9 no no yes
Safari3.0 no yes yes
Opera10.5 yes yes no

Working Of Audio Tag

Here is the code to play an audio file.

<html>
<audio controls="controls" 
       src="/music.wav" />
 
If you are reading this, it is because your browser does not 
support the HTML5 audio tag. 
</audio>
</html>

The above will work only in chrome,firefox 4.0+,opera 10.0+.But will not work in Internet Explorer because it does not support Wav format.
IE only supports Mp3.So we change the code to make it work in all browsers.The modified code is:
<html>
<audio  controls="controls">
<source src="/music.mp3" type="audio/mpeg" />
<source src="/music.ogg" type="audio/ogg" />
<source src="/music.wav" type="audio/wav" />
 
If you are reading this, it is because your browser does not 
support the HTML5 audio tag. 
</audio>
</html>

The browser picks one of the three formats available and plays the audio file.Click on the play button and listen to the song.


HTML5 Audio:The Control Attribute

The control attribute of HTML5 specifies the browser to display the standard playback controls.There are various attributes in HTML5.

Attribute Detail
controls Specifies the controls such as volume
autoplay Plays the audio automatically
loop Audio is loaded at the time of page load and run when ready
src Specifies the url of the audio

Related HTML5 topics:

  • HTML5 Web Storage

  • HTML5 Introduction