最近在学习使用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./C400001J5QJL1pRQYB.m4a?vkey=5D8FB6B328D845F93A92F881C0EC819D8F377AC72786615BCAB0E7913CFF1DF2C6AA98FA110D7496D1D4671392617555D68586536ACD9B7B&guid=7981028948&uin=393651460&fromtag=66
下面来分析一下正确的播放源地址
http://dl.stream./C400001J5QJL1pRQYB.m4a?vkey=39328742C4B3731730FA8FBF10622F8ED1EF66D68894482468410CD8D1535999A6AC1F4CA75118E7892EEAA1460E8C580628230C40C58AF3&guid=7981028948&uin=393651460&fromtag=66
由此我们可以推断出： http://dl.stream./C400001J5QJL1pRQYB.m4a?vkey=39328742C4B3731730FA8FBF10622F8ED1EF66D68894482468410CD8D1535999A6AC1F4CA75118E7892EEAA1460E8C580628230C40C58AF3&guid=7981028948&uin=393651460&fromtag=66
其实就是：
http://dl.stream./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) {//这里的路径是给前端发送请求的urlconst url = 'https://c./splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'// axios发送get请求，可以自己配置configaxios.get(url, {headers: {referer: 'https://c./',host: 'c.'},// params是即将与请求一起发送的url参数，无格式对象/URLSearchParams对象params: req.query}).then((response) => {res.json(response.data)}).catch((e) => {console.log(e)})})app.get('/api/music', function (req, res) {//这里的路径是给前端发送请求的urlconst url = 'https://c./base/fcgi-bin/fcg_music_express_mobile3.fcg'// axios发送get请求，可以自己配置configaxios.get(url, {headers: {referer: 'https://c./',host: 'c.'},// 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: `/music/photo_new/T002R300x300M000${musicData.albummid}.jpg?max_age=2592000`,// url: `http://ws.stream./${musicData.songid}.m4a?fromtag=46`url: `http://dl.stream./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} = itemif (musicData.songid && musicData.albummid) {getMusic(musicData.songmid).then((res) => {const svley = res.data.itemsconst songVkey = svley[0].vkeyret.push(createSong(musicData, songVkey))})}})console.log(ret)}
注意：guid是可变的
如果觉得《vue.js最新版获取QQ音乐播放源》对你有帮助，请点赞、收藏，并留下你的观点哦！
