Dofactory.com
Dofactory.com

HTML <audio> id Attribute

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:

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

You may also like

 Back to <audio>

Author: Jack Poorte
Published: Jun 20 2021
Last Reviewed: Sep 30 2023


What's your favorite/least favorite part of Dofactory?


Guides