让IOS浏览器支持音乐自动播放 不死鸟 • July 12, 2017 • 每日必看 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://i2.wp.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://i2.wp.com/tvax4.sinaimg.cn/large/6f8a2832gy1fhh3uvn0awg201c01cmwx.gif'); } else { voice.pause(); $('.musicPlay>p>img').attr('src', 'https://i2.wp.com/tvax4.sinaimg.cn/large/6f8a2832gy1fhh3wlxh5mj201c01c0bl.jpg'); } }); }); </script> Archives QR Code Tip