To know the events details of multimedia elements of HTML5, read this. In this post, we shall learn how to handle audio media in web page using HTML5.
To play audio in HTML5, we can use the
<audio> tag which is introduced in HTML5. At the time of writing this post, any one of .mp3, .wav or .ogg audio files are supported in all new browsers like Google Chrome, FireFox etc. Below are html5 audio player code.
<audio src="/DemoSupportingFiles/Multimedia/TechFundaAudio.mp3" controls> audio is not supported. </audio>
In the above code snippet the .mp3 auido file is placed in
<audio> tag that will be played.
Following are different attributes
autoplay– boolean - allows automatically play the audio when page loads
controls– display audiocontrols like play, pause, volume etc.
height– height of the audiodisplay area
loop– loop the playing of audiowhen it finished playing
muted- boolean - if true, the audio of the audiowill be muted
preload- can have following values
src- the url of the audioto play
width– width of the audioplay area
In case we want to display a feedback text on the page when audio is not supported, we can write the message in between
To ensure the audio is playing in all different browsers, we can specify multiple media source files using <source> tag. Below is the sample code snippet.
<audio controls autoplay>
<source src="/DemoSupportingFiles/Multimedia/TechFundaAudio.mp3" type="audio/mp3">
<source src="/DemoSupportingFiles/Multimedia/TechFundaAudio.ogg" type="audio/ogg">
<p>Audio is not supported.</p>
To know what different types of audio media are supported and what are different html5 audio events in HTML5 at the time of writing this post, click here.Views: 5010 | Post Order: 102