HTML <audio> Tag

Super simple to add and play audio files on your site. No more fussing with embedding a Flash file or whatever the old way was 😂 Simplify and move forward with HTML5 <audio> tag, yay 🎉

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

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

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

muted

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>

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 controls>
  <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.

/* Example: */
audio {
  display: /*...*/,
  border: /*...*/,
  padding: /*...*/,
  margin: /*...*/,
}

JavaScript Audio Events

There are a lot of events you can listen to on the audio file. For example:

You can find the full event list on MDN

Basic Usage

You can add an event listener like this:

// 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

Community Input

@iamjaydeep1: What is autoplay and What were the problems with it? Browsers have historically been poor at helping the user manage sound. When users open a webpage and receive sound they did not expect or want, they have a poor user experience. This poor user experience is the problem we are trying to solve. Unwanted noise is the primary reason that users do not want their browser to autoplay content. To overcome the problems with autoplay chrome have did some policy change. follow the link for more details. What is solution? Simple audio won't play automatically. you must need user interaction to play audio like click on button to play or pause.

@MrBenJ5: I made a lib that lets you make audio visualizations from your audio tag. It's opensource too: check it out! audica.surge.sh

Resources

• MDN Web Docs: HTML audio
• w3schools: HTML audio
• w3docs: HTML audio
• TutorialRepublic: HTML audio
• FlaviocopesL HTML audio tag
• Audio - The preload attribute
• w3schools: HTML audio attribute
• HTML | audio preload Attribute
• Smashing Magazine: Preload: What Is It Good For?
• HTML standard
• w3schools: HTML Audio - Browser Support
• Originally published at www.samanthaming.com

Thanks for reading ❤
Say Hello! Instagram | Twitter | SamanthaMing.com