导航

让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://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>

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码