How to play a sound with JavaScript
Today, we’re going to look at how to use vanilla JS to play a sound in the browser. Let’s dig in!
Quick aside: autoplaying unwanted background sounds on a webpage can very intrusive and create a terrible user experience. Use this with care!
The new Audio() constructor
The new Audio() constructor lets you create a new HTMLAudioElement. Pass in the URL of the audio file as an argument.
let beat = new Audio('/path/to/my/beat.mp3');
After you create it, you can use all of the same methods available on an <audio> element: HTMLAudioElement.play(), HTMLAudioElement.pause(), and HTMLAudioElement.load() most notably.
// Play the beat
beat.play();
// Pause/stop the beat
beat.pause();
// Reload the beat (back to the start)
beat.load();
Example: a timer app
Let’s say we have a simple timer app that counts down to 0.
It has a count variable that starts at 5. We use the setInterval() method to run a callback function every 1000 milliseconds (or every one second).
Inside that callback, we decrease the count by 1 with the decrement operator (--). If the count is greater than 0, we show it. Otherwise, we use clearInterval() to stop the timer, and show an alarm clock emoji (⏰) instead.
<div id="app" aria-live="polite">5</div>// Get the #app element
let app = document.querySelector('#app');
// Track the count
let count = 5;
// Run a callback function once every second
let timer = setInterval(function () {
// Reduce count by 1
count--;
// Update the UI
if (count > 0) {
app.textContent = count;
} else {
app.textContent = '⏰';
clearInterval(timer);
}
}, 1000);
Now, what if you wanted to play a chime when the alarm ends?
Adding a chime to the alarm
For this project, I downloaded the “ding-dong sound effect” from Free Sounds Library, and saved it as ding.mp3 in my project directory.
Next, I added a playSound() function.
In it, I create a new Audio() object from the ding.mp3 file. Then, I use the ding.play() method to make it play.
/**
* Play the chime sound
*/
function playSound () {
let ding = new Audio('ding.mp3');
ding.play();
}
Back in the callback function for my setInterval() method, I run the playSound() method when the timer reaches 0.
// Run a callback function once every second
let timer = setInterval(function () {
// Reduce count by 1
count--;
// Update the UI
if (count > 0) {
app.textContent = count;
} else {
app.textContent = '⏰';
clearInterval(timer);
playSound();
}
}, 1000);
Now, whenever the timer ends, a gentle “ding dong” sound is played.