由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了。

解决方法:

首先,创建audio标签:<audio id="success_music" src="/success.mp3" preload="auto"></audio>,preload为自动加载

接下来,创建script标签,先获取audio对象

var audio_success = document.getElementById('success_music');

给页面一个触发动作:

$("#start").on('click',function(){
audio_success.play();
audio_success.pause();
$.get("/test/test", function() {
audio_success.play();
});
});

重点:

先播放,后暂停,之后的播放就没问题了

线上实际项目已应用,请不要置疑!

有需要短网址服务的,请访问:http://www.urlc.cn OR http://t.urlc.cn

100%解决ios上audio不能自动播放的问题的更多相关文章

  1. 解决ios下audio不能正常播放的问题

    解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...

  2. ios html5 audio 不能自动播放

    //修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...

  3. 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法

    由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...

  4. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

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

  5. audio微信自动播放以及自定义样式

    audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...

  6. 摇一摇—微信7.0.8版本audio无法自动播放问题

    近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...

  7. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  8. ios audio不能自动播放

    今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...

  9. audio的自动播放报错解决

    使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...

随机推荐

  1. 更符合面向对象的数据库操作方式-OrmLite

    1. jar包下载 下载地址:http://ormlite.com/releases/,一般用core和android包即可. 如果使用的是android studio,也可以直接通过module s ...

  2. Kubernetes e2e test and test framework

    前言 Kubernetes的成功少不了大量工程师的共同参与,而他们之间如何高效的协作,非常值得我们探究.最近研究和使用了他们的e2e测试和框架,还是挺有启发的. 怎样才是好的e2e测试? 不同的人写出 ...

  3. 我的acm vim 备忘

    一.從命令到編輯模式 a :当前单词后面插入Appendi :当前位置插入Inserto :当前行下新开一行插入Open new lineA :当前行尾插入AppendI :当前行首插入InsertO ...

  4. Html5笔记之第八天

    HTML字符实体 显示结果 描述 实体名称 实体编号   空格     < 小于号 < < > 大于号 > > & 和号 & & " ...

  5. 使用Groovy处理SoapUI中Json response

    最近工作中,处理最多的就是xml和json类型response,在SoapUI中request里面直接添加assertion处理json response的话,可以采用以下方式: import gro ...

  6. sed修炼系列(三):sed高级应用之实现窗口滑动技术

    html { font-family: sans-serif } body { margin: 0 } article,aside,details,figcaption,figure,footer,h ...

  7. Visual Studio2017数据库数据比较

    一.前言 上一篇文章我们介绍了如何使用VS2017对SSMS数据库进行架构比较.这一篇文章我们将继续介绍如何对SSMS数据库的数据进行比较.数据的比较也是很常见的,比如我们要比较当前版本的数据库相对上 ...

  8. VHDL学习:利用Quartus自带库3步快速完成状态机

    Quartus自带库里面有各种编程语言的模板,供开发者参考. 初学者利用VHDL实现状态机比较生疏的情况下,可以调出该模板,适当修改即可. 本文将描述如何利用Quartus自带库调出状态机模板,并适当 ...

  9. NSMutable属性声明时为什么不能使用copy

    在iOS开发里面我们经常会进行NSMutable(可变类型的类,常用的如NSMutableString,NSMutableArray,NSMutableDictionary,NSMutableData ...

  10. PHP初入,基础知识点分享(a标签&表格的嵌套&文字的处理)

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