audio ios 微信浏览器
2017-12-07 11:18:42 u013575984 阅读数 4198

最近在开发微信公众号H5页面的时候,audio标签在ios系统上无法进行自动播放,最后发现audio在ajax回调中无法调用Play,所以查找很多资料终于解决了。

首先html中添加如下代码:

html
<audio id="bg-music" src="<{$Think.const.HIMG_PATH}>s.wav" preload="auto">
    您的浏览器不支持 audio 标签。
</audio>

我一开始的js代码:

js
//这是一个点击事件触发的函数
function changeStatus(PostObj) {
    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj,
        success: function(data){
            if(data.rel == 1){
                var audio = document.getElementById("bg-music");
                audio.play(); 
                msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

发现在iOS系统的微信浏览器中不起作用,查找资料得到第一个解决方案:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
 //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 
  var audio = document.getElementById("bg-music");
  audio.play(); 
 //微信必须加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
 document.addEventListener("WeixinJSBridgeReady", function () { 
        audio.play(); 
 }, false); 
</script>

将上边代码放进回调函数中发现还是不起作用,然后发现在如下情况下可以生效,但我们需要在请求成功返回res.rel==1情况下,才播放音乐,所以这样没有满足自己的需求:

function changeStatus(PostObj) {
     var audio = document.getElementById("bg-music");
     audio.play();
     document.addEventListener("WeixinJSBridgeReady", function () {
       audio.play();
     }, false);

    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj,
        success: function(data){
            if(data.rel == 1){
              msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

所以我就知道问题出在哪里,是在ajax回调中audio标签不会触发,查找资料得到下面这句话:

为了避免浪费流量,ios手机端浏览器默认规定媒体文件不允许自动加载播放。
必须在由用户直接操作的事件(如click事件)中才能执行加载播放的代码语句。
在XHR的load事件中执行a.play(),是不允许的。

得到一个解决方案,把ajax改成同步方式。让click事件一直不结束。

function changeStatus(PostObj) {
    $.ajax({
        url:  PostObj.url,
        type:'post',
        datatype: 'json',
        data:PostObj,
        async: false,//使用同步方案
        success: function(data){
            if(data.rel == 1){
               var audio = document.getElementById("bg-music");
                audio.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio.play();
                }, false);
                msg(data.msg,function () {
                    window.location.href= window.location.href+'?time='+((new Date()).getTime());
                });
            }else{
                msg(data.msg);
            }
        }
    });
}

至此bug解决,可能还有一些细节问题没有注意,还要慢慢完善。

2017-04-22 21:23:00 weixin_33709219 阅读数 31

原理:
在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)

function autoPlayAudio1() {
        wx.config({
            // 配置信息, 即使不正确也能使用 wx.ready
            debug: false,
            appId: '',
            timestamp: 1,
            nonceStr: '',
            signature: '',
            jsApiList: []
        });
        wx.ready(function() {
            document.getElementById('audio').play();
        });
}

就是关键的那一句:document.getElementById('audio').play();
大家或多或少都知道 iOS Safari 不允许自动播放 audio, 可能已经被坑过了,

参考:https://gist.github.com/ufologist/7c14837db642a6e916ce

2017-02-20 17:59:37 cctvcqupt 阅读数 1993

对于安卓机来说,下面的代码足以

  var player = document.getElementById('mp3play');


            player.play();

但是对于IOS版本的微信,却发现不能自动播放,网上也没有好的解决方案。后来查到说是 需要在调用微信JS-API的 ready 中 调用,于是,尝试了一下,真的可以:

        wx.ready(function () {




            var player = document.getElementById('mp3play');


            player.play();

        });
2019-01-24 11:39:02 qq_40776187 阅读数 93

最近有一个要求添加背景音乐的需求,我jio得OK,音频文件发给我就好啦(~ ̄▽ ̄)~ 卟啦卟啦写完了,浏览器调试一切都没问题,最后测试才发现iOS系统的没 有 音 乐!!!嗯?
瞬间就jio得才疏学浅~


最后,也算是得到了解决, ̄へ ̄,iOS基于安全考虑的限制,不允许自动播放audio和vedio。
解决方案: 监听WeixinJSBridgeReady事件

微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady",so,就可以在回调中播放音乐。

    // 音乐自动播放
   function play(){
        document.getElementById("audio").setAttribute("src","img/bgm.mp3");
        document.getElementById("audio").play();
    }
    document.addEventListener("WeixinJSBridgeReady", function () {
        play();
    }, false);
2018-09-09 09:32:00 weixin_34228662 阅读数 17
function audioAutoPlay(id){
    var audio = document.getElementById(id);
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        audio.play();
    }, false);
}
audioAutoPlay('much');

https://blog.csdn.net/natalie86/article/details/51498939

没有更多推荐了,返回首页