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

如果您阅读与异常相关的完整错误消息，则将得到更好的解释：

？未捕获（承诺）的DOMException：play（）失败，因为用户没有首先与文档进行交互。https://goo.gl/xX8pDD

Google的文章“ 自动播放政策更改 ”（在上面的消息中链接）详细说明了这种情况。

简短的版本是：如果要播放音频或视频，则需要等到用户单击页面上的某些内容后再进行操作。