代码附在最后。
1、歌曲搜索
（1）输入歌手或歌手，按回车键(v-on .enter)
（2）查询数据(axios 接口 v-model )
（3） 渲染数据(v-for 数组 that)
2、点击播放按钮，播放歌曲，歌曲id依赖歌曲搜索的结果。
（1） 点击播放(v-on 自定义参数)
(2)歌曲地址获取(接口 歌曲id)
（3） 歌曲地址设置(v-bind)
3、歌曲封面
（1）点击播放(增加逻辑，当点击歌曲时出现对应的封面)
（2）歌曲封面获取(接口 歌曲id)
（3）歌曲封面设置(v-bind，在vue中通过v-bind操纵属性)
4、歌曲评论
（1）点击播放(增加逻辑，当点击歌曲时出现对应的评论)
（2）歌曲评论获取(接口 歌曲id)
（3）歌曲评论渲染(v-for生成列表)
5、播放动画（胶片转动）
（1） 监听音乐播放(v-on play)
（2）监听音乐暂停(v-on pause)
（3）操纵类名(v-bind 对象)
注释： audio标签的play事件会在音频播放的时候触发， audio标签的pause事件会在音频暂停的时候触发。通过对象的方式设置类名，类名生效与否取决于后面值的真假
6、MV播放
（1）mv图标显示(v-if)
（2）mv地址获取(接口 mvid)
（3）遮罩层(v-show v-on)
（4）mv地址设置(v-bind)
注释：不同的接口需要的数据是不同的，响应式的数据都需要定义在data中定义。
主体代码：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/playerIndex.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src=" js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list">
<li v-for="song in songs"><a href="javascript:;" target="_blank" rel="external nofollow" @click="player(song.id)"></a> <b>{{song.name}}</b> <span v-show="song.mvid!=0"><i @click="playMv(song.mvid)"></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isplaying}">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="picUrl" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="comment in comments">
<dt><img :src="comment.user.avatarUrl" alt=""></dt>
<dd class="name">{{comment.user.nickname}}</dd>
<dd class="detail">
{{comment.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<!-- 音乐播放器-->
<div class="audio_con">
<audio ref='audio' v-bind:src="songUrl" controls autoplay loop class="myaudio" @play="isplaying=true" @pause="isplaying=false"></audio>
</div>
<div class="video_con" v-show="isShowMv">
<video controls="controls" :src="mvUrl"></video>
<div class="mask" ></div>
</div>
</div>
</div>
</body>
<script>
var app=new Vue({
el:"#player",
data:{
query:"",
//搜索
songs:[],
//歌曲播放路径
songUrl:"",
comments:[],
mvUrl:"",
//是否打开mv
isShowMv:false,
//获取碟片图片
picUrl:"",
//碟片旋转
isplaying:false,
},
methods:{
//搜索
searchMusic(){
var that=this;
axios.get(`https://autumnfish.cn/search?keywords=${this.query}`).then(function (result) {
that.songs=result.data.result.songs;
})
},
//歌曲播放
player(id){
var that=this;
this.isplaying=true;
axios.get(`https://autumnfish.cn/song/url?id=${id}`).then(function (result) {
that.songUrl=result.data.data[0].url;
})
//热门评论
axios.get(`https://autumnfish.cn/comment/hot?type=0&id=${id}`).then(function (result) {
that.comments=result.data.hotComments;
})
axios.get(`https://autumnfish.cn/song/detail?ids=${id}`).then(function (result) {
that.picUrl=result.data.songs[0].al.picUrl;
})
},
//播放mv
playMv(mid){
var that=this;
axios.get(`https://autumnfish.cn/mv/url?id=${mid}`).then(function (result) {
that.isShowMv=true;
that.mvUrl=result.data.data.url;
})
}
},
})
</script>
</html>