代碼附在最後。
1、歌曲搜尋
（1）輸入歌手或歌手，按Enter鍵(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>