vue.js最新版获取QQ音乐播放源

最新推荐文章于 2024-08-09 07:47:46 发布

sinat_26229211

最新推荐文章于 2024-08-09 07:47:46 发布

阅读量5.5k

点赞数 3

分类专栏：前端文章标签： vue qq音乐播放源

本文链接：https://blog.csdn.net/sinat_26229211/article/details/81080749

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在学习使用vue写一个播放器，一直获取不到正确的播放源，QQ对这块限制更加严格了.按照之前的写法，现在已经不能获取到播放源了.

首先,要去抓取QQ音乐的播放源
1.首先在QQ音乐任意播放页面
这里写图片描述

2.进入开发者模式按F12即可,选择network，按ctrl+R进行筛选多媒体文件,按照size倒序,最大的就是我们要找的音乐文件了这里写图片描述

3.选择如下图的选项(open in new tab)即可进入歌曲播放页面
这里写图片描述
4.如下链接就是播放器链接：其中这是歌曲名称：C400001J5QJL1pRQYB.m4a

名称里面的C1代表歌曲的音质大小C1表示文件小，C4表示文件大。例如：C4L0001ApDs72gYqUk.m4a这就是大文件，如下图

http://dl.stream.qqmusic.qq.com/C400001J5QJL1pRQYB.m4a?vkey=5D8FB6B328D845F93A92F881C0EC819D8F377AC72786615BCAB0E7913CFF1DF2C6AA98FA110D7496D1D4671392617555D68586536ACD9B7B&guid=7981028948&uin=393651460&fromtag=66

下面来分析一下正确的播放源地址
http://dl.stream.qqmusic.qq.com/C400001J5QJL1pRQYB.m4a?vkey=39328742C4B3731730FA8FBF10622F8ED1EF66D68894482468410CD8D1535999A6AC1F4CA75118E7892EEAA1460E8C580628230C40C58AF3&guid=7981028948&uin=393651460&fromtag=66

这里写图片描述

由此我们可以推断出： http://dl.stream.qqmusic.qq.com/C400001J5QJL1pRQYB.m4a?vkey=39328742C4B3731730FA8FBF10622F8ED1EF66D68894482468410CD8D1535999A6AC1F4CA75118E7892EEAA1460E8C580628230C40C58AF3&guid=7981028948&uin=393651460&fromtag=66

其实就是：
http://dl.stream.qqmusic.qq.com/C400 $ {songmid}.m4a?vkey=39328742C4B3731730FA8FBF10622F8ED1EF66D68894482468410CD8D1535999A6AC1F4CA75118E7892EEAA1460E8C580628230C40C58AF3&guid=7981028948&uin=393651460&fromtag=66

需要通过反向代理的方式请求
在配置build/webpack.dev.conf.js的devServer中

 before(app){
      // 由于请求的referer和host不同，所以前端不能拿到数据，需要后端做一个代理
      //  后端向有数据的服务端发送请求，拿到数据，然后前端在向自己的服务器请求那数据
      //  这里使用axios实现ajax请求：axios是一个基于promise的HTTP库，可以用于浏览器和node.js
      // 在浏览器创建XMLHttpRequest对象，从node.js创建http请求
      app.get('/api/getDiscList', function (req, res) {//这里的路径是给前端发送请求的url
        const url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
        // axios发送get请求，可以自己配置config
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          //  params是即将与请求一起发送的url参数，无格式对象/URLSearchParams对象
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })

      app.get('/api/music', function (req, res) {//这里的路径是给前端发送请求的url
        const url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'
        // axios发送get请求，可以自己配置config
        axios.get(url, {
          headers: {
            referer: 'https://c.y.qq.com/',
            host: 'c.y.qq.com'
          },
          //  params是即将与请求一起发送的url参数，无格式对象/URLSearchParams对象
          params: req.query
        }).then((response) => {
          res.json(response.data)
        }).catch((e) => {
          console.log(e)
        })
      })

然后：在src/api/ singer.js 定义getMusic方法
注意:guid是会变化的,以自己抓取的实际值为准


export function getMusic(songmid) {
  const url = '/api/music'
  const data = Object.assign({}, commonParams, {
    songmid: songmid,
    filename: 'C400' + songmid + '.m4a',
    guid: 7981028948,
    platform: 'yqq',
    loginUin: 0,
    hostUin: 0,
    needNewCode: 0,
    cid: 205361747,
    uid: 0,
    g_tk: 1928111839
  })
  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

在src/common/song.js定义createSong方法

export function createSong(musicData, songVkey) {
  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://ws.stream.qqmusic.qq.com/${musicData.songid}.m4a?fromtag=46`
    url: `http://dl.stream.qqmusic.qq.com/C400${musicData.songmid}.m4a?vkey=${songVkey}&guid=7981028948&uin=0&fromtag=66`
  })
}

最后应用到组件上src/components/singer-detail/singer-detail.vue

_normalizeSongs(list) {
      console.log(list)
      let ret = []
      list.forEach((item) => {
        let {musicData} = item
        if (musicData.songid && musicData.albummid) {
          getMusic(musicData.songmid).then((res) => {
            const svley = res.data.items
            const songVkey = svley[0].vkey
            ret.push(createSong(musicData, songVkey))
          })
        }
      })
      console.log(ret)
    }