ios html5 audio mp3,H5 audio 微信端 在IOS上不能播放音乐
前言
在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求。我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的。直到微信火爆起来,发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是,但是。。。最近的项目,又发现了一个头疼的问题。部分的iOS微信,打开有自动播放背景音乐的页面没有声音!最头疼的是这个问题出现做同款机子,相同的iOS系统,相同的微信版本!没错,前端就是要经常这么折腾的,同一个问题,你以为找到了最终的解决方案,但是各种浏览器更新快速,昨天没问题,也许今天就有问题了。还好,这个问题暂时找到原因和解决方案了,详情请看下文。
解决方案
先看下平时使用audio标签插入背景音乐的代码:
那代码有办法解决这少部分用户呢?如何解决呢?
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('Jaudio');
是不是听到声音了呢?!!解决方案就是这么简单。
后语
总结下吧,关于音乐自动播放的问题,现在可以分为三种:
1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)
2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)
3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)
那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('Jaudio');
ios html5 audio mp3,H5 audio 微信端 在IOS上不能播放音乐相关推荐
- HTML5中的audio在手机端和微信端的不能自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流量所设置的 通常解决方法是给一个交互事件: 标签: <audio loop ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- 解决微信端网页IOS手机的date乱码NaN问题
1.解决微信端网页IOS手机的date乱码NaN问题. IOS:Safari不兼容Javascript中的Date问题(date乱码NaN)把new Date(Date.parse(date.repl ...
- 微信端iphone 使用video标签播放不了视频
Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用. 问题:微信端 ...
- H5微信端在IOS上不能播放音乐解决方案
前言 在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...
- ios 上传图片失败 小程序_微信小程序ios端 使用ajaxSubmit上传图片失败,android没问题...
微信小程序ios端 使用ajaxSubmit上传图片失败,android没问题 微信小程序开发上传图片,使用ajaxsubmit,post请求,form设置multipart/form-data, a ...
- uniapp支付之App、小程序、H5(微信端)、支付宝、百度支付、头条支付
APP支付(内置) appPay.js /*** 5+App支付,仅支持支付宝以及微信支付** 支付宝Sdk集成,微信sdk未集成** @param : provider(String) ->被 ...
- 微信html5展示页,H5科普|微信H5页面的展示形式
原标题:H5科普|微信H5页面的展示形式 随着移动互联网的不断发展,越来越多的企业开始运用微信H5来营销推广,微信H5凭借着方便快捷.页面丰富的优势,已经成为了如今最受欢迎的微信营销方式.一款微信H5 ...
- 基于vue + axios + lrz.js 微信端图片压缩上传
业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
最新文章
- maven 错误处理
- C# 窗体最小化的托盘/系统通知区域(转)
- Mapreduce和Yarn概念,参数优化,作用,原理,MapReduce计数器 Counter,MapReduce 多job串联之ControlledJob(来自学习资料)
- RDB 文件的优势和劣势
- 计算机应用基础本模块一测试,广东开放大学远程教育专科2018年秋计算机应用基础Word模块测试...
- php通过条件来定义const,php用const出错是什么原因
- GitBucket管理员添加人员
- 漫画解析Linux内核
- mysql zpi版的如何配置_Mysql zip版 安装配置
- Nginx 状态监控、缓存的两种机制(学习笔记十四)
- 互联网架构设计漫谈 (1)-概述
- mysql jdbc 驱动 下载地址官网
- 皮尔逊系数皮尔逊系数---K近算法之皮尔逊系数
- 8086汇编复习2 - 使用emu8086
- XAMPP升级PHP版本的步骤
- 分享ASP.NET视频系列教程——第十九讲 ASP.NET内置的AJAX
- 03_Linux ARM架构-安装elasticsearch 7.16-银河麒麟V10操作系统
- 云时代主机托管的现状和趋势
- 如何在手机浏览器中打开安卓APP
- 高等数学求导积分公式