关于移动端audio自动播放问题
本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾。
刚开始一切都很顺利,自然而然的写了以下代码。
<audio id="myaudio" >
<source src="/static/warn.mp3" type="audio/mpeg">
</audio> <script>
var tt;
function audioPlay(){
document.getElementById("myaudio").play();
tt = setTimeout(audioPlay, 5000);
} function audioLoad(){
document.getElementById("myaudio").pause();
}
</script> // 触发播放
audioPlay(); //清除定时任务
clearTimeout(tt);
随意在PC端测试了下,完美,然后我就没管它了....直到有一天,一时兴起拿起手机打开来看,结果发现没声音。PC端是正常的,没理由手机不行,初步怀疑是浏览器音频兼容性问题。
经过多方查证,居然是移动端做了限制,一定要用户交互才能触发,网上的解决方案大多是通过touchstart事件。
附上一个简单的JS做参考
https://github.com/MauriceButler/simple-audio
至于最终的解决方案..因为我这边只是内部使用,所以选择了万能的谷歌浏览器
chrome://flags/#disable-gesture-requirement-for-media-playback
开启这个flags完美解决。
关于移动端audio自动播放问题的更多相关文章
- 移动端audio自动播放问题
中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...
- video 在iphone手机的ios系统和微信端无法自动播放
描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...
- HTML5中的audio在手机端和 微信端的自动播放
再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...
- iOS下Audio自动播放(Autoplay)音乐
前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...
- html5 -audio-移动端如何自动播放
最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...
- ios设置音乐audio自动播放
因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...
- autoplay移动端不能自动播放
本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...
- 微信audio自动播放(ios播放问题)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- audio标签的自动播放(ios)
0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...
随机推荐
- BZOJ5339:[TJOI2018]教科书般的亵渎——题解
https://www.lydsy.com/JudgeOnline/problem.php?id=5339 https://www.luogu.org/problemnew/show/P4593 小豆 ...
- 有序数列第K小
有序数列第K小 题目描述 给出两个长度分别为\(n,m\)的单调非递减数列,求出它们合并后的第\(k\)小值. 输入输出格式 输入格式: 第一行三个数,\(n,m,k\)如题意所述: 第二行\(n\) ...
- (ex)BSGS题表
学了一下BSGS大概知道他是什么了,但是并没有做什么难题,所以也就会个板子.普通的BSGS,我还是比较理解的,然而exBSGS我却只理解个大概,也许还会个板子......(这个东西好像都会有一群恶心的 ...
- BigDATA面试题
Big Data 面试题总结 JAVA相关 1-1)List 与set 的区别? 老掉牙的问题了,还在这里老生常谈:List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复 ...
- swift4.0闭包
http://blog.csdn.net/bddzzw/article/details/78276054
- linux环境下,接着lnmp,安装redis
linux环境下,安装redis 操作记录: 回到家目录 cd ~查看 ls进入 lump cd lnmp1.3-fullls??? sudo ./addons.sh //---进入后选 ...
- Linux下find命令及其参数的使用
find命令原理:从指定的起始目录开始,递归地搜索其各个子目录,查找满足寻找条件的文件,并可以对其进行相关的操作. 格式:find [查找目录] [参数] [匹配模型] 多参数格式:find [查找目 ...
- Python爬虫学习笔记之模拟登陆并爬去GitHub
(1)环境准备: 请确保已经安装了requests和lxml库 (2)分析登陆过程: 首先要分析登陆的过程,需要探究后台的登陆请求是怎样发送的,登陆之后又有怎样的处理过程. 如果已经 ...
- [C#] 类型学习笔记三:自定义值类型
既前两篇之后,这一篇我们讨论通过struct 关键字自定义值类型. 在第一篇已经讨论过值类型的优势,节省空间,不会触发Gargage Collection等等. 在对性能要求比较高的场景下,通过str ...
- mysql 添加字段 修改字段为not null
添加一个字段 ALTER TABLE jw_user_role ADD zk_env VARCHAR(16); 修改字段为not null,还要把原来的类型也写出来 ALTER TABLE jw_us ...