使用Vue对接网易云音乐
偶然在网上发现了网易云的接口,自己试了下发现确实能用,就自己做了vue项目打包成apk装到自己手机上了,可惜我不会后端,没法把自己喜欢听的歌曲ID放入数据库,所以每次打开想听什么都是要自己搜索。可能有人会杠了,为什么不直接用网易云音乐,好吧其实用网易云音乐更方便,自己装的软件简直就是多此一举。但我写的这个项目其实主要是针对网易云上的付费歌曲的,在自己的程序里搜索到歌曲,点击下载,然后在网易云里搜索
偶然在网上发现了网易云的接口,自己试了下发现确实能用,就自己做了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 i
for(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
有做博客的可以把这个接口放入自己的博客里,加入些背景音乐还是可以的吧。至于我自己,说来惭愧,不会写接口,现在连自己的博客都搭建不起来,也该准备跳槽了,上海找个合适的工作是真的难。
更多推荐
所有评论(0)