vue音乐播放器实战---解决获取不到播放音频api的方式

按照慕课网上的教程，在第六章获取播放api的时候，发现教程里的url已经不能使用，因而记录一下，若再次失效时怎么寻找。

首先先观察音乐播放

在<audio>标签中就有播放地址，和之前老师教的不一样的地方在于，多了guid以及一个vkey值（注意这里的guid根据抓取的值而定，是变化的）

因而在之前仅仅获取mid的基础上是不够的，需要获取vkey，这里就用到了在推荐页面上使用的方法

//在api/singer中添加方法

export function getMusic(songmid) {
    const url = '/api/getMusic'
    const data = Object.assign({}, commonParams, {
        songmid: songmid,
        filename: 'C400' + songmid + '.m4a',
        guid: 5963506884, // 变化的数值，根据上图中抓取的值而定
        platform: 'yqq',
        loginUin: 0,
        hostUin: 0,
        needNewCode: 0,
        cid: 205361747,
        uin: 0,
        format: 'json'
    })
    return axios
        .get(url, {
            params: data
        })
        .then(res => {
            return Promise.resolve(res.data)
        })
}

同时在webpack.dev.conf.js中添加

before(app){        
                app.get('/api/getMusic', function(req, res) {
                // 获取vkey
                var url =
                    'https://c.y.qq.com/base/fcgi-bin/fcg_music_express_mobile3.fcg'

                axios
                    .get(url, {
                        headers: {
                            // 通过node请求QQ接口，发送http请求时，修改referer和host
                            referer: 'https://y.qq.com/',
                            host: 'c.y.qq.com'
                        },
                        params: req.query // 把前端传过来的params，全部给QQ的url
                    })
                    .then(response => {
                        res.json(response.data)
                    })
                    .catch(e => {
                        console.log(e)
                    })
            })
}

由此便可获取到vkey，随之将这个值传达到之前使用的函数中，修改common/js/song.js

//修改参数
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://isure.stream.qqmusic.qq.com/C400${
      musicData.songmid
    }.m4a?guid=5963506884&vkey=${songVkey}&uin=0&fromtag=66`
    })
}

接着就修改vue文件中的函数

//修改singer-detail.vue

        _normalizeSongs(list){
            let ret = []
            list.forEach((item)=>{
                let {musicData} = item
                if(musicData.songid && musicData.albumid){
                    //记得在文件中引入
                    getMusic(musicData.songmid).then((res)=>{
                        if(res.code === ERR_OK){
                            //console.log(res.data)
                            const svkey = res.data.items
                            const songVkey = svkey[0].vkey

                            //传入songVkey
                            const newSong = createSong(musicData,songVkey)
                            ret.push(newSong)
                        }
                    })
                }
            })
            return ret
        }

 

试着输出一下console.log(this.songs),验证一下此时的数组中的url是否能出现播放链接即可