zoukankan      html  css  js  c++  java
  • 关于移动端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完美解决。

  • 相关阅读:
    JS从后台获取数据,前台动态添加tr标签中的td标签
    Java方式导出EXCEL表格
    框架搭建相关博文
    Spring框架相关博文集
    Eclipse相关工具使用
    关于Spring Boot的博客集合
    Springboot spring data jpa 多数据源的配置01
    springboot1.X 到2.X 的改变
    Spring-Boot devtools项目自动重启
    JSR 303
  • 原文地址:https://www.cnblogs.com/letong/p/4925785.html
Copyright © 2011-2022 走看看