前几天遇到了一个很奇葩的问题:执行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语言的导数计算(转)

    转自:http://blog.fens.me/r-math-derivative/ 前言 高等数学是每个大学生都要学习的一门数学基础课,同时也可能是考完试后最容易忘记的一门知识.我在学习高数的时候绞尽 ...

  2. python 之走坑的道路

    ### python之 继续走函数的坑 上篇文章简单介绍了函数的一些简单的使用,这次继续踩函数的坑1.函数对象 函数其实也可以当做一个参数传给另一个函数,也可以使用赋值的方式来给另一个,而且这两个的内 ...

  3. Qt之添加图标

    导读: 在使用Qt Creator编写完应用程序后,设置release版的应用程序图标着实困扰了不少的人.一个漂亮的图标是一个软件的脸,没有一个漂亮的图标,那么这个程序是不完整的.那么我们来看看如何设 ...

  4. CSS小技巧-煎蛋的画法~

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

  5. iOS11和机器学习CoreML库

    随着iOS11的发布,苹果公司也正式加入了机器学习的战场.在新的iOS11中内置了CoreML,虽然还是Beta版本,但是功能已经非常强大了. 在这个CoreML库里面,已经集成了一些训练好的模型,可 ...

  6. mac下sublime text3 安装px转rem插件

    本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...

  7. div+css的属性

    div+css的属性 gCascading Style Sheet 层叠式样式表 ==> 层叠样式表 Internal Style Sheet 内部样式表 External Style Shee ...

  8. vue动画的用法

    vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...

  9. 学习总结------用JDBC连接MySQL

    1.下载MySQL的JDBC驱动 地址:https://dev.mysql.com/downloads/connector/ 为了方便,直接就选择合适自己的压缩包 跳过登录,选择直接下载 下载完成后, ...

  10. 非滤波单目视觉slam笔记1

    非滤波单目视觉slam 主要分为以下8部分 数据类型 数据关联 初始化 位姿估计 地图维护 地图生成 失效恢复 回环检测 数据类型 直接法(稠密,半稠密) 基本原理是亮度一致性约束,\(J(x,y) ...