播放器介紹
總體的效果如圖所示，沒有加很多css特效，需要美化的小白，可以自行添加，本博客只負責介紹原理。
五個html主要標籤
如圖所示
（1）audio ：屬性controls="controls"實現圖一的播放效果顯示
（2）img標籤
（3）一個input文本框
（4）按鈕
（5） 《ul》 《li》標籤實現列表
（6）想要獲取接口的值，我們需要用到axios
功能介紹
（1）搜索
當我們點擊搜索按鈕時，界面就會展示搜索到的音樂內容，那麼就需要用到v-model標籤來獲取到input裏面的值，
<input type="text" v-model="msg" placeholder="輸入音樂名" />
<input type="button" value="搜索" @click="search" />
msg:"",放在Vue對象的data當中
MusicArr:[]存歌單的數組
點擊事件：
methods:{
search:function(){
var that=this;//再axios或許網絡數據時候this變了，需要存起來才能改變MusicArr的值
axios.get("https://autumnfish.cn/search?keywords="+this.msg).then(function(response){
//console.log(response);當我們訪問https://autumnfish.cn/search?keywords="+this.msg這個的時候，我們可以再瀏覽器按f12，觀看console的值，如圖所示
that.MusicArr=response.data.result.songs//我們僅僅需要歌名數組就行。
},function(err){
console.log(err);
});
},
這樣我們再點擊的搜索的時候，數組 MusicArr就會有值，然後通過v-for就能再界面渲染出所有搜索到的歌名啦！
（2）播放效果：
<ul >
<li v-for="item in MusicArr" >
{{item.name}}
<input type="button" value="播放" @click="diplay(item.id)" />
</li>
</ul>
我們在li標籤中添加按鈕，併爲其設置播放的效果，這裏我們可以分析一波，如果想讓audio播放，我們就得給一個src，那個關鍵如何獲取每一個音樂的src呢。這裏呢，因爲每一首歌都有一個固定的id，因此我們通過訪問https://autumnfish.cn/song/url?id="+id這個接口就可以獲取到歌曲的url了（不要問爲什麼時這個網址，問就是因爲官方提供的），最後我們通過動態渲染用：src即可
diplay:function(id){//這裏是一個含參函數
//console.log(id);
var that=this;
axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){
console.log(response);
//that.MusicArr=response.data.result.songs
that.MusicUrl=response.data.data[0].url;//這裏大家可以在瀏覽器中查詢到
},function(err){
console.log(err);
});
（3）圖片的顯示
這裏通過https://autumnfish.cn/song/detail?ids="+id接口來實現
我們把這個接口獲取的圖片存在一個變量裏面，在img中用 ：src=“MusicImg”，就可以渲染出效果啦！
diplay:function(id){
//console.log(id);
var that=this;
/* axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){
console.log(response);
//that.MusicArr=response.data.result.songs
that.MusicUrl=response.data.data[0].url;
},function(err){
console.log(err);
});*/
axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){
that.MusicImg=response.data.songs[0].al.picUrl;
//console.log(response.data.songs[0].al.picUrl);
},function(err){
console.log(err);
});
}
點擊播放的時候，圖片和音頻同時有效果，因爲我是將兩者寫在diplay一個函數裏面的
完整代碼：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<div id="auto" >
<audio :src="MusicUrl" autoplay="autoplay" controls="controls"></audio>
</div>
<div>
<img :src="MusicImg" style="width: 200px; height: 150px;"/>
</div>
<input type="text" v-model="msg" placeholder="輸入音樂名" />
<input type="button" value="搜索" @click="search" />
<ul >
<li v-for="item in MusicArr" >
{{item.name}}
<input type="button" value="播放" @click="diplay(item.id)" />
</li>
</ul>
</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"",
MusicArr:[],
MusicUrl:"",
MusicImg:""
},
methods:{
search:function(){
var that=this;
axios.get("https://autumnfish.cn/search?keywords="+this.msg).then(function(response){
console.log(response);
that.MusicArr=response.data.result.songs
},function(err){
console.log(err);
});
},
diplay:function(id){
//console.log(id);
var that=this;
axios.get("https://autumnfish.cn/song/url?id="+id).then(function(response){
console.log(response);
//that.MusicArr=response.data.result.songs
that.MusicUrl=response.data.data[0].url;
},function(err){
console.log(err);
});
axios.get("https://autumnfish.cn/song/detail?ids="+id).then(function(response){
that.MusicImg=response.data.songs[0].al.picUrl;
//console.log(response.data.songs[0].al.picUrl);
},function(err){
console.log(err);
});
}
}
});
</script>
</html>