vue 实现简单播放器

最新推荐文章于 2024-05-15 02:00:05 发布

Zaltana

最新推荐文章于 2024-05-15 02:00:05 发布

阅读量2.2k

点赞数 1

分类专栏：框架文章标签： vue.js css javascript

本文链接：https://blog.csdn.net/zhoulina815/article/details/123293213

版权

框架专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style>
			/*  查找音乐的样式 */
			.music-play{
				width:45%;
				
			}
			.music-play ul{
				list-style: none;
				width:100%;
			}
			.music-play ul li{
				width:100%;
				height:60px;
				font-size:20px;
				background: lightpink;
				color: white;
				display: block;
				border-bottom: 1px solid gray;
				line-height: 60px;
				margin-top:5px;
			}
				
			.music-play ul li img{
				width:50px;
				height:50px;
				text-align:left;
				position: relative;
				top:9px;
				left:0px;
			}
			/* 背景图片 外层div央视 */
			.bk{
				width:45%;
				position: absolute;
				right:5%;
				top:0%;
			}
			.bk img{
				width:300px;
				height:300px;
				position: absolute;
				top:0px;
				left:132px;
				border:  100px solid black;
				border-radius: 80%;
				/*  旋转动画 */
				animation: zhuan 5s linear  infinite;
			}
			
			@keyframes zhuan{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(720deg) scale(0.2);
					opacity: 0.1;
					
				}
			}
			
			/*  歌曲评论信息的样式 */
			.comment{
				position: absolute;
				width:45%;
				height:800px;
				overflow: scroll;
				left:941PX;
				top:421px;
			}
			
			.comment li{
				display: flex;
				padding:5px;
			}
			.comment li .left{
				width:120px;
				height:120px;
			}
			.comment li .left img{
				width:100px;
				height:100px;
			}
			.comment li a{
				text-decoration: none;
				font-weight: bold;
				color: crimson;
			}
			/*  昵称名变成黑色 */
			.comment li .right a:nth-child(1) {
				color:  black;
				
			}
			
		</style>
	</head>
	<body>
		<div id = "app">
			<!--  v-model 双向数据绑定 输入框里的值发生改变  keyword 跟着一起改 -->
			<input v-model="keyword" @keydown.enter="SearchMusic" /><button @click="SearchMusic">查找</button>
			<!-- 显示音乐的列表 -->
			<div class="music-play">
				<ul>
					<li v-for="item in musicList">
						<!--  javascript:void(0) 去掉跳转功能 保留点击功能  通过 item.id 真正的播放地址-->
						<a href="javascript:void(0)" @click="playMusic(item.id)">							
							<img src="img/5.jpg"/>{{item.name}}
						</a>						
					</li>
					
				</ul>
			</div>
			<!--  用来播放音乐 -->
			<div class="music-audio">
				
				<audio :src="songUrl" autoplay controls loop></audio>
			</div>
			<!--  歌曲专辑封面 -->
			<div class="bk">
				<img :src="picUrl" >				
			</div>
			
			<!--  歌曲的热评信息 -->
			<div class="comment">
				<ul>
					<li v-for="item in hotComments">
						<div class="left">
							<img :src="item.user.avatarUrl" />
						</div>
						<div class="right">
							<a href="#">{{item.user.nickname}}:</a>
							<a href="#">{{item.content}}</a>
						</div>
					</li>
					
					
				</ul>
				
				
			</div>
			
		</div>
		
		
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					keyword:"",
					musicList:"",//音乐的列表
					//歌曲播放的路径
					songUrl:"",
					// 歌曲的封面
					picUrl:"img/3.jpg",
					// 歌曲的热评信息
					hotComments:[]
				},
				methods:{
					// 播放音乐
					SearchMusic:function(){
						console.log('查找音乐关键词是',this.keyword)
						var  that = this
						axios.get('https://autumnfish.cn/search?keywords='+this.keyword).then(function(res){
							console.log(res)
							that.musicList = res.data.result.songs
						})
					},// id就是歌曲传过来的id
					playMusic:function(id){
						// console.log 在控制台打印
						console.log("播放的id是"+id)
						var that = this;
						// 远程音乐播放器 传过来的信息放到了res里边
						axios.get("https://autumnfish.cn/song/url?id="+id).then(function(res){
							console.log(res)
							that.songUrl = res.data.data[0].url
							
						})
					   // 获取歌曲的封面
					   axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(res){
					   	console.log("................................................................")
						console.log(res.data.songs[0].al.picUrl)
						// 获取歌曲的详情信息
					   	that.picUrl = res.data.songs[0].al.picUrl
					   	
					   })
					   
					   //获取歌曲的评论信息
					   // 获取歌曲的封面
					   axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(function(res){
					   	console.log("................................................................")
					   	console.log(res)
					   						// 获取歌曲的详情信息
					   	//that.picUrl = res.data.songs[0].al.picUrl
						// 获得歌曲的热评
					   	 that.hotComments = res.data.hotComments;
					   })
					   //歌词的接口
					   axios.get('https://music.163.com/api/song/lyric?os=pc&id='+id+'&lv=-1&kv=-1&tv=-1').then(function(res){
					   	console.log("................................................................")
					   	console.log(res)
					   						// 获取歌曲的详情信息
					   	
					   })
					   
					}
				}
				
			})
		</script>
	</body>
</html>

Zaltana

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue 实现简单播放器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js".
复制链接

扫一扫