vue里面嵌入sound music音乐播放

 

 

如果只是单纯想要加一个可以循环播放不受控制的背景音乐

<!--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音乐播放的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。