前几天遇到了一个很奇葩的问题：执行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机不能播放声音的更多相关文章

  1. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  2. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  4. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  6. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  7. 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

    由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...

  8. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  9. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

随机推荐

  1. linux中搭建java开发环境

    JDK安装 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载对应jdk版本, ...

  2. Sampling Distributions and Central Limit Theorem in R（转）

    The Central Limit Theorem (CLT), and the concept of the sampling distribution, are critical for unde ...

  3. javascript获取json对象的key名称的两种方法

    javascript获取json对象的key名称的两种方法 数据处理中,你可能接收到一个不确定内容格式的json对象,然后要把key的值提取出来.今天试过两种可以提取json key的方法,均可以正常 ...

  4. APUE-文件和目录（一）

    4.1 函数stat 函数stat返回与此命名文件有关的信息结构.下面的代码实现了一个工具,显示树形目录结构,需要加两个参数,一个为目录名,一个为显示目录的深度. #include <sys/s ...

  5. [C++][OpenGL]自己写GUI(0)——介绍

    文章可转载,转载请注明出处:http://www.cnblogs.com/collectionne/p/6928612.html.文章未完,如果不在博客园(cnblogs)发现本文,请访问前面的链接查 ...

  6. servlet与jsp

    Servlet生命周期 一.初始化阶段   当WEB客户第一次请求访问某个Servlet的时候,WEB容器将创建这个Servlet的实例.调用init()方法进行Servlet的初始化 一.响应客户请 ...

  7. PHPStorm中的快捷键

    1.Ctrl+Alt+L 格式化代码 2.windows下按下快捷`Ctrl`+`Shift`+`-`,这样就能折叠所有代码了. 3.windows下按下快捷`Ctrl`+`Shift`+`+`,这样 ...

  8. 通过bin-log对mysql进行数据恢复

    mysqlbinlog --database=数据库名 --start-date="2017-06-01 5:00:00"  --stop-date="2017-06-1 ...

  9. android的drawable资源

    1.android中可以通过xml文件配置资源,比如字符串啦,整数拉.浮点数等等,当然也可以配置图片资源和选择器,下面我们就看看几种图片资源的配置. @1矩形方框,带渐变色的配置代码 <?xml ...

  10. js中的confirm的运用

    <a href="javascript:void(0);" onclick='tuichu_queren();'>安全退出</a> <script t ...