vue获取qq音乐歌曲音频资源

最近在看一个仿QQ音乐的移动端音乐App，发现获取不到音乐的音频资源，于是打开QQ音乐官网，发现音频的播放地址改变了

在下图audio标签中可查看，地址为

http://ws.stream.qqmusic.qq.com/C400003gfggs1r3Bcc.m4a?guid=1329984726&vkey=E8A7BFD68425341AFAF0FC1BB21D4FB5AF06C917B55179DB1D7E2BE8F3ECC7EFC14AF845520D56C9812A22F2AFC7A43B14E0F71DE2BD7DB1&uin=0&fromtag=66

 此处的地址，与教程中的地址http://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46相比

多了guid、vkey与uin三个参数

查看多个资源地址发现guid与uin为固定参数，我们只需将其设置为当前官网的参数即可

现在需要获取的之后vkey这个参数了

在歌手列表或者歌手详情列表找一圈，发现没有vkey相关的内容，只好在歌曲页面的Network中查找

打开Network刷新页面，找了一圈，果然找到了

找到一个musicu.fcg?-=getplaysongvkey开头的文件，哈哈哈，这个名字取的不就是获取key的么

（这里的key就是我要找的，发现purl包含了所有的参数，这里我就直接用了）

一阵欣喜，就赶紧在项目中来请求这个key

请求写好了，发现这个接口是跨域的，不过不慌，之前获取推荐页面歌单时也出现过这个情况，我们根据网页中的接口修改相应的url与headers即可

webpack.dev.conf.js

与推荐歌曲一样，请求也需要切换为axios

 相应的配置参数在network中都可以找到

api/singer.js

 接下来，就要看看我们获取到的参数了

这里，我是在创建歌曲类的时候将url添加在歌曲类中，除此之外，还可以在获取歌曲是传入当前的歌曲id，只获取当前的key

singer-details.vue

 这里打印res就可以看到我们获取的参数，过滤一遍空值，将其传给createSong

createSong方法中拼接参数就可以了，来看一下效果吧

 

歌曲就可以正常播放了！