master

分支 (1)

管理

管理

master

music-player
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音乐</title>
    <!--    解决闪烁问题在没加载之前白屏-->
    <style>
        [v-clock]{
            display: none;
        }
		*{
			margin: 0;
			padding: 0;
		}
		.header{
			width: 100%;
			height: 80px;
			text-align: right;
		}
		.header input{
			width: 200px;
			height: 40px;
		}
		.header button{
			width: 100px;
			height: 40px;
		}
		/* 播放面板 */
		.playFace{
			width: 100%;
			height: 100%;
			display: flex;
		}
		.songList{

			width: 20%;
			border: 1px solid;
			height: 800px;
			overflow: auto;

			}
			.songList ul{
				list-style: none;
			}
			.midPart{
				width: 50%;
				height: 800px;
				border: 1px solid;
				position: relative;
			}
			.musicImg{
				position: absolute;
				width: 300px;
				height: 300px;
				left: 50%;
				transform: translate(-50%);
				border-radius: 50%;

				background-color: #333333;


			}
			.MImg{
				width: 100%;
				height: 100%;
				position: relative;
			}
			.MImg img{
				position: absolute;
				width: 200px;
				height: 200px;
				border-radius:50% ;
				top: 15%;
				left: 15%;
				/* transform: translate(-50%,-50%); */
				animation: btnRotate 5s infinite linear;
		/* animation-iteration-count: infinite; */

			}
			 @keyframes btnRotate{
			        from{transform: rotateZ(0);}
			        to{transform: rotateZ(360deg);}
			    }
			.audioMusic{
				position: absolute;
				bottom: 0px;
			}.audioMusic audio{
				border-radius: 10px;

			}
			.hotList{
				width: 30%;
				height: 800px;
				float: right;
				border: 1px solid;
			}
			.mMv{
				position: fixed;
				width: 800px;
				height: 600px;


				transform: translate(200px,200px);
			}
			.mMv button{
				position: absolute;
				right: -10px;
				width: 80px;
				height: 35px;
				opacity: 0.6;
			}
    </style>
</head>
<body>
<div id="vue" v-clock>
	<!-- 头部 -->
	<div class="header">
		 <input type="text" v-model="query" @keyup.enter="search" placeholder="歌曲搜索"><button @click="search">搜索</button>
	</div>

	<!-- 头部 end-->
	<!-- 播放面板 -->
	<div class="playFace">
		<!--    歌曲列表-->

		    <div class="songList">
		        <ul>
		            <li v-for="item in musicList"><button @click="playMusic(item.id)">播放</button><button v-if="item.mvid!=0" @click="playMv(item.mvid)">mv</button><a href="">{{item.name}}</a>

		            </li>
		        </ul>
		    </div>
			<!--    歌曲列表 end-->
			<!-- the mid part -->
			<div class="midPart">
				<!--    歌曲图片-->
				    <div class="musicImg">
						<div class="MImg">
							 <img :src="img" width="200px" height="200px">
						</div>

				    </div>
				<!--    歌曲图片 end-->
				<!--    播放-->
				    <div class="audioMusic" >
				        <audio :src="url" controls="controls" autoplay="autoplay" loop="loop"></audio>
				    </div>


			</div>
			<!-- the mid part end-->

			<!-- the hot list -->
			<div class="hotList">

			</div>
			<!-- the hot list end-->
			<!--    歌曲mv-->
					<div class="mMv" v-if="mvUrl !== '' " >
						<button type="" @click="close">关闭</button>
						<video :src="mvUrl" controls="controls"></video>
					</div>
	</div>
<!-- 播放面板 end-->


<!--    歌曲评论-->
    <div>
        <ul>
            <li v-for="hotList in hotComments">{{hotList}}</li>
        </ul>
    </div>
</div>


<script src="js/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
    var vm = new Vue({
        el:"#vue",
        data:{
            query: '白月光',
            musicList: [],
            url: '',
            img: 'http://q.qlogo.cn/headimg_dl?bs=qq&dst_uin=184773349&src_uin=www.jlwz.cn&fid=blog&spec=100',
            hotComments: [],
            mvUrl: ''

        },
    methods: {
		close:function(){
			this.mvUrl=''
		}
		,
            search:function () {
                var that = this;
                axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function (response) {
                  // console.log(response.data.result.songs);
                    that.musicList = response.data.result.songs;
                });
            },
        playMusic:function (musicId) {
            var that = this;
            //console.log(musicId);
             axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function (response) {
               //  console.log(response)
                 that.url = response.data.data[0].url;
                // console.log(response.data);
             });
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function (response) {
                // console.log(response.data.songs[0]);
                //  console.log(response.data.songs[0].al.picUrl);
                that.img = response.data.songs[0].al.picUrl;
                // that.url = response.data.data[0].url;
                // console.log(response.data);
            });
            // axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function (response) {
            //     console.log(response);
            //     that.hotComments = response.data.hotComments;
            // });

        },
        playMv:function (mvId) {
            var that = this;
            axios.get("https://autumnfish.cn/mv/url?id="+mvId).then(function (response) {
              //  console.log(response.data.data.url);
                that.mvUrl = response.data.data.url;
            })
        }
    }
    })
</script>
</body>
</html>