现在客户要求做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐，这样能够很好地烘托气氛还能使整个案例生动不少，然并卵，由于市场上的手机型号过于繁杂，对于H5 API的支持十分地不统一，还有H5运行平台的不一致：有的在微信壳下，有的在浏览器里，有的在自己的APP里，等等因素造成在H5开发的过程中一不小心就掉进坑里了，今天小五就来讲一讲很多人在H5开发中遇到的背景音不能自动播放的问题。
现在IOS系统升级以后，禁止了Audio的Autoplay属性，原因如下：
苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放，也就是说即使你在html文件里使用了preload和autoplay属性，在移动版 Safari 上，此属性会被忽视，并且不会加载视频流，甚至不会下载该视频流。除非用户物理点击一次屏幕，其实现在不能苹果手机，其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。
三、背景音不能自动播放的场景及解决办法
1、大部分IOS系统和少部分Android系统的微信壳下不支持自动播放
解决方案：监听WeixinJSBridgeReady事件、DOMContentLoaded事件
微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。
发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；
所以，为了保险起见，可以同时监听两个事件，以增强其适用性。
<div class="musicinfo" id="musicinfo">
<audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay" loop="loop">您的浏览器不支持 audio标签。</audio>
<img class="music on roate" src="musicon.png">
</div>
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio = document.getElementById(' musicid ');
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay();
});
(2) 可以增加透明层，点击到透明层，播放音乐，关闭透明层；
缺点：第一次点击按钮元素可能不响应，而且有时候用户不会在打开页面短时间内点击，造成用户体验上的伤害。
部分App不支持webview音乐自动播放
解决方案：1.壳浏览器支持；2.通过手势事件播放音乐
缺点：有些壳浏览器可能没有音频自动播放的接口，或者用户不进行手势操作。
完整代码
<!-- 音乐 start-->
<div class="musicinfo" id="musicinfo">
<audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay" loop="loop">您的浏览器不支持 audio标签。</audio>
<img class="music on roate" src="musicon.png">
</div>
<!-- 音乐 end-->
<script type="text/javascript">
// 音乐播放
function autoPlayMusic() {
// 自动播放音乐效果，解决浏览器或者APP自动播放问题
function musicInBrowserHandler() {
musicPlay(true);
document.body.removeEventListener('touchstart', musicInBrowserHandler);
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
// 自动播放音乐效果，解决微信自动播放问题
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var audio = document.getElementById('musicid');
if (isPlay && audio.paused) {
audio.play();
}
if (!isPlay && !audio.paused) {
audio.pause();
}
}
autoPlayMusic();
</script>
