解决在微信中部分IOS不能自动播放背景音乐
2023-09-14 08:58:49 时间
前言
在做各种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版本微信还是支持以上方式
相关文章
- Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法。
- iOS开发之音频解析第三方框架介绍
- iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角)
- IOS开发--仿制网易新闻
- 关于微信小程序在ios中无法调起摄像头问题
- 关于第三方IOS的checkBox框架的使用
- iOS开发UI篇—IOS开发中Xcode的一些使用技巧
- iOS开发UI篇—ios应用数据存储方式(偏好设置)
- iOS中 按钮和标题完美各种排列/完美教程
- IOS中 浅谈iOS中MVVM的架构设计与团队协作
- iOS开发那些事--OCUnit测试框架
- iOS文本布局探讨之一——文本布局框架TextKit浅析
- 微信小程序----wx.getLocation(OBJECT) API在iOS关闭本机定位时,获取定位失败
- ios swift5 tableViewCell 左滑 出现两个点击按钮
- iOS swift5 微信朋友圈cell 微博的cell
- iOS swift中的main函数
- ios swift 归解档
- iOS音频播放 (二):AudioSession 转
- (Android+IOS)我们正在做一个新闻App,做几乎一样的,倾听您的建议 (画画)
- UIControl-IOS开发
- 华为:鸿蒙OS不是安卓和iOS的拷贝;胡润世界500强榜发布:苹果第一,腾讯第六
- 一文2000字手把手教你从0开始的ios自动化测试【保姆级教程】