前几天遇到了一个很奇葩的问题：执行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. web前端面试集锦（自己搜集的，如有错误请不吝赐教）

    css 1 浏览器兼容性 CSS hack(针对IE6-,IE7,IE8,IE9以及其他浏览器) ‘ * ’ : 所有的IE浏览器都能识别 说明:在标准模式中 “-″减号是IE6专有的hack “\9 ...

  2. 如何通过JS实现简单抖动效果

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

  3. Python教程(2.2)——数据类型与变量

    和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...

  4. 原生js实现图片网格式渐显、渐隐效果

    写正文前先吐槽一下:端午放假完第一天去某千人以上公司面试前端工程师,第一轮是我应聘职位的部门小领导,谈的不错,面试主要围绕要用到的技术来:第二轮来了我要说的正主,我了个去,问的问题一个和前端无关,问我 ...

  5. 10分钟弄懂javascript数组

    建议阅读时间 : 10分钟 主要内容:javascript数组的基本概念.属性.方法 新建数组: var arr01 = ["a","b","c&qu ...

  6. java基础（十一章）

    一.理解什么是类和对象               万事万物皆对象 1.属性--对象具有的特征(特点) 2.方法--对象可执行的操作(能干什么事) 3.对象的定义: 是一个客观存在的,看的见或摸得着的 ...

  7. Vulkan Tutorial 13 Render passes

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Setup 在我们完成管线的创建工作,我们接下来需要告诉Vulkan渲染时候使用的f ...

  8. 说说ajax上传数据和接收数据

    我是一个脑袋不太灵光的人,所以遇到问题,厚着脸皮去请教大神的时候,害怕被大神鄙视,但是还是被鄙视了.我说自己不要点脸面,那是不可能的,但是,为了能让自己的技术生涯能走的更长远一些,受点白眼,受点嘲笑也 ...

  9. 利用base64库暴力破解base加密

    做个base加密题python语法出了一堆错误..... 附上py中关于base加密/解码的知识:http://www.open-open.com/lib/view/open1433990719973 ...

  10. 在微服务系统开发部署中使用Azure RBAC自定义角色

    Azure的官方文档介绍了如何创建用于Azure基于角色的访问控制的自定义角色(RBAC Role). 我们也可以根据同样的原理把RBAC细粒度资源管理运用于微服务产品的开发部署中.(https:// ...