前言
在做各种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版本微信还是支持以上方式

解决在微信中部分IOS不能自动播放背景音乐的更多相关文章

  1. iphone在微信中audio 音频无法自动播放

    问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...

  2. 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...

  3. 关于移动端input框 在微信中 和ios中无法输入文字的问题

    这个是一个提交的页面但是总是无法输入进去文字 在uc中是可以的 但是在微信中 或者ios自带浏览器是无法输入的  绞尽脑汁  找了半天  才发现自己多加了一段代码(这个代码是模版中自带的   我靠) ...

  4. iOS苹果和微信中音频和视频实现自动播放的方法

    通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...

  5. iOS - 如何自动播放H5中的音频

    场景:iOS端设备,App页面跳转到H5产品介绍,背景音乐无法播放.(为什么不能自动播放,因该是iPhone人性化设定吧~) 加载H5用UIWebView空间: 代码: CGRect rect = s ...

  6. H5-video1 iOS苹果和微信中音频和视频实现自动播放的方法

    <audio preload="preload" controls id="car_audio" src="http://media.xitao ...

  7. 解决移动端浏览器 HTML 音频不能自动播放的三种方法

    https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...

  8. 解决audio和video在手机端无法自动播放问题

    各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...

  9. (IOS可自动播放)使用bxslider做了一个切换图片跟随播放MP3的功能

    代码: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset=" ...

随机推荐

  1. Java-DBCP连接池

    创建项目: 导入jar包: 参见上图. JDBCConn.java获取数据源类: package com.gordon.jdbcconn; import java.io.InputStream; im ...

  2. 修改Linux文件句柄限制

    1.  添加ulimit -HSn 655350   到/etc/profile 2. 配置生效  source /etc/profile 修改linux文件句柄数 分类: LINUX 2010-09 ...

  3. laravel 5.1 性能优化对比 - 框架提供的方法

    写了一个项目发现性能不如人意. 于是便测试下, 看下性能瓶颈在什么地方. 使用 ab -n 20 http://www.lartest.com/ 软件环境: OS : windows 8.1 CPU: ...

  4. springmvc拦截器的配置、使用

    springmvc拦截器的配置.使用:1.自定义拦截器,实现HandlerInterceptor接口. package com.bybo.aca.web.interceptor; import jav ...

  5. ROS :为IDE配置环境变量

    ROS hydro 自带安装好了opencv 2.4 为了在自己经常使用的开发环境Eric下调用,需要配置Eric的环境变量,好让它可以调用ROS的资源,当然你用其他IDE也要这样配置,配置好了环境变 ...

  6. C++ IO流小结

    撒花庆祝下,终于看完了(C++Primer)第一部分,即将进入第二部分! IO部分,最基本的是iostream(istream.ostream),子类有fstream(ifstream.ofstrea ...

  7. 第三百零八节,Django框架,models.py模块,数据库操作——链表结构,一对多、一对一、多对多

    第三百零八节,Django框架,models.py模块,数据库操作——链表结构,一对多.一对一.多对多 链表操作 链表,就是一张表的外键字段,连接另外一张表的主键字段 一对多 models.Forei ...

  8. par函数的bg参数-控制图片的背景色

    bg 参数用于控制图片的背景色,默认为白色 代码示例: par(bg = "pink") plot(1:5, 1:5, main = "title", xlab ...

  9. Centos6.8搭建Git服务(git版本可选)

    搭建Git服务器需要准备一台运行Linux的机器,本文以Centos6.8纯净版系统为例搭建自己的Git服务. 准备工作:以root用户登陆自己的Linux服务器. 第一步安装依赖库 [root@lo ...

  10. hadoop基础学习---数据管理策略

    上图中的ABCDE都代表默认大小64M的数据块 nameNode与dataNode之间有一个心跳机制,datanode每隔多秒钟定期的发送心跳到nameNode