How to Play an MP3 in the Background Automatically [Solved]
If youre 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, its widely considered a bad UX [user experience] practice. Doubly so if there isnt any sort of user interaction like a click or button press first, or you purposefully hide the player controls.
But maybe youre 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 audios source with the src attribute:
Next, use JavaScript to listen to the DOMContentLoaded event, select the audio event and call 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, its not recommended, and might be blocked in all major browsers depending on how its 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 its clicked:
Heres 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 its 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 its still widely considered bad practice. If you need to play audio, its recommended that you have controls, even if its just a simple mute/unmute button.
Or you could get creative if youre building a game, how about adding a start screen when users have to click a button to start playing? Then its clear that your page might have some sort of audio, whether its 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.