移动端手机浏览器不支持audio标签音乐自动播放的解决方案

  • 2018-07-11
  • 52
  • 0

用HTML5的audio标签在页面中引入音频文件非常方便,如果我们想让音乐自动播放,只需给audio标签加一个autoplay属性就行了。比如这样写:

<audio src="music.mp3" autoplay></audio>

当然,audio标签还有其他一些属性,简单了解一下:

  • autoplay: 自动播放
  • preload: 预加载
  • controls: 显示播放控制台
  • loop: 引入的音频文件默认只播放一次,loop属性可以指定循环播放次数,如果不指定具体次数,则视为一直循环播放

但是设置了自动播放的音乐后,pc端浏览器一切正常,但是手机移动端浏览器(比如UC浏览器、腾讯浏览器、360浏览器、夸克浏览器等)无法实现自动播放的效果。这是因为几乎所有移动端浏览器,为了所谓的”用户体验”,都默认禁掉了audio标签的autoplay自动播放属性,必须通过用户的手动触发才可以实现播放的效果。

但是,真机实测中还是遇到了不少坑,特将经验总结如下:

解决思路是这样,给document添加一个点击(触摸)事件,在该事件中执行audio元素对象的play()方法即可。

不废话,写了个demo,直接上代码,本demo实测兼容Android和IOS系统,有问题欢迎在本文下留言交流。

对了,还要格外强调一下,演示代码中给document添加的是touchend事件,经实测touchendclick事件可以,但是touchstart事件无效,一定不要用touchstart!一定不要用touchstart!一定不要用touchstart!老孙在这里卡了好久,一开始一直用touchstart,各种属性各种控制,都不行,最后鬼使神差写了个touchend,意外得到了结果,才有了本文。别问为啥,不信邪的自己去测。

 

在线演示地址: http://www.sunqizheng.com/wp-content/uploads/2018/07/audioautoplay/

可以用手机扫描下方二维码直接打开演示地址:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>移动端音乐自动播放效果</title>
</head>
<body>

    <audio src="zhubajie.mp3" id="audio" autoplay loop></audio>
    <script type="text/javascript">
 
        var audio = document.getElementById("audio");
        document.ontouchend = function() {
            audio.play()
        }
 
    </script>


    请用手机打开本页面
    <br />
    在页面任意位置点击一下
    <br />
    就能听到音乐响起了!
    <br />
    by 孙琪峥 www.sunqizheng.com

    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 5vw;
            text-align: center;
            line-height: 1.5em;
        }
    </style>

</body>
</html>

感谢打赏!
微信
支付宝

评论

还没有任何评论,你来说两句吧

鲁ICP备18012478号-1