vue音乐播放器

最新推荐文章于 2024-09-16 08:03:18 发布

花小猪

最新推荐文章于 2024-09-16 08:03:18 发布

阅读量215

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46244909/article/details/119076793

版权

实现方法：
1，实现axios通信技术向api获取数据。
2，利用vue实现简单功能
3，截图
在这里插入图片描述

背景图片全屏显示：
.bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    overflow: auto;
	}
<div class="bg"style="background-image: url(1.jpg)"></div>

透明度：
background-color: rgba(255, 255, 255, .8);

弧度：
border-radius: 20px;

输入框隐藏边框：
border:none;
outline:medium;

文本垂直水平居中：
text-align: center;
line-height: 50px;设置高度

设置滑块滑动：
overflow-y: auto;
max-height: 350px;

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿鹏音乐</title>
	</head>
	<style>
	*{margin: 0;padding: 0;}
	.bg {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
	    overflow: auto;
	}
	.bg .music{    
		width: 50%;
		margin: auto;
		margin-top: 6%;
		height: 500px;
		background-color: rgba(255, 255, 255, .8);
		border-radius: 20px;
	}
	.bg .music .header{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: rgba(25, 55, 250, .8);
		border-radius: 20px 20px 0 0 ;
	}
	.search{
		margin-left: auto;
		border-radius: 20px;
		height: 30px;
	}
	input{
		border:none;
		outline:medium;
	}
	.content{
		display: flex;
		justify-content: space-between;
	}
	.right ul li{
		width: 300px;
		height: 50px;
		background-color: rgba(25, 55, 250, .8);
		list-style: none;
		margin: 10px;
		text-align: center;
		line-height: 50px;
		border-radius: 20px;
		}
	.right ul{
		overflow-y: auto;
		max-height: 350px;			
		}
		button{
		margin-left: -100px;
		}
		.foot{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background-color: rgba(243 243 245 );
		border-radius: 0 0  20px 20px ;
		}
	.play{
		width: 100%;
		height: 55px;
		outline: none;
		padding: 12.5px 0;
	}
	.mobble{
		margin-right: 80px;
	}
	</style>
	<body>
		<div class="bg"style="background-image: url(1.jpg)">
			<div class="music" id="player">
				<div class="header">
					<h1>&nbsp;&nbsp;阿<span style="font-size: 20px;margin: 10px;">鹏music</span></h1>
					<input
					 autocomplete="off" v-model="query"
					 @keyup.enter="searchMusic"
					 type="text" placeholder=".❤❤❤搜索音乐❤❤❤" id="search" class="search"/>
				</div>
				<div class="content">
					<div class="right">
						<h2 style="margin-left: 65px;">音乐列表</h2>
						<ul>
							<li v-for="item in musicList"><a  href="javascript:;" @click="playMusic(item.id)">📽播放</a>&nbsp;{{ item.name }}</li>
						</ul>
					</div>
					<div class="mobble">
						<div>
							<img src="2.png" />
						</div>
						<div>
							<img src="3.png" />
						</div>
						
					</div>
				</div>
				<div class="foot">
					<audio controls autoplay="autoplay" :src="musicUrl" class="play">
						您的浏览器不支持audio，请更新浏览器！
					</audio>
				</div>
			</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		var app = new Vue({
			el:"#player",
			data:{
				query:"",
				musicList:[],
				musicUrl:""
			},
			methods:{
				searchMusic:function(){
					var that = this;
					axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(response){
						//console.log(response);
						that.musicList = response.data.result.songs;
					},function(err){})
				},
				playMusic:function(musicId){
					var that = this;
					axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(response){
						//console.log(response);
						that.musicUrl = response.data.data[0].url;
					},function(err){})
				}
			},
		})
	</script>
</html>