本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾。

刚开始一切都很顺利,自然而然的写了以下代码。

<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自动播放问题的更多相关文章

  1. 移动端audio自动播放问题

    中秋临近,心血来潮想做个手机端贺卡,以前接触的移动端较少,虽然是个简单的贺卡,其实也蛮多坑的,简略说一下在制作贺卡的过程遇到的坑: 一:移动端的屏幕大小不能算作body的大小,因为手机浏览器头部都有网 ...

  2. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  3. HTML5中的audio在手机端和 微信端的自动播放

    再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的 通常解决方法是给一个交互事件,一定要是交互事件 标签:<aud ...

  4. iOS下Audio自动播放(Autoplay)音乐

    前几天做了一个H5活动页面,产品要求初始化播放音乐,因晓得H5 Audio标签支持Autoplay就没在意. 完了在手机上测试,发现手机上打开页面死活就是不会自动播放,点击播放按钮才可以播放,很是纠结 ...

  5. html5 -audio-移动端如何自动播放

    最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...

  6. ios设置音乐audio自动播放

    因为audio标签的自动播放:autoplay.在ios系统中不能自动播放,此时需要设置,在进入页面自动播放音乐. 第一步,先引入js微信 <script src="js/jweixi ...

  7. autoplay移动端不能自动播放

    本文总结自:https://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad 首先,自动播放 ...

  8. 微信audio自动播放(ios播放问题)

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

  9. audio标签的自动播放(ios)

    0.应用场景 前端移动端开发,经常有播放音乐的需求.比如我有公司做过类似支付宝的年度账单,功能是用户在查看年度账单的过程中播放轻音乐. 1.audio标签播放mp3 (一)常用属性和API介绍 1.c ...

随机推荐

  1. BZOJ3172:[TJOI2013]单词——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单 ...

  2. HDU2222:Keywords Search——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=2222 题目大意: 给定 n 个长度不超过 50 的由小写英文字母组成的单词,以及一篇长为 m 的文章,问有多少个 ...

  3. javascript push 和 concat 的区别

    array.push(item1,item2,item3...) array.concat(item1,item2,item3...) 1. push和concat的元素都既可以是普通元素(任意类型) ...

  4. 调整KVM虚拟机硬盘大小

    KVM虚拟机的硬盘映像默认存放在“/var/lib/libvirt/images/”中,先查看你的硬盘映像格式是不是RAW格式: qemu-img info /var/lib/libvirt/imag ...

  5. bzoj 1568 [JSOI2008]Blue Mary开公司 超哥线段树

    [JSOI2008]Blue Mary开公司 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 1808  Solved: 639[Submit][Sta ...

  6. HDU3524 数论

    Perfect Squares Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  7. git代码冲突

    如果系统中有一些配置文件在服务器上做了配置修改,然后后续开发又新添加一些配置项的时候, 在发布这个配置文件的时候,会发生代码冲突: error: Your local changes to the f ...

  8. 仿微信中加载网页时带线行进度条的WebView的实现

    finddreams:http://blog.csdn.net/finddreams/article/details/44172639 为了仿微信中加载网页时带进度条的WebView的实现,首先我们来 ...

  9. Robot Framework 常用关键字使用方法

    1. Select From Listid=sourceConnoracle_source 从下拉框选取值. 2. Select Radio button  name value 选择单选框.也可以点 ...

  10. 多种方法过Codeforces Round #270的A题(奇偶法、打表法和Miller_Rabin(这个方法才是重点))

    题目链接:http://codeforces.com/contest/472/problem/A 题目: 题意:哥德巴赫猜想是:一个大于2的素数一定可以表示为两个素数的和.此题则是将其修改为:一个大于 ...