qq音乐获取歌曲源链接地址

1)目标链接地址

打开QQ音乐具体某首歌播放界面,打开控制台,监控网络请求:

image.png

在这个界面,有一个请求

image.png

双击之后,可以发现就会打开歌曲源链接。

image.png

此时,复制地址栏,可以得到我们的目标链接。

http://dl.stream.qqmusic.qq.com/C400003OUlho2HcRHC.m4a?vkey=DC0E4A4953F748735FF764718B1E312FBE69F079ABEEE16794323A417444D2F5A98BED314A30C913289DC3146864D45296DD5EBCBA46CAA2&guid=1819638027&uin=0&fromtag=66

2)分析链接构成:

http://dl.stream.qqmusic.qq.com/C400${音乐mid}.m4a?vkey=${vkey}&guid=1819638027&uin=0&fromtag=66

在这个连接中,包括以下参数:

固定参数:guid/uin/fromtag

变化参数:songmid/vkey

那么,这些参数哪里来呢?

3)参数来源

回到监控网络请求的地方,同时还会发现以下请求:

image.png

点击请求,点开Preview,会惊喜的发现,在这个请求回来的数据中,包含了vkey的值,再接着点开Headers,你会发现那些固定参数,都是需要在发送此请求时进行配置。

image.png

image.png

由此不难发现,现在要想动态获得这个链接地址,需要发送两个请求,关键是获取vkey。

4)代码操作

由于项目需要请求的数据非常多,所以配置了公共参数:

image.png

配置非公共参数(很多参数,我也不知道什么含义,所以保持跟网站参数一致就好了):

image.png

此时,请注意,这里我并不是直接请求的,而是使用了后端代理,因为这里直接请求,是无法获取到的,所以在build/webpack.dev.conf中的devServer中进行如下配置:

image.png

在组件中进行调用

image.png

单独封装歌曲的song类

image.png

至此,运行成功!

5)走过的误区

第一个误区:

没有使用后端代理,之前一直使用jsonp请求数据,结果请求的数据回来了,code:0,但是vkey: fileter type wrong.一直很郁闷,后来想明白了,这是无法直接获取到的数据。

第二个误区:

在我获取到vkey的值之后,我直接继续在后面返回song类了,当时的代码如下图:

image.png

同时,在组件中的代码:

image.png

在这个过程中,我的vkey值,再到返回的song,全都可以取到,但是组件中,却无法获取到this.songs。console.log返回的总是undefined。

后来求教了一番女神,想明白了。

getMusic()处理的是异步请求,无法确定请求结果数据,何时完成,console.log不会去等请求结果,所以返回值总是undefined。

深圳前海蛇口自贸区在哪里(客服电话+交通)|淘宝怎么找到农村淘宝店铺?它们的网点在哪?