微信h5页面在苹果手机下无法播放语音的解决方案 h5页面自动播放语音兼容

主要是利用了微信的jssdk，否则一般的浏览器是无法播放的，因为这是苹果的策略，而微信只是通过自身app的特权突破了这个限制。

<audio id="bgmusic" style="display:none;" src="xxxxxxxx" autoplay preload controls></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
document.addEventListener("WeixinJSBridgeReady", function () {
	document.getElementById("bgmusic").play();
});
</script>

可以看出代码里监听了weixin的js库加载事件，加载完成了执行播放代码的。

不过这段代码像上面这样写的话在安卓微信端访问页面会听到两次声音，这是因为自身播放一次，微信sdk加载成功后又播放一次。而苹果由于自身播放的被系统屏蔽了，所以就只播放一次。期待的是在所有平台均一次播放，这样我们就需要做兼容。方法有两种：

方法1：判断当前是否是苹果手机的微信页面打开的。

方法2：判断当前是否已经播放。

这里我们提供下方法2的代码：

<audio id="bgmusic" style="display:none;" src="xxxxxxxx" autoplay preload controls></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
var audioStatus = "paused";
var audio = document.getElementById("bgmusic");
audio.addEventListener("playing", function(){
    audioStatus = "playing";
});

audio.addEventListener("pause", function(){
    audioStatus = "paused";
});

document.addEventListener("WeixinJSBridgeReady", function () {
	if(audioStatus=="paused"){//判断播放状态，如果未播放就执行播放
		document.getElementById("bgmusic").play();
	}
});
</script>