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
