VUE获取网易云音乐接口,并实现歌词滚动效果
最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解。
功能还没开发完全,当前部分可通过导航栏进入到音乐模块,并点击如下歌手图进入。
先放一下效果图吧
这里主要有两个组件:歌曲信息组件和歌曲控制组件,歌曲控制组件还没有完善,这里主要记录一下歌曲信息组件的实现
歌曲信息组件
这一部分主要是歌曲列表和当前歌曲信息
1、歌曲列表实现
在这之前,关于网易云音乐接口的使用可以看网易云音乐API文档
思路:
- 获取歌曲数据
- 处理歌曲数据
- 渲染到视图上
(1)在实例创建完成,也就是在created钩子函数这个时期,我们能够访问到data,computed,methods上的方法和数据了,那我们就可以向接口发送请求了
created() {
//通过getSong()获取对应歌曲信息
this.getSong(this.$route.query.name); //在这之前,我是通过路由进入的该组件,所以会传递一个name歌手名字作为参数
};
(2)接下来编写getSong(),通过axios获取数据,我们可以先打印出来看看
getSong(name) {
let url =
"https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s=" +
name +
"&offset=1&limit=10"; //这里以第一页的十条数据为例
this.$axios
.get(url)
.then(res => console.log(res.data))
.catch();
}
(3)打开控制台,很明显获取到的并不是我们最终想要的结果,所以接下来就需要在众多数据中提取出我们想要的信息。
一般歌曲列表需要的数据不外乎这几样
- 歌曲id
- 歌曲名字
- 歌手名字
- 歌曲时长
我们随便点开一条去找,至于怎么找…就是一个个找,比如里面有个name属性,那么大概就是歌名了,接口文档里歌手对应的type是artist,那我们就找这个属性,如果没有的话那么大概率就是该单词缩写,所以我们点进去ar属性找到了我们想要的。
在这一步我们也能感受到在打代码的过程中,参数语义化的重要性了
(4)最后定位到我们想要的数据,我们用formatSongs()这个方法来进行整理
//提取歌曲信息,arr为接口返回的初始数据
formatSongs(arr) {
let n = arr.length;
for (let i = 0; i < n; i++) {
let obj