解决微信IOS不能自动播放音频问题

坑爹的H5 audio一直有兼容性问题,特别是微信端ios和android自动播放问题,ios不能自动播放。我之前的解决方案是使用trigger 模拟用户点击实现ios也能自动播放。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微信端音频自动播放</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
    body{
        overflow:hidden;
    }
</style>
<body>
    <audio src="http://mp3.haoduoge.com/s/2017-03-28/1490672173.mp3" loop="" id="audio"></audio>
</body>
<script type="text/javascript">
// 微信端控制播放音乐
document.addEventListener('WeixinJSBridgeReady',function(){//这里相当于加载音频文件
	audio.play();
	audio.pause();
});
setTimeout(function(){//模拟ajax完成后播放音乐
	audio.play();
    console.log('请带上您的耳机...');
},2000)
//如果是PC端直接调用audio.play()即可播放音乐
</script>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 解决微信IOS不能自动播放音频问题

分享到:更多 ()

发表评论 0