- 资讯首页 > 开发技术 > web开发 > JavaScript >
- Vue.js实现音乐播放器
本文实例为大家分享了Vue.js实现音乐播放器的具体代码,供大家参考,具体内容如下
目录如下:
运行效果如图所示:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> * { margin: 0; padding: ; } ul { list-style: none; } ul li { margin: 20px; padding: 10px 5px; border-radius: 3px; } ul li.active { background-color: aqua; } #control { width: 100%; height:80px; } .next,.before { width: 100px; height: 80px; background-color: aqua; } h1 { color: red } </style> </head> <body> <div id="app"> <audio :src="currentSrc" controls="controls" autoplay="autoplay" @ended="changEnd"></audio> <h1>不仅仅是代码的搬运工</h1> <ul> <li :class='{active:index === currentIndex}' v-for='(item,index) in musicData' :key="item.id" @click="changeSong(item.songSrc,index)"> <h2>{{item.id }}---歌名:{{item.name}}----{{item.author}}</h2> </li> </ul> <div id="control"> <button class="before" type="button" @click="beforeSong" >上一首</button> <button class="next" type="button" @click="nextSong" >下一首</button> </div> </div> <script type="text/javascript"> const musicData = [{ id: 1, name: '喜欢你', author: '陈洁仪', songSrc: './status/陈洁仪 - 喜欢你.mp3' }, { id: 2, name: '我又想你了', author: '小鹅', songSrc: './status/小鹅 - 我又想你了.mp3' } ]; var app = new Vue({ el: '#app', data: { musicData, currentIndex: 0, currentSrc: './status/小鹅 - 我又想你了.mp3' }, methods: { changeSong (src,index) { this.currentSrc = src; this.currentIndex = index; }, changEnd () { this.currentIndex++; if(this.currentIndex===this.musicData.length){ this.currentIndex = 0; } this.currentSrc = this.musicData[this.currentIndex].songSrc; }, nextSong () { this.currentIndex++; if(this.currentIndex===this.musicData.length){ this.currentIndex = 0; } this.currentSrc = this.musicData[this.currentIndex].songSrc; console.log(this.currentIndex) }, beforeSong () { if(this.currentIndex===0){ this.currentIndex=this.musicData.length; } this.currentIndex--; this.currentSrc = this.musicData[this.currentIndex].songSrc; } } }) </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。
Copyright © 2009-2022 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 特网科技 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司(万网) 域名服务机构:烟台帝思普网络科技有限公司(DNSPod) CDN服务:阿里云计算有限公司 百度云 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站