前几天遇到了一个很奇葩的问题：执行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. centos7下，解决Apache错误日志文件过大问题

    1,日志文件太大问题   第一步:停止Apache服务的所有进程,删除 /var/log/httpd目录下的 error.log.access.log文件 第二步:打开 /etc/httpd/conf ...

  2. php中的数组遍历的几种方式

    [(重点)数组循环遍历的四种方式]   1.使用for循环遍历数组     conut($arr);用于统计数组元素的个数.     for循环只能用于遍历,纯索引数组!!!!     如果存在关联数 ...

  3. js与jQuery对象相互转换

    // jQuery-->JavaScript 两种方法: $(selector).get(index) ; $(selector)[index]; // JavaScript-->jQue ...

  4. 使用 libdvm.so 内部函数dvm* 加载 dex

    首先要清楚,odex只是对代码段(我将dex文件与elf文件类比,大家都将执行文件分成不同的段)作优化,而其它用于类反射信息的段都应用原来的dex,所以odex文件内部还包含了一个dex. 打开一个d ...

  5. java设计模式之 装饰器模式

    装饰器模式 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构. 这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装 ...

  6. Azure 基础：Blob Storage

    Azure Storage 是微软 Azure 云提供的云端存储解决方案,当前支持的存储类型有 Blob.Queue.File 和 Table. 笔者在前文中介绍了 Table Storage 的基本 ...

  7. python加载sqlite3报错：No module named _sqlite3

    环境为Ubuntu16.04 Apache2.4 Python2.7.13 django 1.8 今天部署apache+django,经过各种折腾,好不容易配置完了,发现错误Apache的日志里有一项 ...

  8. python+selenium遇到鼠标悬停不成功可以使用js进行操作

    问题:在定位这种悬停后出现下拉操作的时候,尝试了使用move_to_element的方法 # ele_logout = br.find_element_by_xpath('/html/body/div ...

  9. 解决jmeter请求不成功或者报403错误

    有同学遇到这种情况,jmeter请求一个网站,各项参数填写正确,可是响应是403,同样的请求放在浏览器执行就没有问题: 这是因为被请求的网站做了请求来源过滤,来源不明的请求拒绝访问,我们需要在jmet ...

  10. css让文字在一行内显示

    1.例如 p元素,里面的文字不换行显示,超出部分不隐藏 p{ width:100px; word-break:keep-all; white-space:nowrap; } 2.例如 p元素,里面的文 ...