HTML audio Tag

Attributes

controls

This is a boolean attribute that specifies whether or not to display the audio controls (ie. start/pause button, scroll, volume).

<audio controls></audio>
<!-- OR -->
<audio controls="true"></audio>

Note: If it’s missing, the audio file will not be displayed. Typically, you should always include this. Unless you want to create your own control panel using JavaScript

play and pause

const audio = document.querySelector("audio");
const playAudio = audio.play();
const pauseAudio = audio.pause();

autoplay

This is a boolean attribute that plays the audio file automatically after the page loads.

<audio autoplay></audio>
<!-- OR -->
<audio autoplay="true"></audio>

Note: this feature might not work due to Chrome’s autoplay policy change

mute

This is a boolean attribute that specifies whether the audio will be initially silenced. The default is false or un-muted.

<audio muted></audio>
<!-- OR -->
<audio muted="true"></audio>

loop

This is a boolean attribute that specifies if the audio file will repeat continuously from the beginning after it’s done playing.

<audio loop></audio>
<!-- OR -->
<audio loop="true"></audio>

or

document.querySelector("audio").loop = true;

preload

This attribute is used to specify how the audio should be loaded when the page loads. It’s your way of communicating to the browser whether it should download and cache the audio file or not.

<audio preload="none"></audio>

The browser should not load the audio when the page loads. Helpful if you want to minimize unnecessary traffic and when the user is not expected to use the media resource right away.

<audio preload="metadata"></audio>

The browser should only load the metadata when the page loads. Again, this is used when the user doesn’t need the media resource right away. The metadata that you can fetch may include the audio length, track list, dimensions … etc.

<audio preload="auto"></audio>

The browser should load the entire audio when the page loads.

Note: sometimes this attribute may be ignored in certain instances (ie. when preload is present).

Single Audio Source

You can set the <audio> with a single source using the src attribute:

<audio controls src="sound.ogg">
   Your browser does not support the audio tag.
</audio>

You can also do it via the <source> tag:

<audio controls>
   <source src="sound.ogg" type="audio/ogg" />
   Your browser does not support the audio tag.
</audio>

Multiple Audio Sources

ogg audio files have a better sound quality and lower file size compared to mp3 files. Unfortunately, it's not supported by all browsers. Luckily we can pass multiple sources in the audio tag. Hence doing it like this:

<audio>
   <source src="sound.ogg" type="audio/ogg" />
   <source src="sound.mp3" type="audio/mpeg" />
   Your browser does not support the audio tag.
</audio>

It goes top down. That is why we listed ogg first and we add a default text if the browser doesn't support the audio tag.

You can view more audio support from w3schools

CSS Styling Audio Elements

You can’t style individual components of the audio player such as the button size or icons, or the font style. It will take on the default of the particular browser. But you can style the outer player unit.

audio {
   display: /*...*/;
   border: /*...*/;
   padding: /*...*/;
   margin: /*...*/;
}

JavaScript Audio Events

You can find the full event list on MDN

// 1. Select our audio tag
document.querySelector('audio')
  // 2. Attach our event listener
  .addEventListener('play', () => {
    // do something
  })

Alternately, you can also add the event using the event attributes like this:

<audio onplay="doSomething()"></audio>

function doSomething() {
  // do something
}

Essentially, the syntax for the event attributes is like this:

<element on[event name]="..."></element>

Browser Support

The support is excellent for all modern browsers, including Internet Explorer 9 and up 👍

MDN Browser compatibility

Resources

• <audio>: The Embed Audio element | MDN
• w3schools: HTML Audio
• HTML <audio> Tag - Samantha Ming

tags: HTML JavaScript