html实现简易音乐播放器

目标：使用vue.js导包的形式做一个简单的音乐播放器，新手也很容易看懂。内容：1、使用了flex实现响应式布局；2、使用min-width防止字体被压缩；3、使用computed计算属性对歌曲的路径缓存；4、掌握基础的vue指令的使用；效果图：代码：<!DOCTYPE html><html><head><meta charset="utf-8"&

hello big_bear

11635人浏览 · 2021-04-30 15:37:46

hello big_bear · 2021-04-30 15:37:46 发布

目标：

使用vue.js导包的形式做一个简单的音乐播放器，新手也很容易看懂。

内容：

1、使用了flex实现响应式布局；
2、使用min-width防止字体被压缩；
3、使用computed计算属性对歌曲的路径缓存；
4、掌握基础的vue指令的使用；

效果图：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易音乐播放器</title>
		<script src="vue.js"></script><!-- 导包 -->
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 800px;
			}
			.box{
				margin: 0 auto;
				width: 800px;
				border: 1px solid black;	
			}
			.head{
				height: 150px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1px solid black;
			}
			.a1{
				height: calc(100vh - 153px);
				display: flex;
				flex-flow: column;
				align-items: center;
				overflow: auto;
			}
			.a1 li{
				width: 600px;
				height: 50px;
				list-style: none;
				border-radius: 20px;
				border: #000000 solid 1px;
				margin: 20px;
				padding: 10px;
			}
			.a1 li.active{
				background-color: #0088BB;
			}
			.b1{
				border-radius: 50%;
				margin:20px 50px 20px 50px ;
				padding: 0;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	
	<body>
		<div id="a2">
			<div class="box">
				<div class="head">
					<audio :src="getcurrentmusic"  autoplay="autoplay" controls="controls" v-on:ended="next()"></audio>
					<button class="b1" @click="last">上一首</button>
					<button class="b1" @click="next">下一首</button>
				</div>
				<ul class="a1">
					<li  :class="{active:index===currentidnex}" v-for='(item,index) in musicdata' :key='item.id' v-on:click="huan(index)" > 
					<h2>id:{{item.id}}——作者:{{item.admin}}——歌名:{{item.musicname}}</h2>	
					</li>
				</ul>
			</div>
		</div>
		<script>
			const musicdata =[{
				id:1,
				admin:'陈奕迅',
				musicname:'十年' ,
				musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/e1676efb-85aa-4fe0-b73b-74bbeadf88ae.mp3'
			},
			{
				id:2,
				admin:'周杰伦',
				musicname:'晴天' ,
				musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/a4f15326-a023-4e59-b92b-c0d91fea29cd.mp3'
			},
			{
				id:3,
				admin:'周杰伦',
				musicname:'告白气球' ,
				musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/b678f1e2-349d-4aed-9a2d-fceea624ee07.mp3'
			},
			{
				id:4,
				admin:'辣椒',
				musicname:'起风了' ,
				musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/dd950d40-ef3c-4302-b045-db122c088c4e.mp3'
			},
			{
				id:5,
				admin:'夏雨菲',
				musicname:'纸短情长' ,
				musrc:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7184a2f2-3b0b-407a-adc8-4d450f35c1e7/d1912f22-08ff-47fa-a953-40d2c048e719.mp3'
			},
		
			]
			
			new Vue({
				el:'#a2',
				data:{
					musicdata,
					currentidnex:0,
					url:''
				},
				computed:{
					getcurrentmusic(){
						return musicdata[this.currentidnex].musrc;
					}
				},
				methods:{
					huan(index){
						this.currentidnex=index;
					},
					next(){
						this.currentidnex++;
						if(this.currentidnex==this.musicdata.length){
							this.currentidnex=0;
						}
						console.log(this.currentidnex);
					},
					last(){
						this.currentidnex--;
						if(this.currentidnex<0){
							this.currentidnex=this.musicdata.length-1;
						}
						console.log(this.currentidnex);
					},
				},
			})
		</script>
	</body>
</html>