An id on an <audio> tag assigns an identifier to the audio player.
The identifier must be unique across the page.
An id attribute on an <audio> tag.
<audio id="epic-music" controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
The id attribute assigns an identifier to the <audio> element.
The identifier must be unique across the page.
The id allows JavaScript to quickly access the <audio> element.
Tip: id is a global attribute that can be applied to any HTML element.
<audio id="identifier" >
| Value | Description |
|---|---|
| identifier | A unique alphanumeric string. The id value must begin with a letter ([audio-Zaudio-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.). |
An <audio> with a unique id.
Click the Play button to play the audio file. The Pause button pauses the audio.
<audio id="myaudio">
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
Please upgrade your browser to play audio.
</audio>
<button onclick="play();">Play</button>
<button onclick="pause();">Pause</button>
<script>
let audio = document.getElementById("myaudio");
let play = () => audio.play();
let pause = () => audio.pause();
</script>
The id attribute assigns a unique identifier to the audio element.
The audio player is not visible because it does not have the controls attribute.
When opening the page, JavaScript locates the audio control using the id.
The Play and Pause buttons use the audio reference to play and pause the audio control.
Here is when id support started for each browser:
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
3.5 | Jun 2009 |
 IE/Edge
|
9.0 | Sep 2012 |
 Opera
|
10.0 | Aug 2009 |
 Safari
|
11.5 | Jun 2009 |
