综合项目_音乐播放器

最新推荐文章于 2024-06-14 15:25:30 发布

P_ning

最新推荐文章于 2024-06-14 15:25:30 发布

阅读量448

点赞数

分类专栏： VueJS快速入门

本文链接：https://blog.csdn.net/P_ning/article/details/104908030

版权

VueJS快速入门专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>音乐播放器</title>
	<style type="text/css">		
		@keyframes rotate{
		    0%{
		        transform: rotate(0);
		      }
		    50%{
		    	transform:rotate(200deg);
		    }
		    100%{
		         transform: rotate(0);
		    	}
			}
		.rotate{
		    transition: 0.5s;
		    transform-origin: 30px 30px;  
		    animation: rotate 10s linear infinite;  /*开始动画后无限循环，用来控制rotate*/
		}

	</style>
	</head>
	<body>
		<div id="demo">
			<input type="text" v-model="musicName" placeholder="请输入音乐名" @keyup.enter="selectMusic" />
			<input type="button" value="查询"  @click="selectMusic"/>
			<audio v-bind:src="musicSrc"  controls="controls" autoplay="autoplay" @play="play" @pause="pause"></audio>
			<img v-bind:src="musicImg" width="100px" height="100px" v-show="musicImg != ''" v-bind:class="{rotate:playOrPause}"/>
			<video id="mvshow" controls="controls" autoplay="autoplay" v-bind:src="mvSrc" v-if="mvShow"></video>
			<div>
				<span>歌曲评论</span>
				<ul v-for="musicCommunity in musicCommunitys">
					<li>
						<img v-bind:src="musicCommunity.user.avatarUrl" width="20px" height="20px"/>
						{{ musicCommunity.content }}
					</li>
				</ul>
			</div>
			<div>
				<span>音乐列表</span>
					<ul>
						<li v-for="music in musics">
							{{ music.name }}
							<input type="button" value="播放" @click="beginMusic(music.id)">
							<input type="button" value="mv视频" @click="playMvVideol(music.mvid)" v-if="music.mvid !=0" />
						</li>
					</ul>
			</div>			
		</div>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#demo",
				data: {
					musicName:"",		//用于查询的歌曲名称
					musics:"",			//查询的歌曲信息
					musicSrc:"",		//歌曲播放路径
					musicImg:"",			//播放中歌曲的封面
					musicCommunitys:"",		//播放中歌曲的热评
					playOrPause:false,		//是否播放,用于判断图片是否旋转
					mvSrc:"",				//mv视频播放地址
					mvShow:false			//mv视频是否显示,用于退出mv视频
				},methods:{
					//查询歌曲属性
					selectMusic:function(){
						var now = this;//保留请求前的this
						axios.get("https://autumnfish.cn/search?keywords="+this.musicName).then(
						function(response){
							//console.log(response);
							now.musics = response.data.result.songs;
						},function(err){
							
						})
					},
					//获取歌曲的相关信息
					beginMusic:function(musicId){					
						var now = this;//保留请求前的this
						//获取歌曲播放链接
						axios.get("https://autumnfish.cn/song/url?id="+musicId).then(
						function(response){
							//console.log(response);
							now.musicSrc = response.data.data[0].url;
						},function(err){
							
						})
						//获取歌曲封面
						axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(
						function(response){
							//console.log(response);
							now.musicImg = response.data.songs[0].al.picUrl;
						},function(err){
							
						})
						//获取歌曲评论
						axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(
						function(response){
							console.log(response);
							now.musicCommunitys = response.data.hotComments;
						},function(err){
							
						})
					},
					//控制封面旋转
					play:function(){
						this.playOrPause = true;
					},
					pause:function(){
						this.playOrPause = false;
					},
					//播放mv视频
					playMvVideol:function(mvid){
						var now = this;
						axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(
						function(response){
							//console.log(response);
							now.mvShow = true;
							now.mvSrc = response.data.data.url;
							//console.log(now.mvSrc);
						},function(err){
							
						})
					}
				}
			})
		</script>
	</body>
</html>

P_ning

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
综合项目_音乐播放器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>音乐播放器</title> <style type="text/css"> @keyframes rotate{ 0%{ transform: ...
复制链接

扫一扫

专栏目录