html5 audio play()方法部分ios机不能播放声音
前几天遇到了一个很奇葩的问题:执行audio.play方法,浏览器、安卓、部分ios可正常播放,部分ios不能播放部分声音,这就奇怪了。
我的第一反应是:
音频文件有问题 -- 写了一个domo验证,文件可正常播放
音频文件没有加载完成就播放 -- 绑定loadeddata事件发现音频确实已经加载完成
后来查阅了一些资料发现:ios禁止自动播放media的,必须通过用户的实际操作的事件(如click等)才能播放~ 我的代码里确实也是click之后才play的,实在是不知道哪里出错了
------------过了一个晚上,回去想了几处可能出错的地方------------
第二天来了一一验证,发现为什么同一部ios手机有的项目下的音频就可以播放有的不可以,原来页面中有一个变量,通过这个变量来判断点击后是直接play播放还是异步请求之后播放
发现不能播放的都是异步请求之后的,那么问题来了,为什么异步之后再播放就没有声音呢
原来:不写ajax时play是在click中执行的,有效;
加了ajax(默认异步)就变成了是在XHR的load事件中执行的,无效,因为此时你的点击事件已经完成了
解决方法:ajax改成同步方式,让click事件不结束~
总结下自己遇到的坑,希望能帮助遇到此问题的小伙伴们~
html5 audio play()方法部分ios机不能播放声音的更多相关文章
- HTML5 Audio标签方法和函数API介绍
问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- html5 audio标签切换播放音乐的方法
html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...
- [jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
随机推荐
- HttpClien Get&Post
新公司上班第二周,开始进军.Net Core,这方面的东西比较新,所以已经封装好的东西比较少,比如HttpClien之类的开源类库,找了NuGet好久,没有找到,所以先写个简陋的来用着先. 引用: u ...
- 移动端web解决方案
范畴 移动端web浏览器.至少需要适配的,UC,QQ,各手机内置浏览器,chrome,safari. 是不是觉得和PC端差不多?错了!每款同一版本ios的内置浏览器一样.但每款同一版本android的 ...
- CI Weekly #20 | 从持续集成的角度看 “云” 的价值
很多移动开发工程师对 fastlane 耳熟能详,最近 flow.ci 的 iOS 工作流「编译」这步已采用 fastlane gym 工具(iOS 应用打包签名自动化),进一步优化了构建打包速度.快 ...
- Python教程(2.2)——数据类型与变量
和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...
- jQuery插件 -- 图片随页面滚动fixed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SQLalchemy模块用法
安装 pip install sqlalchemy #!/usr/bin/env python # -*- coding:utf-8 -*- # 加载模块 from sqlalchemy.ext.de ...
- 动态添加Redis密码认证
如果redis已在线上业务使用中,但没有添加密码认证,那么如何在不影响业务服务的前提下给redis添加密码认证,就是一个需要仔细考虑的问题. 本文描述一种可行的方案,适用于客户端使用了jedis连接池 ...
- 有关typename
为了避免潜在的语法解析二义性,你需要在从属于形式类型参数的类型名前面使用typename,这样的类型被称为从属类型(dependent type) (摘自effective STL)
- 11.并发包阻塞队列之LinkedBlockingQueue
在上文<10.并发包阻塞队列之ArrayBlockingQueue>中简要解析了ArrayBlockingQueue部分源码,在本文中同样要介绍的是Java并发包中的阻塞队列LinkedB ...
- ionic2 跳转子页面隐藏底部导航栏
第一种方法: 在tab里面添加一个属性[tabsHideOnSubPages]='true' <ion-tab [root]="tab1Root" [tabsHideOnSu ...