zoukankan      html  css  js  c++  java
  • 解决ios下的微信打开的页面背景音乐无法自动播放(转载)

    前言

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

    解决方案

    先看下平时使用audio标签插入背景音乐的代码:

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

    正常来说,上面的写法在安卓和大部分IOS机子的微信是可以播放的(safari这里就忽略讨论),但是还有少部分不能正常播放。

    那代码有办法解决这少部分用户呢?如何解决呢?

    答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:

    <audio id="Jaudio" class="media-audio" src="bg.mp3" preload loop="loop"></audio >
    function audioAutoPlay(id){
        var audio = document.getElementById(id);
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
                audio.play();
        }, false);
    }
    audioAutoPlay('Jaudio');
    

      

    但是还有个问题需要解决:

    问题的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的。那有个问题就是 如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以监听的js一定要放在head前面(放在css外链之前),确保最新执行 。

    后语

    总结下吧,关于音乐自动播放的问题,现在可以分为三种:

    1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)

    2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)

    3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)

    那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <title>IOS微信</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <script type="text/javascript">
    //原来是在微信易信执行Ready之前,先注册事件,所以放在所有请求的最前面
    document.addEventListener("WeixinJSBridgeReady", function () {
        audioAutoPlay('Jaudio');//给个全局函数
    }, false);
    document.addEventListener('YixinJSBridgeReady', function() {
        audioAutoPlay('Jaudio');//给个全局函数
    }, false);
    </script>
    <!-- 加载css放这里 -->
    </head>
    <body>
      
    <audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop">
    </audio>
      
    <script>
    function audioAutoPlay(id){//全局控制播放函数
        var audio = document.getElementById(id),
            play = function(){
                audio.play();
                document.removeEventListener("touchstart",play, false);
            };
        audio.play();
        document.addEventListener("touchstart",play, false);
    }
     
    var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase())||/yixin/i.test(navigator.userAgent.toLowerCase());
    if(!isAppInside){//给非微信易信浏览器
      audioAutoPlay();
    }
    </script>
    </body>
    </html>
    复制代码

    转载出处:w3cmark (http://www.w3cmark.com/2016/434.html)

  • 相关阅读:
    HTCVive摄像头的一些好玩的现象
    AI之A*算法
    C#预处理器指令之#define/#undefine/#if/#elif/#else/#endif
    AI之有限状态机
    Unity之动态加载场景资源
    Canvas
    DFGUI之界面文字显示异常
    Unity Application
    AI:确定性AI
    php正则表达式
  • 原文地址:https://www.cnblogs.com/lijiapeng/p/10489940.html
Copyright © 2011-2022 走看看