Playing audio file returns “Uncaught (in promise)” but works in console

Question

I'm trying to play audio files (I've tried many). All of them are mp3s. I've tested the following on both MAMP localhost and also by just running it in the browser.

I use the following javascript:

var testSound = new Audio();
testSound.src = "a.mp3"
setTimeout(testSound.play.bind(testSound),100)

This returns the error:

Uncaught (in promise)

Trying to catch it:

var testSound = new Audio();
testSound.src = "a.mp3"
setTimeout(playSound,100)
function playSound () {
    testSound.play().then(response => {

    }).catch(e => {
        console.log(e);
    })
}

returns nothing ("")

But if I now turn to the console and simply type:

testSound.play()

The sound plays as it's supposed to.

Even if I comment the third line of the first code snippet like:

//setTimeout(testSound.play.bind(testSound),100)

Edit:

Even if people don't know what the solution is I'd still be interested to know if they can reproduce the error.

Edit 2:

By the way, the problem doesn't persist in Firefox or Safari.

Answer 1

If you read the full error message associated with the exception, you'll get a better explanation:

❌ Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

Google's article "Autoplay Policy Changes" (linked in the message above) explains the situation in detail.

The short version is: if you want to play audio or video, you need to wait to do it until the user has clicked something on the page.