关于qq音乐audio标签里src的获取问题

最近学习黄毅老师的移动端音乐 WebApp时，在使用audio 的url时发现地址已经被禁了，在网上各种找终于找到了解决办法。

刚开始的时候我是直接使用url，比如类似于这样

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

但是发现这个url只有极少部分的歌曲可以播放，大部分的歌曲还是gg了

然后我去qq音乐官网看了一下

发现这里的url里多了个vkey，所以关键就是怎么获取vkey

最终解决方案：

1.在webpack.dev.config.js中配置代理获取vkey
app.get('/api/music', function(req, res) {
    var url = 'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'

    axios.get(url, {
      headers: {
        referer: 'https://c.y.qq.com/',
        host: 'c.y.qq.com'
      },
      params: req.query
    }).then((response) => {

      res.json(response.data)

    }).catch((e) => {
      console.log(e)
    })
  })

然后继续在api/song.js中配置：

export function getMusic(mid) {
  const url = '/api/music'

  const data = Object.assign({}, commonParams, {
    songmid: mid,
    filename:'C400' + mid +'.m4a',
    guid:6442406400,
    platform:'yqq',
    loginUin:0,
    hostUin: 0,
    needNewCode: 0,
    g_tk:5381,
    uin:0,
    cid:205361747,
    format: 'json'
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    return Promise.resolve(res.data)
  })
}

2. 在有获取url的地方进行调用，比如singer-detail.vue里：

_normalizeSongs(list) {
let ret = []
list.forEach((item) => {
    let {musicData} = item
    if (musicData.songid && musicData.albummid) {
      getMusic(musicData.songmid).then((res) => { // 这里需要先获取vkey
        if (res.code === ERR_OK) {
          const svkey = res.data.items
          const songVkey = svkey[0].vkey
          const newSong = createSong(musicData, songVkey) // 在这里把vkey和musicData传进去
          ret.push(newSong)
        }
      })
    }
})
return ret
}

3.最后在common/js/song.js里改变一下url：

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?vkey=${songVkey}&guid=6442406400&uin=0&fromtag=66`
})

关于qq音乐audio标签里src的获取问题

猜你喜欢