解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）

问题描述：项目需要在页面加载完成后自动播放音乐，但在ios中却无法自动播放，需要用户主动触发

解决办法：

$('html').one('touchstart',function(){
document.getElementById('audio2').play();
});

（只触发一次）

解决在微信浏览器中ios audio无法自动播放

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no"/>
<title>IOS微信</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
//原来是在微信易信执行Ready之前，先注册事件，所以放在所有请求的最前面
document.addEventListener("WeixinJSBridgeReady", function () {
    audioAutoPlay('Jaudio');//给个全局函数
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
    audioAutoPlay('Jaudio');//给个全局函数
}, false);
</script>
<!-- 加载css放这里 -->
</head>
<body>
  
<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop">
</audio>
  
<script>
function audioAutoPlay(id){//全局控制播放函数
    var audio = document.getElementById(id),
        play = function(){
            audio.play();
            document.removeEventListener("touchstart",play, false);
        };
    audio.play();
    document.addEventListener("touchstart",play, false);
}
 
var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase());
if(!isAppInside){//给非微信易信浏览器
  audioAutoPlay(Jaudio);
}
</script>
</body>
</html>

 

posted @ 2017-03-24 11:20  Sonya·Lv  阅读(413)  评论(0)  编辑  收藏  举报