偶然在網上發現了網易云的接口，自己試了下發現確實能用，就自己做了vue項目打包成apk裝到自己手機上了，可惜我不會后端，沒法把自己喜歡聽的歌曲ID放入數據庫，所以每次打開想聽什么都是要自己搜索。

可能有人會杠了，為什么不直接用網易云音樂，好吧其實用網易云音樂更方便，自己裝的軟件簡直就是多此一舉。但我寫的這個項目其實主要是針對網易云上的付費歌曲的，在自己的程序里搜索到歌曲，點擊下載，然后在網易云里搜索本地，就可以吧歌曲加入到收藏了，相當方便。笑出了聲...

話不多說，可是擼代碼了：

我使用了elementui框架，先寫一個搜索框加入輸入框監聽事件

<el-input v-model="input" placeholder="music" @input="getData"></el-input>

再加入一個list，這個是用來顯示搜索列表的，分別是index+1：序號，values.name：歌曲名，values.singer：歌手名。最后再加一個click觸發的播放按鈕：

<el-row class="listMucis"><el-col :span="24" v-for="(values,index) in listMusic" :key="values.mid"><span>{{index+1}}.{{values.name}}</span><span>{{values.singer}}</span><i class="el-icon-video-play" @click="arr(values.id)" :data-id="values.id"></i></el-col></el-row>

框架這種東西，想用就用，看個人喜好了。

下面寫第一個數據交互，也就是輸入框的監聽：

getData(e) {this.$axios.get("https://api.imjad.cn/cloudmusic/", {params: {type: "search",s: this.input}}).then(result => {if (result) {this.listMusic = []var ifor(i=0;i<8;i++){this.listMusic.push(result.data.result.songs[i])}}});},

直接使用axios發送請求，type是請求類型，s是監聽的輸入框內容。listMusic在data里面以空數組形式放好。因為這里我只想拿8條數據，所以用了for循環來吧數據push出去，想全拿的可以不用這么麻煩。

這里其實就已經拿到了音樂的各種信息，現在只需要拿著已有的音樂ID去請求接口就可以了。

通過上面i標簽的click事件，來實現點擊播放。

arr(id){this.$axios.get("https://api.imjad.cn/cloudmusic/", {params: {type: "song",id: id,br: 128000}}).then(result => {this.musicId = result.data.data[0].url})}

這里的musicId是提前寫好的audio播放器，只需要把拿到的url放入就可以播放了。

<audio :src="musicId" controls="controls" autoplay="autoplay" loop="loop"></audio> 這是data()里的參數名稱，當然也有些是用不上的 isFalse: "",show: true,input: "",fadeIns: "",listMusic: [],musicId: '',hide: false

有做博客的可以把這個接口放入自己的博客里，加入些背景音樂還是可以的吧。至于我自己，說來慚愧，不會寫接口，現在連自己的博客都搭建不起來，也該準備跳槽了，上海找個合適的工作是真的難。

?

總結

以上是生活随笔為你收集整理的使用Vue对接网易云音乐的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。