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

最新推荐文章于 2022-01-11 17:46:35 发布
最新推荐文章于 2022-01-11 17:46:35 发布
阅读量454 收藏 1
点赞数
分类专栏： js 学习笔记 文章标签： js
原文链接：https://www.jianshu.com/p/21ac8ff7bac5
版权
在 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

yww_yang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
audio在ios微信浏览器中不支持自动播放问题
GTraveler
12-07 6416
最近在开发微信公众号H5页面的时候，audio标签在ios系统上无法进行自动播放，最后发现audio在ajax回调中无法调用Play，所以查找很多资料终于解决了。 首先html中添加如下代码：html <audio id="bg-music" src="<{$Think.const.HIMG_PATH}>s.wav" preload="auto"> 您的浏览器不支持 audio 标签。 </
微信的audio无法自动播放的问题
磊磊026的博客
08-17 4582
一、问题      最近做了一个html5的项目，里面涉及到音乐播放，项目要求音乐进入页面就自动播放，于是我就想到了html5的audio标签，将mp3引入进去。      1.在audio标签里引入了autoplay属性；        经过测试发现Android上可以自动播放，ios上无法自动播放。 　　　　 　　      2.在js文件
html audio 在iphone不能播放,H5 audio标签在ios微信上不能播放音乐
weixin_33481022的博客
06-18 920
原文: http://n1.tuxi.com.cn/to/weixin/satjam/mtsahn.html解决方案关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：function audioAutoPlay(id){var audio = doc...
微信网页Audio自动播放(IOS安卓)
雅心小筑
12-28 1976
尝试很多网上的方法无效,自己整理的可行方案 //之前一直是用dom元素 <audio ref="audio" loop> <source :src="sloganvoice_src" type="audio/mpeg"> </audio> //发现根本不行,在ios无法触发$('').paly() 方法
ios html5 audio mp3,H5 audio 微信端 在IOS上不能播放音乐
weixin_39783915的博客
06-24 525
前言在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微信火爆起来，发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的iOS微信，打开有自动播放背景音乐的页面没有声音！最头疼的是这...
微信浏览器实现ios端 audio 自动播放的解决方法
haotwe的博客
08-06 1162
原因： 由于 iOS Safari 限制不允许 audio autoplay。 为了避免给用户造成高额流量费用而作出的妥协，顺便还能节省用户手机电量。 解决方法： 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio。 可以使用一个微信停止更新但没有废弃的微信 JSAPI ：WeixinJSBridgeReady api用途：调用指定API 注意并不能兼容所有 iPhone 机型！！ 代码展示： //方法一：一般情况下，这样就可以自动播
快速解决ios微信下audio无法自动播放的问题
01-05
我们都知道，iOS下的safari是无法自动播放音乐的，主动出发点击事件也没用， ...以上这篇快速解决ios微信下audio无法自动播放的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
在iOS系统和微信环境中，audio标签的自动播放功能受到严格的限制，这主要是为了优化用户体验，避免不必要的音频自动播放导致流量消耗或干扰用户。在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境...
解决ios微信下vue项目组件切换并自动播放音频问题
01-04
惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false) 来实现的自动播放 ,
解决ios微信下audio无法自动播放的问题
Cooky的博客
11-09 3129
我们都知道，iOS下的safari是无法自动播放音乐的，主动出发点击事件也没用， 微信自己做了处理后用以下方法可以解决 document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); 但是现在实际上在微信ready的时候就可以直接调用了 wx.ready(fun
simpleWebAudio:用于处理苹果手机需要用户触发才能播放音频的问题
05-16
simpleWebAudio 用于处理苹果手机需要用户触发才能播放音频的问题 用法 引入simpleWebAudio.js var au_2 = new simpleWebAudio("sound/C4.mp3", { loop: true }); au_2.play(); 只需要一次用户点击屏幕事件，之后播放音频都不需要用户触发了 目前自己也懒得去研究webaudio，就先这样吧，能满足平时的需求了，有更复杂的需求的时候我再去看文档应该也来得及吧O_O
html5关于ios微信audio标签不支持自动播放问题的解决
weixin_43976602的博客
05-25 2169
html5关于ios微信audio标签不支持自动播放问题的解决 1.标签属性介绍 src:音频地址 autoplay:音频加载完毕后自动播放。 controls:显示播放控制条。 loop:播放完毕后会重复播放。 preload:1.auto 预加载音频视频。2.metadata 只预加载音频视频元数据。 有autoplay时此属性无效。 2.js控制介绍 play()播放 pause()暂停 ...
微信 IOS客户端 Audio自动播放的解决方案
布里渊区
02-20 2871
对于安卓机来说，下面的代码足以 var player = document.getElementById('mp3play'); player.play();但是对于IOS版本的微信，却发现不能自动播放，网上也没有好的解决方案。后来查到说是 需要在调用微信JS-API的 ready 中 调用，于是，尝试了一下，真的可以： wx.ready(function (
HTML5中的audio在手机端和微信端的不能自动播放
qq_43248623的博客
07-04 1699
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的 通常解决方法是给一个交互事件： 标签: <audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto"> 该浏览器不支持audio属性</audio> 解决方法: //--创建页面监听，等待微信端页面加载完毕 触发音频播放 document.addEventListener
移动端H5页面在微信浏览器内audio无法自动播放问题解决
qq_35606727的博客
01-11 4639
相信许多小伙伴都遇见过这话种情况，在微信浏览器内添加的audio 无法自动播放 之前写过好多那种活动页添加的背景音乐都可以自动播放，直到后来ios 增加了限制就出现了这个问题 怎么解决的只需给audio标签增加一个属性就可以解决如下图 <audio ref="bgSound" :src="musicSrc" autoplay loop preload></audio> ......
解决audio、video视频在ios微信浏览器中不能自动播放的问题
趙小二啊
07-02 5924
解决audio、video视频在ios微信浏览器中不能自动播放的问题 由于Android，IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验，规定不自动播放音频视频，默认屏蔽了autoplay，如果要想达到自动播放效果，需要单独处理 解决方法一： 在页面中引入微信插件： <srcipt src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 页面中添加html代码： <audio controls="
iOS微信端 audio 自动播放背景音乐
三三
01-24 569
最近有一个要求添加背景音乐的需求，我jio得OK，音频文件发给我就好啦(～￣▽￣)～ 卟啦卟啦写完了，浏览器调试一切都没问题，最后测试才发现iOS系统的没 有 音 乐！！！嗯？ 瞬间就jio得才疏学浅~ 最后，也算是得到了解决，￣へ￣，iOS基于安全考虑的限制，不允许自动播放audio和vedio。 解决方案： 监听WeixinJSBridgeReady事件 微信的JS API建立在微信壳浏览...
ios微信浏览器自动播放音乐
weixin_34409703的博客
02-18 551
//ios自动播放音乐 function audioAutoPlay(id){ var audio = document.getElementById(id), play = function(){ audio.play(); document.removeEventListener("touchst...
微信小程序<audio>组件现在还能使用吗
最新发布
06-09
是的，微信小程序`<audio>`组件仍然可以使用。在小程序中，使用`<audio>`组件可以播放本地或远程音频文件。您可以根据自己的需求设置音频文件的路径、播放状态、音量等属性。同时，`<audio>`组件也提供了多种事件，如`bindplay`、`bindpause`、`bindtimeupdate`等，可以监听音频播放的状态和进度，并做出相应的处理。 需要注意的是，微信小程序`<audio>`组件存在一些兼容性问题，不同平台的表现可能会有所不同。为了保证在不同平台上的兼容性，建议您在使用`<audio>`组件时，对不同平台进行兼容性测试和调试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值