HTML <audio> class Attribute

HTML <aside>

HTML <b>

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

Classnames are defined in a stylesheet or in a local <style> element.

Classes, i.e. classnames, are used to style the audio element.

Example

#

A class attribute styling an <audio> element.
This class creates the rounded 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

#

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

Multiple classnames are separated by a space.

JavaScript uses classes to access 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 which 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: