关于微信H5页面开发中音乐不自动播放的解决方法

　　我想应该有很多人在做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐吧（客户需求），相信很多人一定碰过不能自动播放的时候，即使是相同的iPhone 5s也有不播放的时候，很蛋疼吧！？

之前我的解决方案：

<audio id="bgm" src="media/bgm.mp3" autoplay="autoplay" loop="" style="display: none; width: 0; height: 0;"></audio>

<script type="text/javascript">
//方法一
var firstTouch = true;
$("body").bind("touchstart",function(e) {
if ( firstTouch ) {
firstTouch = false;
document.getElementById('bgm').play();
}else{
return;
}
});
//方法二
$("body").one("touchstart",function() {
document.getElementById('bgm').play();
});
</script>

　　原理就是若遇到禁止自动播放的手机，用户第一次触摸屏幕的时候就执行播放事件，我试过很多什么window.onload = function(){}，预加载图片后回调执行播放事件，插件jquery.imgpreload.min.js 图片加载完毕回调都然并卵......没有办法的办法只能用上面方法。

我最近在瞎逛前端BLOG淘淘经验偶遇这个解决方案，至于哪个网站我忘记了，但是我做了摘录：

原理就是通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。

PS：

1. 音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放；
2. 音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。

转载于:https://www.cnblogs.com/viphchok/articles/5315031.html