JS Auto play background audio after window reload

Question

I've tried auto play the audio as background music. When I open page, it's ok. But when I reload page, It cannot play. Console log error:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

My code:

$(window).on('load', function() {
    var soundSpin = new Audio('../images/gift/spin.mp3');
    soundSpin.muted = false;
    soundSpin.play();
    soundSpin.addEventListener('ended', function() {
        soundSpin.currentTime = 0;
        soundSpin.play();
    }, false);
});

How can I fix it? Thank you so much.

Does this answer your question? [How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66?](https://stackoverflow.com/questions/49930680/how-to-handle-uncaught-in-promise-domexception-play-failed-because-the-use) — user3486184, Jan 15 '21 at 19:26

score 1 · Accepted Answer · answered Jan 15 '21 at 17:16

There's nothing wrong with your code. Modern browsers disable autoplay by default unless certain criteria are met. In general, one of the following will allow autoplay:

The user clicks on the page*
The media does not have audio or the audio is muted by default
The user has explicitly whitelisted the page to autoplay media with audio
The browser enables autoplay after detecting the user interacts with the page frequently

*Generally only one action is allowed per click. Actions include opening a new window, navigating, autoplaying media, etc...

JS Auto play background audio after window reload

1 Answers1