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版本微信还是支持以上方式

  • 相关阅读:
    自定义上传图片拼图游戏
    react 移动端 兼容性问题和一些小细节
    利用AudioContext来实现网易云音乐的鲸鱼音效
    解决跨域问题,实例调用百度地图
    SVG vs Image, SVG vs Iconfont
    保存登陆username和password
    Android学习之——优化篇(2)
    ubuntu下新建用户
    PHP Laravel 本地化语言支持
    apache 绿色版 安装
  • 原文地址:https://www.cnblogs.com/alantao/p/6364581.html
Copyright © 2011-2022 走看看