如果我们想要在一个页面自动播放背景音乐或是其他音频,比如ios是没办法调用audio.play()事件直接调用,非得添加手动点击事件才可以。接下来就说说我在项目里遇到的困难和解决办法.
情况1、我们知道安卓是可以直接调用音频的play事件的,ios不行。如是在单独的h5页面,无路由,这种情况就必须加个引导按钮点击它,或是在页面全局设置一个点击事件one,当用户第一次且仅第一次碰到页面就播放。这里用vue距举例:
methods: {
playBgMusic () {
let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isiOS) this.bgMusic.play();
}
}
mounted(){
this.bgMusic = new Audio();
this.bgMusic.loop = true;
this.bgMusic.src = require('xxx.mp3');
this.bgMusic.load();
this.bgMusic.play();
}
情况2、如果是当用户使用hash或者有路由跳转的情况,可以使用在跳转页添加全局audio对象的方式来控制。这里使用vue举例:首先可在router/index.js里设置window.audio=null,在跳转前的页面new一个video 并将此对象赋予window.audio,然后即可在下一个页面使用audio对象。代码:
/*router/index.js*/
window.bgMusic=null;
/*跳转页面 router/beforeGo.js 跳转事件*/
跳转到自动播放音乐的页面
methods: {
goTo () {
const audio = new Audio();
audio.addEventListener('canplay', () => {audio.play()});
audio.loop = true;
audio.src = mathBgVoice;
audio.load();
bgMusic = audio;
this.$router.replace('自动播放音乐的页面路由')
}
}
情况3:如果你的业务主要是在微信上,那么可以使用以下代码,可实现在微信浏览器中iOS和安卓设备中自动播放音频的效果:
var play = function() {
document.removeEventListener("WeixinJSBridgeReady", play);
document.removeEventListener("YixinJSBridgeReady", play);
audioCtx.play();
};
document.addEventListener("WeixinJSBridgeReady",play, false);
document.addEventListener('YixinJSBridgeReady', play, false);
这样处理以后,在跳转页面先寻找播放时机,等跳转到播放音乐的页面即可实现‘自动播放背景音乐’的功能。