HTML5 audio Tag: basic usage


With <audio> tag, you can play music or other audio streams. There are 3 supported file types: mp3, wav and ogg.

Table 1: browser support file types (mp3, wav, ogg)

Browser MP3 WAV OGG

Table 2: version of browser support audio tag

Browser
Version support <audio> ≥4.0 ≥9.0 ≥3.5 ≥4.0 ≥10.5

Simple usage:

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

If you don’t use controls attribute, you can’t see anything like that.

We can use the <source> element instead for src attribute, and we can use many <source> elements for many file types:

<audio controls>
  <source src="file.ogg" type="audio/ogg">
  <source src="file.mp3" type="audio/mpeg">
  <source src="file.wav" type="audio/wav">
</audio>

Table 3: Some attributes of <audio> tag:

Attribute Value Description
autoplay autoplay Specifies that the audio will autoplay
controls controls Specifies that you can see the default audio player
loop loop Specifies that the audio will play some loops
muted muted Specifies that the audio should be muted
preload auto
metadata
none
Specifies what should be loaded when the page loads
src URL Specifies the URL of the audio file (locally or http/https link)

We can see the different when we use the preload attribute:

<audio src="http://demo.tutorialspots.com/html5/audio/T.I - Hello Acapella SAMPLE DIYACAPELLAS.mp3" preload="auto" controls></audio>
<audio src="http://demo.tutorialspots.com/html5/audio/T.I - Hello Acapella SAMPLE DIYACAPELLAS.mp3" preload="metadata" controls></audio>
<audio src="http://demo.tutorialspots.com/html5/audio/T.I - Hello Acapella SAMPLE DIYACAPELLAS.mp3" preload="none" controls></audio>



First case: the audio file should be loaded when the page loads.
Second case: we only see the duration and the volume but the audio file shouldn’t be loaded when the page loads.
Third case: we can’t know the duration and the volume. We can see them when click the play button.

Note: demo audio source: diyacapellas.com

Leave a Reply