100%解决ios上audio不能自动播放的问题
由于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不能自动播放的问题的更多相关文章
- 解决ios下audio不能正常播放的问题
解决ios下audio不能正常播放的问题 ios系统下会自动屏蔽audio标签的自动播放,需要使用一个事件来驱动音频播放 this.$refs.startaudio.addEventListener( ...
- ios html5 audio 不能自动播放
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可 Xut.fix = Xut.fix||{}; if (Xut.plat.isBrowser & ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- audio微信自动播放以及自定义样式
audio标签如下: <audio id="audioTag" src="" autoplay="autoplay" controls ...
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- iOS 微信 音频 视频自动播放
iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165
- ios audio不能自动播放
今天做了一个简单的落地页项目,就是类似于手机微信上经常看到的滑动效果.因为公司要求需要自己开发,所以我就用swiper+swiper.animate开发,开发速度很快,只不过最后音乐哪里出现了一点小b ...
- audio的自动播放报错解决
使用audio标签时,当前页面没有进行交互时,比如用户刷新了页面后,play()调用就会报错,如下图 查找资料后,发现是2018年4月以后,chrome浏览器对这块进行了优化,为了节约流量,禁止了自动 ...
随机推荐
- poj 2492 a bug's life 简单带权并查集
题意大致为找同性恋的虫子.... 这个比食物链要简单些.思路完全一致,利用取余操作实现关系之间的递推. 个人感觉利用向量,模和投影可能可以实现具有更加复杂关系的并查集. #include<ios ...
- 关于transient和static的序列化和反序列化
做java开发有段时间了,最近没那么忙了,抽了点时间看了下java的源码 . 在读源码的时候看到了一个 transient 修饰的变量 ,字面意思是瞬变的.在以前的开发过程中也没用到过这个修饰语,查了 ...
- VS2015 'utf-8' codec can't decode byte
近日装好Visual Studio 2015 和PTVS准备练习Python开发,遇到一个棘手的问题,编码错误,提示如下: SyntaxError: (unicode error) 'utf-8' c ...
- [js高手之路]this知多少
this关键字在javascript中的变化非常的灵活,如果用的不好就非常恶心,用的好,程序就非常的优雅,灵活,飘逸.所以掌握this的用法,是每一个前端工程师必知必会的.而且这个也是一些大公司笔试中 ...
- STL中的二分查找———lower_bound,upper_bound,binary_search
关于STL中的排序和检索,排序一般用sort函数即可,今天来整理一下检索中常用的函数——lower_bound , upper_bound 和 binary_search . STL中关于二分查找的函 ...
- 201671010121 2016-2017-2《java程序设计》第一周学习总结
之前学了些C语言,学的也不是太懂,还算能读懂一些简答的代码吧,我觉得这就是进步.刚步入大二,在计算机这个专业里不刻苦是不行的.但是,到我拿到Java书的时候,真心是吓住我了,好厚的一本书啊,不过在老师 ...
- C++栈和堆的生长方向
C++内存区域分为5个区域.分别是堆,栈,自由存储区,全局/静态存储区和常量存储区. 栈:由编译器在需要的时候分配,在不需要的时候自动清除的变量存储区.里面通常是局部变量,函数参数等. 堆:由new分 ...
- css常用文本属性
[CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...
- Spring中实现文件上传
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt110 实现图片上传 用户必须能够上传图片,因此需要文件上传的功能.比较常见 ...
- (3)ES6解构赋值-对象篇
对象的解构赋值(可以不按顺序,但是key必须一样否则为undefined) //demo1 var {name,age} = { name: "Jewave", age:26 }; ...