Vue.js开发音乐播放器

最新推荐文章于 2022-03-25 15:43:39 发布

无敌代码终结者

最新推荐文章于 2022-03-25 15:43:39 发布

阅读量373

点赞数

文章标签： vue.js html css javascript html5

本文链接：https://blog.csdn.net/weixin_42280470/article/details/109367580

版权

目录如下：

运行效果如图所示：

代码如下：

<!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>

需要资源的小伙伴可以加我 2777255072