~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

開發(fā)工具與關(guān)鍵技術(shù)：HBuilder X

作者：吳業(yè)華

撰寫時間：2021年5月2號

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

網(wǎng)易云音樂api：https://neteasecloudmusicapi.js.org/#/?id=neteasecloudmusicapi

需要用到的部分功能接口：

/*

?????????????????????????????????? 1、歌曲搜索接口

?????????????????????????????????? ?? 請求地址：https://autumnfish.cn/search

?????????????????????????????????? ?? 請求方法：get

?????????????????????????????????? ?? 請求參數(shù)：keywords(查詢關(guān)鍵字)

?????????????????????????????????? ?? 響應(yīng)內(nèi)容：歌曲搜索結(jié)果

?????????????????????????????????? 2、歌曲url獲取接口

?????????????????????????????????? ?? 請求地址：https://autumnfish.cn/song/url

?????????????????????????????????? ?? 請求方法：get

?????????????????????????????????? ?? 請求參數(shù)：id(查詢關(guān)鍵字)

?????????????????????????????????? ?? 響應(yīng)內(nèi)容：歌曲url地址

?????????????????????????????????? 3、歌曲信息獲取

?????????????????????????????????? ?? 請求地址：https://autumnfish.cn/song/detail

?????????????????????????????????? ?? 請求方法：get

?????????????????????????????????? ?? 請求參數(shù)：ids(查詢關(guān)鍵字)

?????????????????????????????????? ? ?響應(yīng)內(nèi)容：歌曲詳情(包括封面信息)

?????????????????????????????????? 4、熱門評論獲取

?????????????????????????????????? ?? 請求地址：https://autumnfish.cn/comment/hot?type=0

?????????????????????????????????? ?? 請求方法：get

?????????????????????????????????? ?? 請求參數(shù)：id(歌曲id，地址中的type固定為0)

?????????????????????????????????? ?? 響應(yīng)內(nèi)容：歌曲的熱門評論

????????????????????????? */

1、創(chuàng)建一個vue項目導入vue、axios

2、構(gòu)建一個輸入框方便搜索需要查詢的音樂

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: {//查詢關(guān)鍵字query: "",//歌曲數(shù)組musicList: [],//歌曲地址musicUrl: "",//歌曲封面musicCover: "",//歌曲評論hotComments: [],//動畫播放狀態(tài)isPlaying: false,//遮罩層的狀態(tài)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);//在回調(diào)函數(shù)里面不能直接寫this.musicUrlvar 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");},//播放MVplayMv: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

總結(jié)

以上是生活随笔為你收集整理的调用网易云api接口的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。