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.
You may also like
- JavaScript Fetch API to make HTTP requests
- The Vibration API in JavaScript
- The URLSearchParams API in JavaScript
Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next | Angular | Vue | HTML | CSS