【VUE音乐播放器】获取QQ音乐播放源地址

￡神魔★判官ぃ 2022-03-21 11:28 1218阅读 0赞

**前言：**在学习慕课网课程制作企业级音乐app中，发现之前的qq音乐播放地址均不可用了。于是折腾了一下，重新抓包获取地址。

#  1、获取分类歌单里面的歌曲列表 #

在之前的代码里，如下红色圆中的歌单-歌曲列表显示不出来，因为之前qq音乐改变了源地址，现在只能通过node来做接入层转发一下。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1][]

原来获取歌单列表的代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2][]

发现不能获取了，如果发现报错**Uncaught ReferenceError: jp1 is not defined**之类的东西，这是jsonp的问题，去config.js添加prefix：‘playlistinfoCallback’能解决，但是还是不能获得数据

![20190201135354113.png][]

去打开qq音乐pc版，找到[https://c.y.qq.com/qzone/fcg-bin/fcg\_ucc\_getcdinfo\_byids\_cp.fcg?type=1&json=1&utf8=1&onlysong=0&disstid=6543771358&g\_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0][https_c.y.qq.com_qzone_fcg-bin_fcg_ucc_getcdinfo_byids_cp.fcg_type_1_json_1_utf8_1_onlysong_0_disstid_6543771358_g_tk_5381_loginUin_0_hostUin_0_format_json_inCharset_utf8_outCharset_utf-8_notice_0_platform_yqq.json_needNewCode_0] 的链接，**如果没有多刷新几次 **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3][]

双击链接，返回msg invalid referer，这个链接不能直接获取了，需要node转发

![20190201134316108.png][]

所以现在结构明确了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4][]

新代码如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 5][]

在dev-server.js中添加

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 6][]

**可能会注意到 我这里多了一部分内容**

const url = '' + prefixHost.prefixHost + '/api/getplaysongvkey'

这是我用来判断是否是dev环境启动，还是直接打开打包好的build/index.html，这样做我可以在连接局域网的情况下直接用手机访问这个页面，如果要用手机访问，记得开启一个新的node服务器，比如node prod.server.js用来做转发。然后手机输入电脑ip和node服务器开启的端口即可。

这部分代码在config中添加host.js，

module.exports = {
     prefixHost: process.env.NODE_ENV === 'development' ? '' :'http://192.168.1.104:9000'
    }

然后在recommend.js中引入的，来做判断的

var prefixHost = require('../../config/host')

经过这样就可以顺利获取榜单中的歌曲列表。

# 2、获取音乐播放源地址 #

随便找到榜单列表的一首歌，比如《知否知否》，点击进入下面这个音乐播放页面（目前是这个页面才能抓到需要的包，不知以后是否会变）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 7][]

先清空或刷新下，在点击播放，可以看到这个地址，双击能拿到真正的播放地址

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 8][]

拿到这个地址[http://dl.stream.qqmusic.qq.com/C400002krvKI4Jgvq9.m4a?guid=7347620869&vkey=0FA4AD518A295E845C2E2F375494A197473C3B7266A7DBB5D81C9D70204380FD5044DD1CA8209DF0C49C0FC182647AD8AEF441D49396FA16&uin=0&fromtag=66][http_dl.stream.qqmusic.qq.com_C400002krvKI4Jgvq9.m4a_guid_7347620869_vkey_0FA4AD518A295E845C2E2F375494A197473C3B7266A7DBB5D81C9D70204380FD5044DD1CA8209DF0C49C0FC182647AD8AEF441D49396FA16_uin_0_fromtag_66]

仔细分析一下，再去之前榜单列表中，抓到的包中展开看看点击的这首歌《知否知否》的情况，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 9][]

不难发现真正的地址是由

**http://dl.stream.qqmusic.qq.com/C400$\{songmid\}.m4a?guid=7347620869&vkey=$\{vkey\}&uin=0&fromtag=66**

构成，多次抓取不同歌曲后发现只要能获取vkey就行，然后就可以拼接成播放源地址。

下面找看那个url里面返回了vkey，主要还是在当前播放页面瞎找或上一个页面找找，找不到刷新刷新看看

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 10][]

突然，找到了这个请求，这不就是需要的vkey吗，而且看到purl正是拼接后的请求链接

看看Headers，发现这是需要设置请求源地址的，那么就要node转发了

origin:https://y.qq.com

referer:https://y.qq.com/portal/player.html

在看看Query parmeters这些参数我们都可以伪造的，里面data需要一个songmid也是可以拿到的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 11][]

所以现在思路清晰了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 12][]

代码如下先获取vkey

export function getplaysongvkey(songmid) {
      const url = '' + prefixHost.prefixHost + '/api/getplaysongvkey'
      const data = Object.assign({}, commonParams, {
        // -: 'getplaysongvkey7257571376863041',
        g_tk: 5381,
        loginUin: 0,
        hostUin: 0,
        format: 'json',
        inCharset: 'utf8',
        outCharset: 'utf-8',
        notice: 0,
        platform: 'yqq.json',
        needNewCode: 0,
        data: `{"req":{"module":"CDN.SrfCdnDispatchServer","method":"GetCdnDispatch","param":{"guid":"7347620869","calltype":0,"userip":""}},"req_0":{"module":"vkey.GetVkeyServer","method":"CgiGetVkey","param":{"guid":"7347620869","songmid":["${songmid}"],"songtype":[0],"uin":"0","loginflag":1,"platform":"20"}},"comm":{"uin":0,"format":"json","ct":24,"cv":0}}`
      })
     return axios.get(url, {
        params: data
      }).then((res) => {
       return Promise.resolve(res.data.req_0.data.midurlinfo[0].purl)
      })
    }

apiRoutes.get('/getplaysongvkey', function (req, res) {
      var url = 'https://u.y.qq.com/cgi-bin/musicu.fcg'
      axios.get(url, {
        headers: {
          origin: 'https://y.qq.com',
          referer: 'https://y.qq.com/portal/player.html'
        },
        params: req.query
      }).then((response) => {
        res.json(response.data)
      }).catch((e)=>{
        console.log(e)
      })
    })

由于在之前的代码recommend.vue点击一个热门榜单，就会进入disc.vue中传入榜单id，就会获得榜单歌曲列表，构建一个songs类，包含该榜单中的所有歌曲信息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 14][]

正是因为之前songs类中的url拼接不对（被qq音乐屏蔽掉了），所以先去掉，变成没有url的songs集合，显示如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 15][] 考虑到歌曲的源地址需要一个个去请求才能拿到，所以为了优化性能，在点击播放一首歌时，才通过这首歌的songmid获取其vkey，再更改songs类中的url形成这首歌的播放源地址

比如我点击了《知否知否》这首歌，就会去做如下改变，只更改获取该歌曲的url播放源地址，其他歌曲的url还是为空

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 16][]

因为是在点击时才请求vkey，所以修改music-list.vue中点击部分代码，还有songs是保存在vuex中，this.setlectPlay(\{list:this.songs,index\})，所以要修改songs中的url，必须通过mapMutations，

在musci-list.vue中更改如下：

selectItem(item, index) {
            getplaysongvkey(item.mid).then((vkey) => {
              let url = `http://dl.stream.qqmusic.qq.com/${vkey}`
              this.setPlaylistUrl({
                index,
                url,
              })
            })
    
            this.selectPlay({
              list: this.songs,
              index
            })
          },

...mapMutations({
            setPlaylistUrl: 'SET_PLAYLIST_URL'
          })

在mutations.js中添加

[types.SET_PLAYLIST_URL](state, keyUrl) {
        let index = keyUrl.index
        let url = keyUrl.url
        state.playlist[index].url = url
      }

全部完成，经测试迄今为止这是有效方式~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190201133500106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1]: /images/20220321/90e262df82f64cd49d2febae7f018707.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2]: /images/20220321/6c2cd8b9f66a42a19cc4b9e2e9b58e21.png
[20190201135354113.png]: /images/20220321/fd891f46aa8c45c5bb793893e9144651.png
[https_c.y.qq.com_qzone_fcg-bin_fcg_ucc_getcdinfo_byids_cp.fcg_type_1_json_1_utf8_1_onlysong_0_disstid_6543771358_g_tk_5381_loginUin_0_hostUin_0_format_json_inCharset_utf8_outCharset_utf-8_notice_0_platform_yqq.json_needNewCode_0]: https://c.y.qq.com/qzone/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg?type=1&json=1&utf8=1&onlysong=0&disstid=6543771358&g_tk=5381&loginUin=0&hostUin=0&format=json&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq.json&needNewCode=0
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3]: /images/20220321/a6391b400bfa494caf24f12d898ba4e0.png
[20190201134316108.png]: /images/20220321/10803e9f98364dd98403f87581a81e98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4]: /images/20220321/0bb18a6b921b46c2a8ff3d10012aa670.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 5]: /images/20220321/aa97f3bdfa8043d098003d3121a0fe14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 6]: /images/20220321/75c93c2cd25447598ca2c942fa93f6b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 7]: /images/20220321/f596628f46a64d94b4812b3c8856ea92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 8]: /images/20220321/367bdb64f416482ca2d888a0f69c4710.png
[http_dl.stream.qqmusic.qq.com_C400002krvKI4Jgvq9.m4a_guid_7347620869_vkey_0FA4AD518A295E845C2E2F375494A197473C3B7266A7DBB5D81C9D70204380FD5044DD1CA8209DF0C49C0FC182647AD8AEF441D49396FA16_uin_0_fromtag_66]: http://dl.stream.qqmusic.qq.com/C400002krvKI4Jgvq9.m4a?guid=7347620869&vkey=0FA4AD518A295E845C2E2F375494A197473C3B7266A7DBB5D81C9D70204380FD5044DD1CA8209DF0C49C0FC182647AD8AEF441D49396FA16&uin=0&fromtag=66
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 9]: /images/20220321/76e9d1009f574cce821d1762ff67e406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 10]: /images/20220321/5c766ee03f5d4081ab127020a7c608ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 11]: /images/20220321/6f91a31dccc94237a3b2430e0501200a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 12]: /images/20220321/315d900591894616861b50ddfd8b837e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 13]: /images/20220321/faa18725e9444461ba49b4a37ba0f658.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 14]: /images/20220321/e0ba8d8ade304dd989a881b3faa3acf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 15]: /images/20220321/0c7d46c066094e34a8ced467b84ae3d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 16]: /images/20220321/5325b8575a484e07b6c789ce019b0aeb.png