让IOS浏览器支持音乐自动播放
IOS 浏览器自带的 safari 还是第三方浏览器 audio 标签 里面的 autoplay 无法生效,可以通过以下方法实现自动播放。当网页开始触摸即自动播放音乐。
测试:DEMO 演示
<div class="musicPlay">
<audio id="voice" src="http://isure.stream.qqmusic.qq.com/C100001PQAv32n8vQP.m4a?fromtag=32" autoplay="autoplay"></audio>
<p><img src="https://cdn.cdnjson.com/tvax4.sinaimg.cn/large/6f8a2832gy1fhh3uvn0awg201c01cmwx.gif"></p>
</div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var voice = document.getElementById('voice');
//调用 <audio> 元素提供的方法 play()
voice.play();
//判斷 WeixinJSBridge 是否存在
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
voice.play();
} else {
//監聽客户端抛出事件"WeixinJSBridgeReady"
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", function(){
voice.play();
}, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", function(){
voice.play();
});
document.attachEvent("onWeixinJSBridgeReady", function(){
voice.play();
});
}
}
//voiceStatu用來記録狀態,使 touchstart 事件只能觸發一次有效,避免與 click 事件衝突
var voiceStatu = true;
//监听 touchstart 事件进而调用 <audio> 元素提供的 play() 方法播放音频
document.addEventListener("touchstart",function(e){
if(voiceStatu){
voice.play();
voiceStatu = false;
}
}, false);
$('.musicPlay').click(function() {
// 依據 audio 的 paused 属性返回音频是否已暂停來判斷播放還是暫停音频。
if (voice.paused) {
voice.play();
$('.musicPlay>p>img').attr('src', 'https://cdn.cdnjson.com/tvax4.sinaimg.cn/large/6f8a2832gy1fhh3uvn0awg201c01cmwx.gif');
} else {
voice.pause();
$('.musicPlay>p>img').attr('src', 'https://cdn.cdnjson.com/tvax4.sinaimg.cn/large/6f8a2832gy1fhh3wlxh5mj201c01c0bl.jpg');
}
});
});
</script>