The audio tag
The audio tag controls playback of an audio recording on an HTML page. When added to the page, a player appears with buttons "Back", "Forward", "Stop" and so on (their appearance and number depend on the browser). The path to the file is specified via the src attribute or the nested source tag.
The source tag is needed to specify paths to audio recording files in different formats (since browsers support different audio formats, for example mp3 or wav). If you have a recording in one of the formats, you need to convert it to others.
Inside the audio tag, you can write text that will be displayed in browsers that do not support audio in HTML (this is done to inform users about this).
If you want to see the player to control audio playback, you should add the controls attribute. Without it, you will not see anything - and there will be no sound either. To have sound without the player, add the autoplay attribute.
Attributes
| Attribute | Description |
|---|---|
src |
Specifies the path to the audio file. But it is better to use the tag source (in this case, you can specify audio in different formats).
|
preload |
Used to load an audio file simultaneously with loading a website page.
Accepted values: none (do not download the file, the default), metadata (download only service information: duration of the sound, etc.), auto (download the entire audio file when loading the HTML page).
|
autoplay |
The sound starts playing immediately after the page loads, and the presence of the preload attribute will be ignored.
Attribute without value. |
controls |
Adds a control panel to the audio file. The presence of the preload attribute will be ignored.
Attribute without value. |
loop |
Repeats the audio recording in a "loop": after finishing it will start playing again. The presence of the preload attribute will be ignored.
Attribute without value. By default (if there is no attribute) the recording will be played only 1 times.
|
muted |
Mutes the sound in the audio recording.
Attribute without value. By default (if there is no attribute) the recording has sound enabled. |
Example . Player on the website page
Let's add a player with an audio recording to the page. For those browsers that do not support the audio tag, a special note about this is left:
<audio src="track.mp3" controls>
Your browser does not support HTML5 audio.
</audio>
Example . Player on the site page with the source tag
Now let's replace the src attribute for the audio tag with the source tag:
<audio controls>
<source src="track.mp3">
Your browser does not support HTML5 audio.
</audio>
