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.
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.
|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