呼叫網易雲api介面
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：HBuilder X
作者：吳業華
撰寫時間：2021年5月2號
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
網易雲音樂api：https://neteasecloudmusicapi.js.org/#/?id=neteasecloudmusicapi
需要用到的部分功能介面：
/*
1、歌曲搜尋介面
請求地址：https://autumnfish.cn/search
請求方法：get
請求引數：keywords(查詢關鍵字)
響應內容：歌曲搜尋結果
2、歌曲url獲取介面
請求地址：https://autumnfish.cn/song/url
請求方法：get
請求引數：id(查詢關鍵字)
響應內容：歌曲url地址
3、歌曲資訊獲取
請求地址：https://autumnfish.cn/song/detail
請求方法：get
請求引數：ids(查詢關鍵字)
響應內容：歌曲詳情(包括封面資訊)
4、熱門評論獲取
請求地址：https://autumnfish.cn/comment/hot?type=0
請求方法：get
請求引數：id(歌曲id，地址中的type固定為0)
響應內容：歌曲的熱門評論
*/
1、建立一個vue專案匯入vue、axios
2、構建一個輸入框方便搜尋需要查詢的音樂
3、歌曲列表
<div class="boxa1"> <ul> <li v-for="item in musicList"> <a href="#" @click="playMusic(item.id)" class="iconfont icon-bofang1"></a> <label>{{item.name}}</label> <a href="#" v-if="item.mvid!=0" @click="playMv(item.mvid)" class="iconfont icon-MV"></a> </li> </ul> </div>
4、播放音樂
<div class="boxb">
<audio :src="musicUrl" @play="play" @pause="pause" controls autoplay loop>
</audio>
</div>
<div class="mv" v-show="isShow">
<video :src="mvUrl" width="100%" height="100%" controls="controls"></video>
</div>
<div class="mk" @click="hide" v-show="isShow">
</div>5、js
var app = new Vue({
el: "#xwyy",
data: {
//查詢關鍵字
query: "",
//歌曲陣列
musicList: [],
//歌曲地址
musicUrl: "",
//歌曲封面
musicCover: "",
//歌曲評論
hotComments: [],
//動畫播放狀態
isPlaying: false,
//遮罩層的狀態
isShow: false,
//MV地址
mvUrl: "",
},
methods: {
searchMusic: 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;
}, function(err) {
console.log(err);
})
},
playMusic: function(musicId) {
console.log(musicId);
//在回撥函式裡面不能直接寫this.musicUrl
var that = this;
//獲取歌曲地址
axios.get('https://autumnfish.cn/song/url?id=' + musicId)
.then(function(response) {
console.log(response.data.data[0].url);
that.musicUrl = response.data.data[0].url;
}, function(err) {
console.log(err);
})
//歌曲詳情獲取
axios.get('https://autumnfish.cn/song/detail?ids=' + musicId)
.then(function(response) {
console.log(response.data.songs[0].al.picUrl);
that.musicCover = response.data.songs[0].al.picUrl;
}, function(err) {
console.log(err);
})
//歌曲評論獲取
axios.get('https://autumnfish.cn/comment/hot?type=0&id=' + musicId)
.then(function(response) {
// console.log(response.data.hotComments);
that.hotComments = response.data.hotComments;
}, function(err) {
console.log(err);
})
},
//歌曲播放
play: function() {
this.isPlaying = true;
console.log("play");
},
//歌曲暫停
pause: function() {
this.isPlaying = false;
console.log("pause");
},
//播放MV
playMv:function(mvid){
var that = this;
//獲取MV地址
axios.get('https://autumnfish.cn/mv/url?id=' + mvid)
.then(function(response) {
// console.log(response.data.data.url);
that.isShow = true;
that.mvUrl = response.data.data.url;
}, function(err) {
console.log(err);
})
},
//隱藏
hide:function(){
this.isShow = false;
}
}
})本次作品為學習黑馬程式設計師vue課程demo