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

admin

1）目标链接地址打开QQ音乐具体某首歌播放界面，打开控制台，监控网络请求：




image.png


在这个界面，有一个请求




image.png


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



image.png

此时，复制地址栏，可以得到我们的目标链接。
http://dl.stream.qqmusic.qq.com/ ... in=0&fromtag=662）分析链接构成：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。


作者：以手画圆心
链接：https://www.jianshu.com/p/6038aae3b35d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。