Play audio with HTMLAudioElement API in JavaScript

The HTMLAudioElement API has access to all the properties and methods of the HTML <audio> element. This API allows us to play audio without even creating the <audio> elements. The Audio() constructor creates and returns a new HTMLAudioElement object.

const audio = new Audio('nature.wav');

This API inherits properties and methods from the HTMLMediaElement API that are needed to use the media capabilities like play, pause, mute, etc. Let’s discuss some of them.

Methods

The play() method

This method is used to play the audio. It returns a Promise which resolves when the audio successfully starts and rejects if any error occurs in starting the audio.

const audio = new Audio('nature.wav');
audio.play();

The pause() method

This method pauses the audio.

audio.pause();

The load() method

This method loads or resets the audio. If we call this method, the audio will start from the beginning when we play it next time.

audio.load();

Use case 1 – Load:

When we create a new HTMLAudioElement object and call the play() method for the first time, it takes some time to load and play the audio. So, for a scenario where we instantly want to play the audio on a button click or something, we see a delay.

To fix this delay, we can use the load() method to load the audio beforehand and keep it ready, so the next time we call play(), it will start playing without any delay.

const audio = new Audio('nature.wav');
audio.load();

// now play the audio whenever you want
audio.play();

Use case 2 – Reset:

If we want to stop the ongoing audio, and we want it to play from the beginning the next time we play it, then we can use the load() method to reset the audio after we pause it.

audio.pause();
audio.load();

Properties

duration

It returns the total duration of the audio in seconds.

console.log(audio.duration);

currentTime

It is used to set or get the current playback time in seconds. If we change its value, it seeks the audio to the new provided time. If we set a time higher than the audio duration, it gets set to the audio duration.

console.log(audio.currentTime);
audio.currentTime = 30;

loop

It is used to set or get the loop value that indicates whether the audio should play repeatedly.

const audio = new Audio('nature.wav');
console.log(audio.loop); // false
audio.loop = true;
console.log(audio.loop); // true

muted

It is used to set or get the mute value of the audio.

const audio = new Audio('nature.wav');
console.log(audio.muted); // false
audio.muted = true;
console.log(audio.muted); // true

volume

It is used to set or get the volume of the audio. Its value ranges from 0.0 to 1.0. If we set any value higher than 1, it throws an error.

const audio = new Audio('nature.wav');
console.log(audio.volume); // 1
audio.volume = 0.1;

Let’s see one demo using all discussed methods and properties.

Demo

Loop: Mute: Volume:

JS Curious