移动端H5音频自动播放的解决方案.md

N年以前，移动端系统的浏览器，出于省电，省流量，防止扰民或者其他未知的原因，禁止了音频标签的自动播放效果。

也就是说加了autoplay的audio标签，不能自行自动播放（PC端没这个问题）。

不能自动播放确实挺烦的，大部分的场景和需求都需要自动播放，尤其是音乐类的H5，所以还是得找各种hack的方式，让自动播放能够重新生效。

目前来说，有种简单比较好的方式：

页面加载完成后，监听用户用户的点击事件，让audio标签自动执行play函数一次，之后就能让autoplay的audio标签自动播放音源（音乐类H5：因为一般场景都是用户点击某首歌曲，执行播放，点击事件必然存在）

// 严谨的话可以判断下是否支持自动播放再执行监听，不校验也没什么问题
function autoPlay() {
    audioEle.play();
    // 执行之后清除事件
    document.removeEventListener('touchend', autoPlay);
}
document.addEventListener('touchend', autoPlay);

其他的方案：

• 设置muted，提示用户打开声音
• 利用AudioContext api
• 等等