關於qq音樂audio標籤裡src的獲取問題

xyokay發表於2018-12-16

最近學習黃毅老師的移動端音樂 WebApp時，在使用audio 的url時發現地址已經被禁了，在網上各種找終於找到了解決辦法。

 

剛開始的時候我是直接使用url，比如類似於這樣

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

但是發現這個url只有極少部分的歌曲可以播放，大部分的歌曲還是gg了

 

然後我去qq音樂官網看了一下

<audio src="http://dl.stream.qqmusic.qq.com/C400003mAan70zUy5O.m4a?guid=6255522206&amp;vkey=4406ED3CA6EB48D8312EE05B773EBEA3FE17CFD0A6365CCCCADA200473FE031CA3C174725B65C8EEDB122627F43371D405931B972070704B&amp;uin=0&amp;fromtag=3&amp;r=006445306898875014" autoplay="" preload="load"></audio>

發現這裡的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`
})

 

 

相關文章