- 资讯首页 > 开发技术 > 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等主流浏览器浏览本网站
