In this article we will explore audio tag of HTML5.

One needs to have browser which supports HTML5 like IE9.

The basic audio tag is

<audio src="xyz.mp3" controls></audio>

Let's look into more details on the attributes supported by audio tag.

controls: Control attribute lets end user control volume and play

autoplay: Autoplay attribute plays the audio as soon as the page loads.

<audio src="xyz.mp3" controls autoplay></audio>

preload: Preload attribute loads the audio before it's played, even if autoplay is not specified.

<audio src="xyz.mp3" controls preload></audio>

loop: Loop attribute restarts the playback after it completes.

<audio src="xyz.mp3" controls loop></audio>

type: Type attribute tells the browser to attempt to load the file or not. If the browser finds that it can't play the format, it doesn't try to play it.

source: source attribute is very useful when different browser supports different format. source tag needs to be placed with <audio> container.

<audio controls>
      <source src="xyz.mp3" /> 
     <source src="xyz.ogg" />
     <source src="xyz.wav" />
</audio>

Browser will play the file first compatible file. E.g. If browser supports only .ogg, it will play xyz.ogg. If browser supports .mp3 and .ogg both, it will play .mp3 version

Live Demo

This ends the article of audio tag in HTML5.