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

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

<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. BZOJ1492:[NOI2007]货币兑换——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1492 (题目描述太长了不粘贴了……) ……………………………………………………… 我 是自己做的 抄 ...

  2. 洛谷 P4964 绫小路的特别考试 解题报告

    P4964 绫小路的特别考试 题目背景 这世界上「胜利」便是一切.无关乎过程. 要付出多少牺牲都无所谓.只要最后我「胜出」那就行了. 题目描述 一场新的特别考试来临了,这次的考试内容是(wan e d ...

  3. bzoj1656: [Usaco2006 Jan] The Grove 树木 (bfs+新姿势)

      题目大意:一个n*m的图中,“.”可走,“X”不可走,“*”为起点,问从起点开始绕所有X一圈回到起点最少需要走多少步. 一开始看到这题,自己脑洞了下怎么写,应该是可过,然后跑去看了题解,又学会了一 ...

  4. NOIP2016Day2T3愤怒的小鸟(状压dp) O(2^n*n^2)再优化

    看这范围都知道是状压吧... 题目大意就不说了嘿嘿嘿 网上流传的写法复杂度大都是O(2^n*n^2),这个复杂度虽然官方数据可以过,但是在洛谷上会TLE[百度搜出来前几个博客的代码交上去都TLE了], ...

  5. java 解析http返回xml数据

    //post 请求 private static String sendPost(String url, String urlParameters) throws Exception { URL ob ...

  6. Chrome浏览器的使用技巧

    查询Chrome浏览器自身的DNS缓存 在浏览器的地址栏输入:chrome://net-internals/#dns 在左侧的菜单栏,点击对应菜单可以查看对应选项的相关内容. 在Chrome浏览器中输 ...

  7. XML 树结构,语法规则,元素,属性,验证及其解析

    XML 文档形成了一种树结构,它从"根部"开始,然后扩展到"枝叶". 一个 XML 文档实例 XML 文档使用简单的具有自我描述性的语法: <?xml v ...

  8. mybatis主键返回的实现

    向数据库中插入数据时,大多数情况都会使用自增列或者UUID做为主键.主键的值都是插入之前无法知道的,但很多情况下我们在插入数据后需要使用刚刚插入数据的主键,比如向两张关联表A.B中插入数据(A的主键是 ...

  9. X210串口配置与stdio移植

    串口控制器初始化关键步骤 (1)初始化串口的Tx和Rx引脚所对应的GPIO(查原理图可知Rx和Rx分别对应GPA0_1和GPA0_0) (2)GPA0CON(0xE0200000),bit[3:0] ...

  10. ExecuteNonQuery,ExecuteReader,ExecuteScalar 区别

    ExecuteNonQuery方法 :执行非查询SQL操作,包括增insert.删delete.改update ExcuteReader方法 :执行查询,返回DataReader,通过DataRead ...