首页 > vue里面嵌入sound music音乐播放

vue里面嵌入sound music音乐播放

 

 

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





在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.播放音乐的方法名(); 

更多相关: