HTML <audio> id Attribute

HTML <aside>

HTML <b>

An id on an <audio> tag assigns an identifier to the audio player.

The identifier must be unique across the page.

Example

#

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>

Using id

#

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.

Syntax

#

<audio id="identifier" >

Values

#

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 (.).

More Examples

#

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>

Code explanation

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.

Browser support

#

Here is when id support started for each browser: