前几天遇到了一个很奇葩的问题：执行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. id 生成器介绍

    背景介绍 在一般的业务场景中, 初始的时候简单的自增数(比如MySQL 自增键)就可以很好的满足需求, 不过随着业务的发展和驱动, 尤其是在分布式的场景中, 如何生成全局的唯一 id 便成了需要慎重考 ...

  2. nodeJS之fs文件系统

    前面的话 fs文件系统用于对系统文件及目录进行读写操作,本文将详细介绍js文件系统 概述 文件 I/O 是由简单封装的标准 POSIX 函数提供的. 通过 require('fs') 使用该模块. 所 ...

  3. sql定时自动备份(定时作业)

    第一步: 右键启动"SQL Server 代理"

  4. （转）java匿名内部类详解

    原文:http://android.blog.51cto.com/268543/384844/   内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态static的 ...

  5. 关于php网络爬虫phpspider。

    前几天,被老板拉去说要我去抓取大众点评某家店的数据,当然被我义正言辞的拒绝了,理由是我不会...但我的反抗并没有什么卵用,所以还是乖乖去查资料,因为我是从事php工作的,首先找的就是php的网络爬虫源 ...

  6. python实现微信接口(itchat)

    python实现微信接口(itchat) 安装 sudo pip install itchat 登录 itchat.auto_login() 这种方法将会通过微信扫描二维码登录,但是这种登录的方式确实 ...

  7. 使用 Python 进行并发编程 -- asyncio (未完)

    参考地址 参考地址 参考地址 Python 2 时代, 高性能的网络编程主要是使用 Twisted, Tornado, Gevent 这三个库. 但是他们的异步代码相互之间不兼容越不能移植. asyn ...

  8. IBM新合作伙伴计划助力企业转型升级

        IBM作为老牌企业,一直在引领者技术方面的变革.当IBM再一次从自我革新开始,期望能够更快的将认知计算和云推广给自己的合作伙伴和用户们,以帮助他们在新的转型期内,能够快人一步.         ...

  9. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  10. PHP加密解密的函数

    <?php class Encryption { /* *功能:对字符串进行加密处理 *参数一:需要加密的内容 *参数二:密钥 */ function encrypt($str,$key){ / ...