写了个自动播放bgm的网页，打算放着服务器上试试。最初的代码如下：
<audio id="audio" src="./loveyou.mp3" autoplay></audio>
<div class="music">
<button class="close">关</button>
</div>
const audio = document.getElementById('audio');
const close = document.querySelector('.close')
var count = 0;
close.addEventListener('click', () => {
count++;
if(count % 2 === 1){
audio.pause()
}else{
audio.play();
}
})
但却无法播放，期间报错信息如下：
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
The element has no supported sources.
火狐报错信息：AbortError: The fetching process for the media resource was aborted by the user agent at the user's request.
然后一顿查找和修改后，改成下面这样。
<audio id="audio" src="./loveyou.mp3" autoplay muted></audio>
<div class="music">
<button class="close">关</button>
</div>
const audio = document.getElementById('audio')
const close = document.querySelector('.close')
setTimeout(() => {
audio.currentTime = 72;
audio.load()
audio.play()
audio.muted = false
}, 10)
var count = 0
close.addEventListener('click', () => {
count++;
if(count % 2 === 1){
audio.pause()
}else{
audio.play();
}
})
上传到服务器后，谷歌和火狐都还是不行。但手机的浏览器和微信都能自动播放。
附上查找过程中遇到的不错的分析：
