HTML5 Audio with controls

Inspect the audio elements below to see how their controls are being generated. It's surprisingly simple!

Head to the next section to see the code.

For the Wilhelm Scream sound below, we are generating the controls by specifying just one attribute.

<audio
  src="./sounds/wilhelm-scream.ogg"
  controls
></audio>

The controls attribute is part of the specification for the HTML5 audio element, and it tells browsers to generate user controls to play, pause, skip to a certain point in the audio, and change the volume.

As well as these default controls, we can also create custom controls.

In the following audio element, we've added some custom controls. Below the normal controls, we've added some buttons which advance the user to predetermined points in the audio. For a long podcast, for instance, this can be useful to allow the user to skip to highlights or to certain sections of the recording.

English wikipedia stats Signing off

We've achieved this in JavaScript by using the currentTime property of the <audio> element to set the time. Just in case the audio wasn't playing, we call .play() too.

<audio
  class="full-width"
  id="podcast"
  src="https://upload.wikimedia.org/wikipedia/commons/8/80/Radio_Wikipedia_Issue_2.ogg"
  controls
></audio>
<button data-time="102">English wikipedia stats</button>
<button data-time="210">Signing off</button>

Notice how the HTML is responsible for the exact behaviour of the button, identifying the number of seconds to which we want to jump. The only task left for the JavaScript to do is the necessary wiring — linking the button to the podcast, and taking that timestamp.

The timestamp (102 seconds) is part of the content of the page. Specifically, it relates the podcast and the text given: it is defining part of the relationship between the text and the audio.

Our JavaScript would work just as well with another podcast on another page, as long as we have an audio with id="podcast" and a data-time attribute on each of the buttons.

We can even add audio to our pages without using the <audio> tag. In JavaScript, we have the option to use new Audio() to create an audio element, which we can play "behind the scenes" without adding it to the DOM.

The only problem is that we still need some kind of a trigger! In this case, we've linked the sound to play when we click the button below.

Listen to this!

const raptor = new Audio('../raptors/raptor-call.wav')
const listenButton = document.querySelector('button#js-only-button')
listenButton.addEventListener('click', () => {
  raptor.play()
})

Here, we've linked the sound to a click of a button, but with your JavaScript skills, you could make a sound play in reaction to any event.

An important thing to note is that when we call the constructor to create an audio object, we pass the relative path (or it could be a full URL) of a sound file (.wav, .mp3, .ogg, .m4a, etc). Another way to create an audio object is to give it no URL in the constructor but to specify its src attribute later.

const raptor = new Audio()
raptor.src = '../raptors/raptor-call.wav'

const listenButton = document.querySelector('button#js-only-button')
listenButton.addEventListener('click', () => {
  raptor.play()
})

This code would have the same effect as the previous code. In this case, it is simpler to specify the path of the audio file in the constructor.

In more complex examples, we may not know the path of the audio file when constructing the audio object and we might want to change that file later. For instance, we could load a low fidelity version before loading one with a higher bitrate.

As is often the case, Mozilla Developer Network has in-depth explanations for how audio works for the web, including all of the available methods and all of the attributes for <audio> elements.

There is separate documentation for the the HTML audio element, for the Javascript Audio() constructor, and for the more powerful tools in the Web Audio API.