iphone 微信打开H5自动播放音乐问题

来源：互联网发布：咫尺网络微页编辑：程序博客网时间：2024/05/17 22:34

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

——由于苹果的ios系统的安全保护较严格，iphone手机打开微信H5的时候（针对于已对audio标签设置 autoplay为true的H5），通常要先点击屏幕，才能触发音乐播放，经过研究，有更简便的方法可以处理。

处理方法

首先，在html中定义audio 标签的 autoplay属性

<audio id="musicStar" src="source/music.mp3" 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>

综上解决了ios中微信H5打开自动播放音乐的问题,如果需要在页面预加载后再进行播放，可按照代码中的提示设置。

阅读全文

1 0