前几天遇到了一个很奇葩的问题:执行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. 基于R语言的梯度推进算法介绍

    通常来说,我们可以从两个方面来提高一个预测模型的准确性:完善特征工程(feature engineering)或是直接使用Boosting算法.通过大量数据科学竞赛的试炼,我们可以发现人们更钟爱于Bo ...

  2. Akka(3): Actor监管 - 细述BackoffSupervisor

    在上一篇讨论中我们谈到了监管:在Akka中就是一种直属父子监管树结构,父级Actor负责处理直属子级Actor产生的异常.当时我们把BackoffSupervisor作为父子监管方式的其中一种.实际上 ...

  3. 在node.js中如何屏蔽掉favicon.ico的请求

    今天准备用node做个api出来,还没入门,遇到一个小问题,特在此记录一下! 在做路由模块的时候,发现控制台每次都会多输出一条favicon.ico的请求,对于这种又占资源,看着又碍眼的玩意,强迫症完 ...

  4. Js获取url传递过来的参数

    原理跟取cookie值一样的 function getParamer(paramer){ var url=window.location.href.split("?")[1];/* ...

  5. 发布支持多线程的PowerShell模块 —— MultiThreadTaskRunner

    应用场景 多线程在需要批量处理一些任务的时候相当有用,也更加有利于充分利用现有计算机的能力.所有主流的开发语言都支持多线程. 默认情况下,PowerShell作为一个脚本语言,是不支持多线程操作的,虽 ...

  6. jquery 根据数据库值设置radio的选中

    jsp代码: <label>性 别</label> <input type="radio" value="1" name=&quo ...

  7. 第一天上午——HTML网页基础知识以及相关内容

    今天上午学习了HTML基础知识以及相关内容,还有DW的基本使用方法. HTML(HyperText Markup Language):超文本标记语言,超文本:网页中除了包含文本文字之外,还包含了图片, ...

  8. 跨域请求,jsonp

    其实跨域请求,只需要在请求的url后面加上callback=?即可. 提供以下两种获取跨域的ajax的写法,都是基于jQuery.都已经成功使用,兼容做到ie7,(ie6未测试);案例地址来自豆瓣开放 ...

  9. 实验:Oracle数据泵导出导入之序列问题

    今天同事提出了一个问题: 使用数据泵expdp导出1个schema,有个表主键是触发器自增的id,导入测试库测试时,发现表里的数据比自增序列的值要大.导致插入数据报错. 最终结论是: 由于数据库先进行 ...

  10. 关于Dubbo分布式服务

    这篇文章写的详细,可参考 http://shiyanjun.cn/archives/1075.html