HTML Audio
HTML
In this tutorial we will learn about the audio tag to work with audio files in HTML.
What are audio tags in HTML?
The audio tag is a HTML5 element and it is used to embed audio in the web page.
Example
In the following example we are creating an audio element.
<audio controls="controls" preload="none" src="/audio/alien-noise-01.mp3">
Your browser does not support the HTML audio tag.
</audio>
Another way we can do this is by using the source tag and including multiple files.
<audio controls="controls" preload="none">
<source src="/audio/alien-noise-01.mp3" type="audio/mpeg">
<source src="/audio/alien-noise-01.wav" type="audio/wav">
<source src="/audio/alien-noise-01.ogg" type="audio/ogg">
Your browser does not support the HTML audio tag.
</audio>
Note! In the above example the text Your browser does not support the HTML audio tag. will be displayed if the browser does not supports audio tag.
Supported audio format
Following are the supported audio format.
| File | Extension | MIME Type |
|---|---|---|
| MP3 | .mp3 | audio/mpeg |
| OGG | .ogg | audio/ogg |
| WAV | .wav | audio/wav |
You can use the Find Fileinfo of this website to find the MIME type of the audio files.
Attributes for the audio tag
Following are the attributes that we can add to the audio tag.
| Attribute | Value | Description |
|---|---|---|
| controls | controls | If present will allow the user to control the audio playback by providing seek, volume and pause/resume controls. |
| preload | none auto metadata | This tells the browser about what the author thinks will provide a better user experience. It is an enumerated attribute and can take the following values.none - Indicating not to preload the audio.auto - Download the whole audio file even if the user is not going to use it.metadata - Fetch only the metadata of the audio like length. |
| autoplay | autoplay | If present will start playing the audio as soon as it can do so. |
| loop | loop | If present will start playing the audio all over again. |
| muted | muted | If specified will mute the audio. |
| src | url | This specifies the url of the audio file. |
The source tag
We can also use the source tag to include audio files.
For this we set the src attribute to the audio file URL and type attribute to the MIME type of the audio file.
In the following exmaple we are using 3 different file types.
<source src="/audio/soundeffect/alien-noise-01.mp3" type="audio/mpeg">
<source src="/audio/soundeffect/alien-noise-01.wav" type="audio/wav">
<source src="/audio/soundeffect/alien-noise-01.ogg" type="audio/ogg">
If we are using the source element then we can skip the src attribute in the opening audio tag.
ADVERTISEMENT