qq音乐接口取到的vkey拼成的audio的src,刚开始可以正常播放,今天403了。请问如何才能正常?

跟着黄奕老师的VUE课程QQ音乐APP。做个音乐播放器,接口都是qq的。
现在歌单数据已经有了,需要实现点击歌曲就播放,打算使用audio标签来实现。但是不知道如何生成audio标签的src。课程中的src的方式已经失效。去QQ看到他们的src是这样的

http://dl.stream.qqmusic.qq.com/C400001uxKNp3a7Qkv.m4a?vkey=72E3CE808E6EB2FEBE2AA5A625DE5C12468604025CC9F05A0D0ADD898CB77FDF83888D29BEE6097761F53DE1C82B7DDB7A67AD38DD15517B&guid=504753841&uin=0&fromtag=66

点开几首歌,对比分析了一下这个src,发现有这个src有下面这些参数:
1.C400001uxKNp3a7Qkv
2.vkey=7F4E18EEF24DFC....
3.guid参数
4.uin参数
5.fromtag参数
但是变量只有1和2,guid,uin,fromtag都是&guid=504753841&uin=0&fromtag=66,似乎没变化。
想生成1比较简单,在得到的数据对象中的mid就是C400这个。

clipboard.png

但是vkey比较麻烦,分析QQ的做法是通过每点击一首歌就发送一个请求

请求参数:

clipboard.png

请求url:

https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg

clipboard.png
响应得到的数据是这样的

clipboard.png
其中vkey就是这个请求的关键。

然后关键地方到了,我就模拟QQ来发送请求。用的是jsonp插件

clipboard.png

上面这张图的param()是用来将下面这张图的data参数加入到url中,上图的originJSONP()才是真正的jsonp插件的发送请求的函数。

clipboard.png

如愿以偿我得到了vkey.跟变量mid他们1,3,4,5一起拼接起来,放到vuex的state中,在src中直接使用state。
刚开始点击歌曲是正常播放的。但是后来出现了403错误

比较同一首歌的两个src我的版本和QQ官方版本,其中除了vkey不一样,其他都是一样,vkey是随机生成,不一样也是正常的。

官方的src

http://dl.stream.qqmusic.qq.com/C400001uxKNp3a7Qkv.m4a?vkey=71FF9880454604D580A3B64BD664EEE92069E28F42780C2F2DCE3F6A26C6ECB30ED4E790833E580AA1D3943928049747691A9758158917A9&guid=504753841&uin=0&fromtag=66

我的src

http://dl.stream.qqmusic.qq.com/C400001uxKNp3a7Qkv.m4a?vkey=1373FD715FCE0AFB7580063C280CEE6945E3DC2E8D52CEE4567BD92E5EA78C1807D9730D34A8F592A7E096D2EF9FAB927921B4BD4FD357DA&guid=504753841&uin=0&fromtag=66

现在问题是:
1.为什么不能稳定播放?后来就403,是QQ采取了什么策略屏蔽了我的src吗?(哎呀真是头疼死了,刚才copy我的src的时候又好了)

阅读 16.4k
15 个回答

昨天刚刚做好的,结果今天就换掉了,很气==

问题解决了
使用另一个接口,不用模拟请求这些麻烦的步骤,直接拿ID去GET
http://isure.stream.qqmusic.q...
中间的C100是自带的,后面补上你获取到的就好了,当然不保证一直有效。
有一些资源不清楚为什么还是403状态

希望能帮到你们,有用的话,给个赞赏也可以嘿嘿

2018年6月6日回答:
楼上的方法,给定固定的vkey,之前也使用过,后来发现有效期好像只有一天,所以就重新寻求新的解决方案。
受到这个回答的启发:https://zhuanlan.zhihu.com/p/...
观察网站上的请求,发现每首歌都有其自己的vkey,

clipboard.png

所以思路就是在封装歌曲信息的时候,就给每首歌封装相应的vkey即可
singer-detail.vue

_normalizeSongs (list) {
  let ret = []
  list.forEach((item) => {
    let {musicData} = item
    getSongVkey(musicData.songmid).then((res) => {
      // console.log('这首歌的vkey获取到了')
      const vkey = res.data.items[0].vkey
      if (musicData.songid && musicData.albummid) {
        ret.push(createSong(musicData, vkey))
      }
    })
  })
  return ret
}

singer.js

export function getSongVkey (songmid) { // 获取歌曲的vkey
  const url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
  const data = Object.assign({}, {
    callback: 'musicJsonCallback',
    loginUin: 3051522991,
    format: 'jsonp',
    platform: 'yqq',
    needNewCode: 0,
    cid: 205361747,
    uin: 3051522991,
    guid: 5931742855,
    songmid: songmid,
    filename: `C400${songmid}.m4a`
  })

  return jsonp(url, data)
}

song.js

export function createSong (musicData, vkey) { // 格式化歌曲信息
  return new Song({
    id: musicData.songid,
    mid: musicData.songmid,
    singer: filterSinger(musicData.singer),
    name: musicData.songname,
    album: musicData.albumname,
    duration: musicData.interval,
    image: `https://y.gtimg.cn/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,
    url: `http://dl.stream.qqmusic.qq.com/C400${musicData.songmid}.m4a?fromtag=38&guid=5931742855&vkey=${vkey}`
  })
}

这是昨天想出的方法,今天使用仍然可以,后续会不会因为guid再出现什么问题尚未可知。

`http://ws.stream.qqmusic.qq.com/C100${musicData.songmid}.m4a?fromtag=0&guid=126548448`

最新接口

高票回答 2018.4.18 已经不能用

我的方法与@蜗牛叔叔提的一样。

clipboard.png

qq音乐原播放地址: http://dl.stream.qqmusic.qq.c...
参数比之前多了guid 和 vkey ,uid参数可以不加

代码如下:

  url: `http://dl.stream.qqmusic.qq.com/C400${musicData.songmid}.m4a?guid=106795008&vkey=AE1D90F43963ABF97FAE0968D8581710AF21B640A32A93C45FF503192B6D352DCCE278E904C9FCC09D883B9AA30BEEDDBE7112C05DA7603D&fromtag=38`

新手上路,请多包涵

图片描述

这个我也跟着做了一遍,这个播放源一直在变,昨天还是好的今天就不行了,所以别纠结了

通过对qq音乐官网的抓包就可以抓取到真实的播放地址。首先抓取一首歌的详情数据,在详情数据中的url中会显示出来歌曲详情抓包数据

我几个月前也做过一版 地址
最近也发现接口换了

至于楼上说怎么找到的接口,在浏览器打开y.qq.com切换到手机浏览模式看控制台就知道了啊,非常简单的,我当时就是一个个页面找的 其实也没几个,哪里需要接口很容易看出来,总体来说QQ音乐播放器算是比较简单的吧

宣传栏