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音乐播放相关推荐

2020 零基础 Vue综合应用教开发音乐播放器—悦听（激发编程乐趣）【整理+源码】
文章目录 1.引言 2.音乐播放器完整版效果图如下: 3.接口引用 4.示例代码 5.结束语点击进入Vue❤学习专栏~ 1.引言这是Vue学习的综合应用篇,教你开发一个音乐播放器,能听歌,能看热门 ...
基于vue,js的简单pc 音乐播放器
一.简介项目github地址根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的,我是通过改写他的,使用VUE来 ...
vue使用 APlayer+Meting实现音乐播放，支持多平台音乐：网易云、腾讯、虾米、酷狗、百度
我之前写过一篇博客:使用 APlayer 实现音乐播放器,虽然 APlayer 让我实现了想要的音乐播放器效果,但是音频列表 audio 的音频链接.音频封面.歌词等,是需要自己去补充的. 那 ...
用vue+flask做了个音乐播放器（后端部分）
这篇文章用来接着介绍该音乐播放器的后端部分,因为涉及爬虫不知道会不会被限同时也为了阅读者不会觉得过于繁杂所以分开两篇发.这里是上一篇关于前端部分的介绍. 后端这里使用的后端是由python的flas ...
vue 2.0系列QQ音乐播放器案例
我可能做了一个假的qq音乐demo, 本demo参考 https://y.qq.com 开发的,难怪跟网上其他人的案例界面不一样...Orz Build Setup git clone https:/ ...
基于Vue.js和Node.js音乐播放器的设计与实现
一.所使用的技术 1.Vue.node.js.MongoDB.elementUI.Express.moment. 二.所实现的功能 1.实现前后端分离,后台用node的express写管理接口.前台用 ...
【前端小项目】基于Vue全家桶的在线音乐播放器（提供在线演示）
vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
vue实现音乐播放器
通过vue与原生js实现音乐播放器下面是需要的网址 1.歌曲搜索接口请求地址:https://autumnfish.cn/search 请求方法:get 请求参数:keyw ...

vue里面嵌入sound music音乐播放

vue里面嵌入sound music音乐播放相关推荐

最新文章

热门文章