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);
