坑爹的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不能自动播放音频问题
前端ABC