这次在微信项目中用到了背景音乐,要求加载完成后自动播放。
首先想到的肯定是audio标签啊,加上autoplay属性就可以了吧,于是就有了下面的代码:
<audio loop autoplay="autoplay" controls id="bgMusic" src="./music/musicMin.mp3"></audio>用安卓接测试,没啥毛病,可是到了苹果机上就没反应了
怎么回事呢?上网一查,原来是苹果手机怕用户是在流量状态下,如果自动播放将会消耗大量流量,所以很贴心的默认设置了媒体文件不能自动播放,即便是设置了autoplay也是无效的,必须用户自己点击才能播放。这可咋办?
于是就有了下面的解决办法:
首先引入微信的js:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>然后写自动播放的js:
<script>
var audio = document.getElementById('bgMusic');
function audioAutoPlay(audio) { audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); document.addEventListener('YixinJSBridgeReady', function () { audio.play(); }, false); } audioAutoPlay(audio);//audio标签的id
</script>
这样就解决了苹果在微信里不能自动播放背景音乐的难题