浏览器audio标签不能自动播放解决方案

1,055 阅读1分钟

chrome、safari、firefox都在某些版本后限制了audio自动播放(chrome是66+),必须要用户与文档产生交互,否则会报错:
play() failed because the user didn't interact with the document first

解决方案

<audio id="audio" src="" autoplay></audio>

关键在于js部分,定义一个属性,当属性为true时,执行播放操作

const isAutoPlay = true
isAutoPlay && document.getElementById('audio').play()

如果是微信浏览器,则可以这样:

isAutoPlay && document.addEventListener('WeixinJSBridgeReady', function () {
    document.getElementById('audio').play()
});