解决iphone 微信H5自动播放音乐问题

  • 首先， 在html中定义audio 标签的 autoplay属性
  • <audio id="musicStar" src="文件路径" autoplay="true" preload="auto" loop="loop"></audio>
  • 其次，在body结尾处添加重定义的audioAutoPlay方法
  • function audioAutoPlay(id){
        var audio = document.getElementById(id);
        var play = function(){
            audio.play();
            audio.pause();
            document.removeEventListener("touchstart",play, false);
        };
        audio.play();
        document.addEventListener("touchstart",play, false);
}
  • 最后，需要在页头微信浏览器准备好以后，调用 audioAutoPlay方法
  • document.addEventListener("WeixinJSBridgeReady", function () {
            audioAutoPlay('musicStar');
            /**musicStar为音乐audio的 id**/
    }, false);

  • 综合所有

  • <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta name="msapplication-tap-highlight" content="no">
    <script>
    /**微信环境中**/
        document.addEventListener("WeixinJSBridgeReady", function () {
            audioAutoPlay('musicStar');
        }, false);
    </script>
</head>
<body>
...
<audio id="musicStar" src="source/music.mp3" autoplay="true" preload="auto" loop="loop"></audio>
</body>
<script>
    function audioAutoPlay(id){
            var audio = document.getElementById(id);
            var play = function(){
                audio.play();
               //audio.pause(); 可以在控制打开页面不播放，在没有触屏点击的过程中的一段时间后播放，如预加载完成后播放设置audio的autoplay属性为false
                                                            
            document.removeEventListener("touchstart",play, false);
     };
            audio.play();
            audio.pause(); 
            document.addEventListener("touchstart",play, false);
    }
    //如需要加载完成后的某个时间播放，可在相应的状态先后执行暂停播放，设置音乐播放，无需点击屏幕，都可自动播放，并且点击屏幕后也不会暂停。
    //暂停播放调用
    function completeFun(){
        musicStar.pause();
        musicStar.play();
    }
</script>
</html>
posted @ 2019-07-09 14:59  37点2度  阅读(1153)  评论(0)  编辑  收藏  举报