data() {
return {
isOff:true
}
},
mounted() {
// 自動播放音樂效果，解決微信自動播放問題
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完畢，重新循環播放
oAudio.load();
oAudio.play();
}
},
methods: {
changeOn(){
let oAudio = document.querySelector("#audio");
if(this.isOff){
oAudio.play();//讓音頻檔案開始播放
}else{
oAudio.pause();//讓音頻檔案暫停播放
}
this.isOff = !this.isOff;
},
audioAutoPlay() {
let audio = document.getElementById('audio');
this.isOff = false;
audio.play();
document.removeEventListener('touchstart',this.audioAutoPlay);
}
}
bty…理論上vue是無法自動播放，需要借助微信的一個接口，注意在其他頁面做監聽無法接收到微信的回調，一定要在App.vue頁面，放上這一段：
mounted() {
this.audioAutoPlay('audio');
// 自動播放音樂效果，解決微信自動播放問題
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完畢，重新循環播放
oAudio.load();
oAudio.play();
}
},