由于瀏覽器限制的原因，不允許自動播放audio音頻，嘗試網上的方法后也沒有進展（如果有解決方法，歡迎評論~）
一、首先創(chuàng)建?audio?標簽
<audio class="g-back-music" src="" ref="backMusicRef" loop preload hidden autoplay></audio>二、因為在頁面刷新后需要先執(zhí)行動畫，動畫完成后才去播放音樂，所以在執(zhí)行?mounted?函數時，先加載音樂源
mounted() {
if(this.sGetCurrentMusicSrc) {
// 存在背景音樂，加載音樂源
this.$refs.backMusicRef.src = this.sGetCurrentMusicSrc;
}
}三、在動畫完成后，進行背景音樂的初始化
? ? ? ? 1.?執(zhí)行?audio?標簽的play方法（目前來看安卓自帶瀏覽器是支持自動播放的）
? ? ? ? 2.?微信瀏覽器的處理（如果不加，IOS微信端就不支持自動播放了）
? ? ? ? 3.?增加事件監(jiān)聽（PC端?click事件、手機端?touchstart?事件）
? ? ? ? 4.?變量說明：bIsMusicPlay（控制音樂是否播放）
// 初始化音樂
fnMusicInit() {
this.$refs.backMusicRef.play().then(() => {
this.bIsMusicPlay = true;
}).catch(()=> {
this.bIsMusicPlay = false;
})
if(navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
// 微信瀏覽器
WeixinJSBridge.invoke('getNetworkType', {}, ()=> {
this.$refs.backMusicRef.play().then(()=> {
this.bIsMusicPlay = true;
}).catch(()=> {
this.bIsMusicPlay = false;
})
});
}
let fnPlay = (event)=> {
let className = event.target.className;
if(typeof className === 'object' || typeof className === 'string' && !className.includes('g-music')) {
// 點擊非音樂開關按鈕，播放音樂
this.$refs.backMusicRef.play().then(()=> {
this.bIsMusicPlay = true;
}).catch(()=> {
this.bIsMusicPlay = false;
})
}
let type = 'ontouchstart' in document.documentElement ? 'touchstart' : 'mousedown';
// 最后記得移除監(jiān)聽
document.removeEventListener(type, fnPlay);
}
// 監(jiān)聽用戶主動操作
if('ontouchstart' in document.documentElement) {
document.addEventListener('touchstart', fnPlay)
} else {
document.addEventListener('mousedown', fnPlay)
}
}四、音樂的播放，暫停
fnMusicOpera(type) {
if(type === 'play') {
// 播放
this.$refs.backMusicRef.play().then(()=> {
this.bIsMusicPlay = true;
}).catch(()=> {
this.bIsMusicPlay = false;
})
} else {
// 暫停
this.$refs.backMusicRef.pause();
this.bIsMusicPlay = false;
}
}提示
替換音樂源后，需要手動暫停音樂，防止在音樂關閉的情況下自動播放文章來源：http://www.zghlxwxcb.cn/news/detail-508629.html
參考鏈接：https://www.panyanbin.com/article/2940754d.html文章來源地址http://www.zghlxwxcb.cn/news/detail-508629.html
到了這里，關于audio音頻不能自動播放的解決方法的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
