由于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. 一位资深程序员大牛给予Java提升技术的学习路线建议

    15套java架构师.集群.高可用.高可扩 展.高性能.高并发.性能优化.Spring boot.Redis.ActiveMQ.Nginx.Mycat.Netty.Jvm大型分布 式项目实战视频教程 ...

  2. zabbix上监控docker

    说明 第一种方案,借助docker的python版的api,然后通过自己封装自定义脚本来做,稍微麻烦点,但是可以达到个人自定义的效果. 第二种借助国外的一位大神已经封装好的模板来做,简单省事情,不过功 ...

  3. JVM内存模型与GC算法

    1.JVM内存模型 JVM内存模型如上图,需要声明一点,这是<Java虚拟机规范(Java SE 7版)>规定的内容,实际区域由各JVM自己实现,所以可能略有不同.以下对各区域进行简短说明 ...

  4. c# typeof 与 GetType 作用与区别

    官方解释: Used to obtain the "System.Type" object for a type. A 'typeof' expression takes the ...

  5. ps中如何让图层在画布内水平居中

    下图每个小logo图案距离它们的上参考线的距离均为10px,而我们如何让图层在画布内水平居中??? 如上图中三个图层的图案是用来给Html/Css中的background属性使用的,虽然可以通过鼠标拖 ...

  6. 转: 【Java并发编程】之五:volatile变量修饰符—意料之外的问题(含代码)

    转载请注明出处:     volatile用处说明     在JDK1.2之前,Java的内存模型实现总是从主存(即共享内存)读取变量,是不需要进行特别的注意的.而随着JVM的成熟和优化,现在在多线程 ...

  7. Java运算符和流程控制

    1 运算符 1.1  比较运算符 比较运算符的结果都是boolean类型,也即是要么是true,要么是false. 比较运算符"=="不能写成"=". > ...

  8. 【1414软工助教】团队作业4——第一次项目冲刺(Alpha版本) 得分榜

    题目 团队作业4--第一次项目冲刺(Alpha版本) 作业提交情况情况 所有团队都在规定时间内完成了七次冲刺. 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目 ...

  9. 团队作业4——第一次项目冲刺(Alpha版本)6th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 24点的游戏输入是点击我们给的图片然后会输入相应的数字,之前的所做的出 现了一点问题,在把数字删掉重新输入就不行,这个问题仍然 ...

  10. 201521123085 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 要注意到在删除元素 ...