?

?

如果只是單純想要加一個可以循環播放不受控制的背景音樂

<!--sound-->
<!-- 音效 -->
<audio id="SGsound" src="" webkit-playsinline="true" playsinline="true" preload></audio>
<!--END sound-->
<!--加入 webkit-playsinline="true" playsinline="true" 解決谷歌瀏覽器 Uncaught (in promise) DOMException: Failed to load because no supported source was found. 報錯-->

在App.vue的created(){}里面加入

window.soundEffect = {/**播放、暫停、停止音頻，音頻文件默認循環播放，不自動播放*/controlSound(sel, status, soundUrl) {status || (status = "play");var SGsound = document.querySelector(sel);soundUrl &&(!SGsound.src || SGsound.src.indexOf(soundUrl) == -1) &&(SGsound.src = soundUrl);switch (status) {case "play":if (SGsound) {SGsound.currentTime && (SGsound.currentTime = 0);SGsound.play();}break;case "pause":SGsound.pause();break;case "stop":SGsound.pause();SGsound.currentTime = 0;break;}},//播放提示音play(soundUrl) {this.controlSound("#SGsound", "play", soundUrl);},//停止播放提示音stop() {this.controlSound("#SGsound", "stop");},// 【自定義通用音效方法】________________________//播放按鈕提示音playBtnEffectSound(soundFileName) {let soundUrl = `static/sound/btn/${soundFileName}.mp3`; // 播放不一樣的提示語音this.play(soundUrl);},//播放拍一拍提示音playPatFaceEffectSound(soundFileName) {let soundUrl = `static/sound/btn/pat/${soundFileName}.mp3`;this.play(soundUrl);},/*開機進入登錄頁面音效（windows7音效）*/open() {this.playBtnEffectSound("open");},/*鼠標移入音效*/over() {this.playBtnEffectSound("over");},over_short() {this.playBtnEffectSound("over-short");},over_light() {this.playBtnEffectSound("over-light");},/*鼠標點擊音效*/click() {this.playBtnEffectSound("click");},/*鼠標加載完畢音效*/enter() {this.playBtnEffectSound("enter");},/*鎖屏點擊音效（windows注銷音效）*/lock() {this.playBtnEffectSound("lock");},lock_win7() {this.playBtnEffectSound("lock-win7");},/*退出點擊音效（windows退出音效）*/logout() {this.playBtnEffectSound("logout");},/*禁止音效*/disabled() {this.playBtnEffectSound("disabled");},/*報錯音效*/error() {this.playBtnEffectSound("error");},/*信息提示音效（ios提示音效）*/info() {this.playBtnEffectSound("info");},info_win7() {this.playBtnEffectSound("info-win7");},/*操作成功音效*/success() {this.playBtnEffectSound("success");},/*警告音效*/warning() {this.playBtnEffectSound("warning");},/*疑問確認音效*/question() {this.playBtnEffectSound("question");},/*登錄成功音效*/login() {this.playBtnEffectSound("login");},//播放拍一拍音效 ________________________pat(index = 1) {this.playPatFaceEffectSound("pat" + index);}},

?在需要播放音樂的vue文件里面method加入

soundEffect.success(); //播放成功音效…soundEffect.播放音樂的方法名(); 

總結

以上是生活随笔為你收集整理的vue里面嵌入sound music音乐播放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。