HTML <audio> class Attribute

The class attribute on an <audio> tag assigns one or more classnames to the audio player. Classes are used to style elements. Classnames are defined in a stylesheet or in a local <style> element.

Example

#

A class attribute styling an <audio> element.
This class creates the border.

<style>
  .audio-border {border:10px solid lightblue; border-radius:50px;}
</style>

<section>
  <audio class="audio-border" controls>
    <source src="/media/epic.mp3" type="audio/mpeg">
    <source src="/media/epic.wav" type="audio/wav">
  </audio>
</section>

Using class

The class attribute assigns one or more classnames to the <audio> tag.

Multiple classnames are separated by a space.

Classes (i.e. classnames) are used for styling the audio element.

JavaScript uses classes to access one or more elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<audio class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling an <audio> control.
Clicking the button toggles a classname that changes the border color.


<style>
  .audio-border {
    border: 10px solid lightblue;
    border-radius: 50px;
  }

  .border-orange {
    border-color: orangered;
  }
</style>


<audio id="myaudio" class="audio-border" controls>
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
</audio>


<br />
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
    let element = document.getElementById("myaudio");
    element.classList.toggle("border-orange");
  }
</script>

Code explanation

Two CSS classes are defined in the <style> section.

The class attribute in <audio> assigns one classname.

Repeatedly clicking the button toggles another class, changing the border color.


Browser support

Here is when class 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>
Guides