前几天遇到了一个很奇葩的问题：执行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. Building [Security] Dashboards w/R & Shiny + shinydashboard（转）

    Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...

  2. jQuery总结--版本二 事件处理函数

    一:事件处理函数 (1) one(事件名称, fn) 仅对指定事件监听一次,监听事件只会执行一次 <!DOCTYPE html> <html> <head lang=&q ...

  3. 基于TF-IDF的新闻标签提取

    基于TF-IDF的新闻标签提取 1. 新闻标签 新闻标签是一条新闻的关键字,可以由编辑上传,或者通过机器提取.新闻标签的提取主要用于推荐系统中,所以,提取的准确性影响推荐系统的有效性.同时,对于将标签 ...

  4. uibutton颜色设置

     UIColor *color = [UIColor colorWithRed:100 / 255.0 green:20 / 255.0 blue:50 / 255.0 alpha:1.0]; 

  5. [附录]Discuz X2.5 模板目录结构注释说明

    /template/default/common  公共模板目录全局加载 block_forumtree.htm  DIY论坛树形列表模块 block_thread.htm  DIY帖子模块调用文件 ...

  6. Mac OS X 安装后的简单设置

    让Mac拥有类似apt-get的功能--安装Homebrew Homebrew是一个包管理器,用于在Mac上安装一些OS X没有的UNIX工具(比如著名的wget). 国内下载地址:http://ww ...

  7. JVM高级特性-一、java内存结构区域介绍

    区域划分: java虚拟机在执行程序的过程中,将内存分为功能不同的几个区域,如下图: 此图列出了内存划分的各个区域,其中 线程私有的:程序计数器.虚拟机栈.本地方法栈 线程共享的:堆.方法区 下面,逐 ...

  8. PHP:win7 ASP.NET环境与PHP（WAMP）环境如何共存

    经验地址:http://jingyan.baidu.com/article/495ba8410f794d38b30ede89.html 笔记本以前安装过asp.net,启用了Windows的IIS服务 ...

  9. NN-Neural Network

    开始学习神经网络(Neural Network) 已有线性与逻辑回归,为什么需要用到NN 实际的应用中,需要根据很多特征进行训练分类器,当今有两个特征下,可以通过下图表述: 然而还有太多的特征需要考虑 ...

  10. JavaScript面向对象轻松入门之继承(demo by ES5、ES6)

    继承是面向对象很重要的一个概念,分为接口继承和实现继承,接口继承即为继承某个对象的方法,实现继承即为继承某个对象的属性.JavvaScript通过原型链来实现接口继承.call()或apply()来实 ...