欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

＜audio＞在 iOS 微信端不能自动播放

程序员文章站 2022-06-16 10:31:51
...

在 iOS 微信端不能自动播放

一般来说我们要利用 实现音频自动播放只需要在 标签上加上 autoplay 属性.实现简单的 音频自动播放,代码如下:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
    body {
        margin: 0;
    }
    
    .musicPlay {
        position: fixed;
        width: 100vw;
        top: 20vh;
    }
    
    .musicPlay>p {
        width: 64vw;
        margin-left: 18vw;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 12px 0 #aaa;
        height: 7vh;
        line-height: 7vh;
    }
    
    .musicPlay>p>img {
        float: left;
        margin-left: 1vw;
        height: 5vh;
        margin-top: 1vh;
    }
    
    .musicPlay>p>span {
        float: left;
    }
    </style>
</head>

<body>
    <div class="musicPlay">
        <audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
        <p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></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');
        $('.musicPlay').click(function() {
            // 依據 audio 的 paused 属性返回音频是否已暂停來判斷播放還是暫停音频。
            if (voice.paused) {
                voice.play();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
            } else {
                voice.pause();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
            }
        });
    });
    </script>
</body>

</html>
  1. 在 PC 端的 Chrome 浏览器,Edge 浏览器*问,能够自动播放音频.
  2. 在 Android 手机上使用微信和 Android 自带浏览器访问,能够自动播放音频.
  3. 在 iPhone iOS10 系统 手机上使用微信和 Safari 浏览器访问,无法自动播放音频.

看来在 标签加上 autoplay 属性并不能兼容所有浏览器.那我们再使用 js 代码调用 元素提供的 play() 方法试试,修改一下上面的代码:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
    body {
        margin: 0;
    }
    
    .musicPlay {
        position: fixed;
        width: 100vw;
        top: 20vh;
    }
    
    .musicPlay>p {
        width: 64vw;
        margin-left: 18vw;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 12px 0 #aaa;
        height: 7vh;
        line-height: 7vh;
    }
    
    .musicPlay>p>img {
        float: left;
        margin-left: 1vw;
        height: 5vh;
        margin-top: 1vh;
    }
    
    .musicPlay>p>span {
        float: left;
    }
    </style>
</head>

<body>
    <div class="musicPlay">
        <audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
        <p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></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();
        $('.musicPlay').click(function() {
            // 依據 audio 的 paused 属性返回音频是否已暂停來判斷播放還是暫停音频。
            if (voice.paused) {
                voice.play();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
            } else {
                voice.pause();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
            }
        });
    });
    </script>
</body>

</html>

情况和刚才一样,这一招也行不通.
为什么在 iPhone 上就无法自动播放音频?这是因为 iOS Safari 不允许自动播放 audio，只能通过用户交互触发.这大概是苹果公司出于用户体验而做的限制.但是为什么别人的 iPhone 使用微信打开一个 H5 却能自动播放音频?
这就需要说到一个被腾讯和谐掉的接口 WeixinJSBridge,这里就不讲为什么 WeixinJSBridge 接口会被和谐掉,反正都被和谐掉了,以后也不建议在项目中使用.但是腾讯又没把 WeixinJSBridge 这个 API 所有功能都和谐掉，相反，有好几个功能还是相当有用的，可以正常使用.有兴趣的可以看看<<微信JSAPI>>.接下来我们就需要用到尚未被腾讯和谐掉的 WeixinJSBridge 接口来实现在 iPhone 手机微信端 自动播放.
在微信内置浏览器中有一个内置的 JS 对象,这个内置的 JS 对象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件 “WeixinJSBridgeReady”。因此，在调用 WeixinJSBridge 相关 api 时，需要做好 WeixinJSBridge 存在与否的判断.修改一下上面的代码:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
    body {
        margin: 0;
    }
    
    .musicPlay {
        position: fixed;
        width: 100vw;
        top: 20vh;
    }
    
    .musicPlay>p {
        width: 64vw;
        margin-left: 18vw;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 12px 0 #aaa;
        height: 7vh;
        line-height: 7vh;
    }
    
    .musicPlay>p>img {
        float: left;
        margin-left: 1vw;
        height: 5vh;
        margin-top: 1vh;
    }
    
    .musicPlay>p>span {
        float: left;
    }
    </style>
</head>

<body>
    <div class="musicPlay">
        <audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
        <p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></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();
                });
            }
        }
        $('.musicPlay').click(function() {
            // 依據 audio 的 paused 属性返回音频是否已暂停來判斷播放還是暫停音频。
            if (voice.paused) {
                voice.play();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
            } else {
                voice.pause();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
            }
        });
    });
    </script>
</body>

</html>
  1. 在 PC 端的 Chrome 浏览器,Edge 浏览器*问,能够自动播放音频.
  2. 在 Android 手机上使用微信和 Android 自带浏览器访问,能够自动播放音频.
  3. 在 iPhone iOS10 系统 手机上使用微信访问,能够自动播放音频.Safari 浏览器访问,依然无法自动播放音频.
    上面已经说过了这是因为 iOS Safari 不允许自动播放 audio，只能通过用户交互触发.而 Safari 浏览器可没有内置 WeixinJSBridge 接口,所以一般的做法是监听 touchstart 事件进而调用 元素提供的 play() 方法播放音频.当然这是一个没有办法的办法.修改一下上面的代码:
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
    body {
        margin: 0;
    }
    
    .musicPlay {
        position: fixed;
        width: 100vw;
        top: 20vh;
    }
    
    .musicPlay>p {
        width: 64vw;
        margin-left: 18vw;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 12px 0 #aaa;
        height: 7vh;
        line-height: 7vh;
    }
    
    .musicPlay>p>img {
        float: left;
        margin-left: 1vw;
        height: 5vh;
        margin-top: 1vh;
    }
    
    .musicPlay>p>span {
        float: left;
    }
    </style>
</head>

<body>
    <div class="musicPlay">
        <audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
        <p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span>播放/暫停</span></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', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
            } else {
                voice.pause();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
            }
        });
    });
    </script>
</body>

</html>

这样我们就能"兼容"所有浏览器了!
如果你想获得这段音频的长度（以秒计）,还可以监听浏览器能够开始播放这段音频时，发生的 canplay 事件来获取 元素的 duration 属性. duration 属性返回当前音频的长度，以秒计.如果未设置音频,则返回 NaN.修改一下上面的代码:

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <style>
    body {
        margin: 0;
    }
    
    .musicPlay {
        position: fixed;
        width: 100vw;
        top: 20vh;
    }
    
    .musicPlay>p {
        width: 64vw;
        margin-left: 18vw;
        font-size: 1.5rem;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        box-shadow: 0 0 12px 0 #aaa;
        height: 7vh;
        line-height: 7vh;
    }
    
    .musicPlay>p>img {
        float: left;
        margin-left: 1vw;
        height: 5vh;
        margin-top: 1vh;
    }
    
    .musicPlay>p>span {
        float: left;
    }
    
    .musicPlay>p>span>em {
        color: #d81e06;
    }
    </style>
</head>

<body>
    <div class="musicPlay">
        <audio id="voice" src="http://vk88.vka88.com/00006/2017063014590719381_Stay the Night.mp3" autoplay="autoplay"></audio>
        <p><img src="http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip"><span><em></em>播放/暫停</span></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', 'http://upload-images.jianshu.io/upload_images/6171922-4d23a92a9c256d0d.gif?imageMogr2/auto-orient/strip');
            } else {
                voice.pause();
                $('.musicPlay>p>img').attr('src', 'http://upload-images.jianshu.io/upload_images/6171922-e5206046b43e1efe.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
            }
        });
        //监听浏览器能够开始播放这段音频时，发生的 canplay 事件来获取 <audio> 元素的 duration 属性.
        $("#voice").on("canplay", function() {
            $(".musicPlay>p>span>em").html(parseInt(voice.duration)+'" ');
        });
    });
    </script>
</body>

</html>

引用 My_Oh_My
https://www.jianshu.com/p/21ac8ff7bac5

相关标签： js 学习笔记 js

上一篇： js用法、显示数据

下一篇： nginx容器配置文件独立的实现

推荐阅读