How to Play an MP3 in the Background Automatically [Solved]
If you’re building a web page and have ever wondered how to automatically play music, this article is for you.
However, while there are a few legitimate reasons to auto-play audio when someone visits a page, at the time of writing, it’s widely considered a bad UX (user experience) practice. Doubly so if there isn’t any sort of user interaction like a click or button press first, or you purposefully hide the player controls.
But maybe you’re building a game and want audio to play automatically when the page loads. Whatever the reason, read on to see some possible solutions.
Simple implementation
First, add an audio element to the page and load the audio’s source with the src attribute:
<audio src="https://www.bensound.com/bensound-music/bensound-moose.mp3"></audio>
Next, use JavaScript to listen to the DOMContentLoaded event, select the audio event and call audio.play():
window.addEventListener("DOMContentLoaded", event => {
const audio = document.querySelector("audio");
audio.volume = 0.2;
audio.play();
});
Again, this is widely considered a bad UX experience, and was blocked in Chrome until recent updates. Because this method takes control out of your users’ hands, it may still be blocked in Firefox.
Also, while there is an autoplay attribute for the audio element, it’s not recommended, and might be blocked in all major browsers depending on how it’s used.
A better implementation
The easiest way to improve UX and reduce the chances of annoying visitors to your site is to only play audio after the user interacts with the page.
For example, you could add a simple mute/unmute that starts in the muted state, and only plays music when it’s clicked:
Here’s what the code might look like for that:
const button = document.querySelector("#button");
const icon = document.querySelector("#button > i");
const audio = document.querySelector("audio");
button.addEventListener("click", () => {
if (audio.paused) {
audio.volume = 0.2;
audio.play();
icon.classList.remove('fa-volume-up');
icon.classList.add('fa-volume-mute');
} else {
audio.pause();
icon.classList.remove('fa-volume-mute');
icon.classList.add('fa-volume-up');
}
button.classList.add("fade");
});
The most important parts are the audio.play() and audio.pause() methods. Initially the music is paused or muted, which is the default behavior for the audio element. Then as soon as it’s clicked, the audio starts playing.
Check out this live example of a page with the mute/unmute button.
In summary
There are a few good reasons to create a page that auto-plays music when it loads, but it’s still widely considered bad practice. If you need to play audio, it’s recommended that you have controls, even if it’s just a simple mute/unmute button.
Or you could get creative – if you’re building a game, how about adding a start screen when users have to click a button to start playing? Then it’s clear that your page might have some sort of audio, whether it’s music or sound effects.
Whatever route you choose, remember to keep user experience in mind as you go. Stay safe and happy coding.
Note: Big thanks to lasjorg for sharing the code and creating the example page used in this article. You can find the original in the comments below.