H5 audio 微信端 在IOS上不能播放音乐

audio 这个标签 在IOS上不能播放这是什么原因

阅读 12.4k
评论 2017-01-19 提问
    5 个回答

    前言
    在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求。我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的。直到微信火爆起来,发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是,但是。。。最近的项目,又发现了一个头疼的问题。部分的iOS微信,打开有自动播放背景音乐的页面没有声音!最头疼的是这个问题出现做同款机子,相同的iOS系统,相同的微信版本!没错,前端就是要经常这么折腾的,同一个问题,你以为找到了最终的解决方案,但是各种浏览器更新快速,昨天没问题,也许今天就有问题了。还好,这个问题暂时找到原因和解决方案了,详情请看下文。
    解决方案
    先看下平时使用audio标签插入背景音乐的代码:

    <audio src="bg.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>

    那代码有办法解决这少部分用户呢?如何解决呢?
    答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:
    <audio src="bg.mp3" id="Jaudio" class="media-audio" autoplay preload loop="loop"></audio>

    function audioAutoPlay(id){

    var audio = document.getElementById(id),  
        play = function(){  
            audio.play();  
            document.removeEventListener("touchstart",play, false);  
        };  
    audio.play();  
    document.addEventListener("WeixinJSBridgeReady", function () {  
        play();  
    }, false);  
    document.addEventListener('YixinJSBridgeReady', function() {  
        play();  
    }, false);  
    document.addEventListener("touchstart",play, false);  

    }
    audioAutoPlay('Jaudio');
    是不是听到声音了呢?!!解决方案就是这么简单。
    后语
    总结下吧,关于音乐自动播放的问题,现在可以分为三种:
    1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)
    2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)
    3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)
    那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:

    function audioAutoPlay(id){

    var audio = document.getElementById(id),
        play = function(){
            audio.play();
            document.removeEventListener("touchstart",play, false);
        };
    audio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
        play();
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        play();
    }, false);
    document.addEventListener("touchstart",play, false);

    }
    audioAutoPlay('Jaudio');

    评论 赞赏
      Awbeci
      • 2.3k
      评论 赞赏

        音乐文件丢到预加载里,然后再写个touchstart事件触发audio标签的play方法。

        评论 赞赏
          IMSKK
          • 173

          ios端需要用户点击屏幕才能加载 或者预加载音频再触发就可以

          评论 赞赏

            在ios微信平台上,audio的自动播放属性autoplay不能自己触发,需要自己触发一次。

            你试试这种方法:

            function audioAutoPlay(id){
                          var audio = document.getElementById(id);
                          audio.play();
                          document.addEventListener("WeixinJSBridgeReady",function(){
                              audio.play();
                          },false);
                      }
             audioAutoPlay("audio")

            这样子就像是触发了一次音乐播放。

            该答案已被忽略,原因:

            评论 赞赏
              撰写回答

              登录后参与交流、获取后续更新提醒