使用HTML5播放音频在移动端不能循环

做了一个H5页面,需要一个mp3做为背景音乐,在PC端调试没问题,然后用手机扫码打开结果就不能循环播放,记录踩过的坑

  • 最开始是这样的
<audio src="music.mp3" autoplay="autoplay" class="music-audio" id="audio" loop="loop"></audio>

PC端没问题,无限循环播放,可是手机端就只播放一遍,各种度娘~~~,终于找到方法,如下

 <script>
       $(function(){
         var myAudio = document.getElementById('audio');
            myAudio.addEventListener('ends',loopAudio,false);

       })
        function loopAudio(){
            var myAudio = document.getElementById('audio');
            myAudio.play();
        }
    </script>

以为搞定了,准备去交付,突然发现,android系统的循环播放没问题,ios的压根不出声了,继续找万能的度娘,因为同事用的是qq里面直接打开,猜测是不是因为qq/微信内嵌的浏览器问题,尝试解决

    <script>
        document.addEventListener('DOMContentLoaded',
            function () {
                function audioAutoPlay() {
                    var audio = document.getElementById('audio');
                    audio.play();
                    document.addEventListener("WeixinJSBridgeReady",
                        function () {
                            audio.play();
                        },
                        false);
                }
                audioAutoPlay();
            });
    </script>

测试一下,OK,android、IOS果然都可以了,略坑爹啊

上一篇:nuxt+axios解决前后端分离SSR


下一篇:.net连接数据库语法