实际情形:
今天在公司做一个微页的项目,涉及到在微信里面点击链接或者是扫描二维码,打开链接的时候,自动播放音乐。
这个功能是非常简单的,直接在HTML页面插入如下代码即可。
<audio src="1.mp3" autoplay="autoplay" controls></audio>
如果使用安卓手机进行访问页面的话,是没有什么错误的,音乐能正常自动播放。但是如果是使用ios设备访问页面的话,音乐是不能自动播放的。
原来是苹果公司考虑到用户可能是用手机流量访问的情况,为了用户流量着想,所以需要用户交互后才能播放。
但是我的这个项目要求网页,必须自动进行播放音乐,于是便有了下面的解决办法。
解决办法:
- 首先,我们要给页面中的
<audio>
标签添加一个id="bg-music"
。因为我们要在后面的js代码中,使用这个id="bg-music"
获取到<audio>
标签
<audio id="bg-music" src="1.mp3" autoplay="autoplay" controls></audio>
- 然后,我们将下面这些代码复制到自己的js代码中,就可以实现ios设备自动播放音乐。或者是赋值下面这些代码,粘贴到新创建的js脚本文件,然后在HTML页面引入该脚本文件即可。
// DOM中的内容加载完毕之后,调用函数
document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
function musicInWeixinHandler() {
musicPlay(true);
document.addEventListener("WeixinJSBridgeReady", function () {
musicPlay(true);
}, false);
document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);
}
function musicPlay(isPlay) {
var media = document.querySelector('#bg-music');
if (isPlay && media.paused) {
media.play();
}
if (!isPlay && !media.paused) {
media.pause();
}
}