步骤1.注释html
步骤2. js创建audio标签,设置属性
// 下面是处理ios播放的bug
var audio_thisData=''
audio_thisData = document.createElement("audio");
audio_thisData.src = 'static/music.mp3';
if (/iphone/i.test(navigator.userAgent)) {
audio_thisData.loop="loop" //循环播放
}
audio_thisData.play();
// 解决ios audio无法自动播放、循环播放的问题
var state = 0;
document.addEventListener('touchstart', function(){
if(state==0){
audio_thisData.play();
state=1;
}
}, false);
document.addEventListener("WeixinJSBridgeReady", function () {
audio_thisData.play();
}, false);`
//循环播放
audio_thisData.onended = function () {
audio_thisData.load();
audio_thisData.play();
}
步骤3.点击关闭音乐播放
步骤4.处理在微信app打开能播放,是在script中,在vue的区域外面,试试能不能移动到mounted生命周期里面
var ua = navigator.userAgent.toLowerCase()
if(ua.match(/MicroMessenger/i)=="micromessenger") {
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audiodcv = document.getElementById('musicfx');
audiodcv.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audiodcv.play();
}, false);
}
audioAutoPlay();
});
}
步骤5: 生命周期销毁播放暂停音乐,处理后台关闭音乐播放的问题
destroyed() {
audio_thisData.pause();
},