HTML Audio
The HTML <audio> element is used to play an audio file on a web page.
Currently there are three supported file format for HTML 5 audio tag:
- mp3
- wav
- ogg
HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar technologies are used to play the multimedia items.
The HTML <audio> Element
To play an audio file in HTML, use the <audio> element:
<audio controls>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
How It Works
The controls attribute adds audio controls, like play, pause, and volume.
The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.
The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.
Attributes of HTML Audio Tag
| Attribute | Description |
|---|---|
| controls | It defines the audio controls which is displayed with play/pause buttons. |
| autoplay | It specifies that the audio will start playing as soon as it is ready. |
| loop | It specifies that the audio file will start over again, every time when it is completed. |
| muted | It is used to mute the audio output. |
| preload | It specifies the author view to upload audio file when the page loads. |
| src | It specifies the source URL of the audio file. |
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
<audio controls autoplay muted>
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG.
The browser support for the different formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | ✔️ | ✔️ (from Edge 79) | ✔️ (from Edge 79) |
| Chrome | ✔️ | ✔️ | ✔️ |
| Firefox | ✔️ | ✔️ | ✔️ |
| Safari | ✔️ | ✔️ | ❌ |
| Opera | ✔️ | ✔️ | ✔️ |
MIME Types for HTML Audio format
The available MIME type HTML audio tag is given below.
| Audio Format | MIME Type |
|---|---|
| mp3 | audio/mpeg |
| ogg | audio/ogg |
| wav | audio/wav |