vue項目背景音樂自動播放 我用了audio標簽。如下：
問題所在：某些瀏覽器為了用戶不受打擾驚嚇伟阔，不允許自動播放音樂，視頻等。一部分瀏覽器又允許自動播放
解決方案：在audio標簽上添加autoplay屬性喷斋。能自動播放的瀏覽器自動播放唁毒。再給window加個點擊事件監(jiān)聽。不能自動播放的瀏覽器星爪，只要用戶點擊了頁面任何地方浆西，自動開啟背景音樂播放。
html
<audio v-if="bgmUrl" loop ref="mAudio" autoplay @play="startMusic" style="display: none" >
<source :src="bgmUrl" />
</audio>
<!-->音樂開關(guān) <-->
<div>
<span class=" iconfont" :class="{'iconyinle':!musicState,'iconyinle1 xuan-z-m':musicState}" @click.stop="changeMS"></span>
</div>
<!-->百度搜索阿里圖標庫顽腾，找到想要的圖標近零。一個用作音樂播放狀態(tài)，一個用作音樂停止狀態(tài) <-->
<!-->這里的iconfont抄肖，iconyinle久信，iconyinle1為阿里圖標庫的圖標類名。阿里圖標轉(zhuǎn)為字體圖標漓摩。網(wǎng)上搜教程即可<-->
js
data(){
return{
bgmUrl:require('../../assets/bgm.mp3')
musicState:false//記錄音樂播放狀態(tài) true為播放
}
},
mounted:{
window.addEventListener('click',this.playMusic,true)
}
methods:{
startMusic(){//音頻開始播放時（@play）
this.musicState = true
// this.$refs.mAudio.volume = 0.2 //初始音量
window.removeEventListener('click',this.playMusic,true)//移除點擊事件監(jiān)聽
},
playMusic(){//當音樂需要自動播放時
if (this.$refs.mAudio.paused) {
this.$refs.mAudio.play()
}
},
changeMS() {//改變音頻播放狀態(tài)
if (this.$refs.mAudio.paused) {
this.$refs.mAudio.play()
} else {
this.$refs.mAudio.pause()
this.musicState = false
}
},
}
css
/*音樂播放時的音樂開關(guān)旋轉(zhuǎn)效果*/
.xuan-z-m{
animation: rotate 3s linear infinite;
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(360deg)}
}
感謝閱讀本文裙士。我也是個前端新手，在此記錄一下項目中遇到的問題及解決方式幌甘。歡迎高人指點
