zoukankan      html  css  js  c++  java
  • 解决在微信中部分IOS不能自动播放背景音乐

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

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

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

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

    如果不能播放, 使用微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!

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

    总结下
    关于音乐自动播放的问题,现在可以分为三种:
    1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)
    2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)
    3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)

    经测试iphone6上的6.5.4版本微信还是支持以上方式

  • 相关阅读:
    [SQL server] IF ELSE 和 CASE WHEN 的用法
    SQL server游标基本结构
    SQLserver查看某个视图的创建语句
    SqlServer和Oracle修改表结构语句
    IE浏览器部分js代码不生效的问题
    SQL server将查询到的多行结果,拼接成字符串(列转行)
    SQL server将某个字符串将按指定字符分解成子字符串(行转列)
    安装weblogic时,运行configure.cmd报错、闪退、无法创建域
    黑苹果相关工具
    黑苹果安装问题集
  • 原文地址:https://www.cnblogs.com/alantao/p/6364581.html
Copyright © 2011-2022 走看看