系统版本较新的移动端音频无法自动播放这个问题怎么解决？

[jmyz0455]

有个移动端页面需要加上不断重复的背景音乐，页面本身只是纯展示静态内容，自动播完后会弹出分享页。于是我在页面中写：

<audio src="music/song.mp3" autoplay="autoplay" loop="loop"></audio>

结果发现很大部分的手机无法自动播放，而电脑端全线正常。经过搜索发现在微信浏览器可以使用：

var el = document.getElementsByTagName("audio")[0],

mobileplay = function() {el.play()};

mobileplay();

document.addEventListener("WeixinJSBridgeReady", mobileplay);

然后微信浏览器就能正常地自动播放音乐，但是移动端的 Chrome 和 Safari 还是不行。在网上了解到不少人都是把 play() 绑定到 document.addEventListener("touchstart", function); 上，等用户触摸屏幕就会触发播放，问题是原本做好的静态内容里没有诱导用户触摸屏幕的地方，只是自动展示纯内容。于是想到主动触发 touchstart 事件：

document.addEventListener("touchstart", function () {

document.getElementsByTagName("audio")[0].play();

alert("play");

}, {useCapture: false, once: true, passive: true});

var event = document.createEvent('Events');

event.initEvent("touchstart", true, true);

document.dispatchEvent(event);

结果 alert 出来了，音乐还是没有，经大量测试发现 Android Chrome 56+ 和 iOS10+ 的 Safari 必然无法自动播放音乐，微信用了 WeixinJSBridgeReady 就可以了，大部分的国产安卓机也能正常表现 autoplay="autoplay" 属性。于是上面我触发 touchstart 事件的写法修改一下：

document.addEventListener("touchstart", function () {

document.getElementsByTagName("audio")[0].play();

});

其他不变，第一次还是没有音乐的，但是我只要真正触摸了屏幕一次，音乐就响了。关于让移动端的 Chrome 和 Safari 自动播放音频的方法找来找去还是没有结果，貌似移动端的浏览器都不想页面中有音频播放，文档规范都不建议，只能来请教各位有没有 hack 写法了，谢谢。

[MinonHeart]

流量要钱嘛，不能这么让你随便放

[jmyz0455]

@MinonHeart 道理我都懂，可是 PM 一定要我实现这个功能。