html5的audio如何兼容各浏览器实现自动播放
1、布局DOM结构，准备好音频文件。当然html5的audio标签支持的音频格式是OGG，MP3, WAV，如果想各个浏览器兼容，需要将三种格式都转化一下。这里只做个演示，只转了MP3格式。
<div class="musicPlay">
<audio id="voice" autoplay="autoplay">
<source src=”http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3.ogg” />
<source src=”http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3.mp3″ />
<source src=”http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3.wav” />
</audio>
</div>
2、实现iphone手机在微信端的自动播放，需要初始化WeixinJSBridge这个对象，并调用其相关的API。
$(document).ready(function() {
var voice = document.getElementById('voice');
voice.play();
//判断 WeixinJSBridge 是否存在，加载WeixinJSBridge需要一定的时间
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//WeixinJSBridge还未加载完时，兼听客户端抛出事件"WeixinJSBridgeReady"，如果抛出WeixinJSBridgeReady，说明WeixinJSBridge加载完毕
if (document.addEventListener) {
//WeixinJSBridge加载完毕时进行播放
document.addEventListener("WeixinJSBridgeReady", function()
{
voice.play();
}, false);
// Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法时用document.attachEvent
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function() {
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function() {
voice.play();
});
}
}
});
3、让safari浏览器也能够实现自动播放时，需要兼听“touchstart”事件。还需要分配一个变量，记录状态。所以针对iphone的微信端之后，再添加如下代码：
var voiceStatus = true;
document.addEventListener("touchstart", function(e) {
if (voiceStatus) {
voice.play();
voiceStatus = false;
}
}, false);
