美文网首页
播放器歌词数据抓取

播放器歌词数据抓取

作者: 我还是不知道取啥名儿 | 来源:发表于2017-10-29 23:39 被阅读0次

在api中写一个song.js用于抓取歌词数据。

通过查看qq音乐的js请求,可以得到歌词数据的url,由于请求头header中需要referer为为'https://c.y.qq.com/',host为'c.y.qq.com'。这时就不能直接使用jsonp,需要在服务端写一个方法来改变请求头。

1.在dev-server.js中定义方法改变请求头

var apiRoutes = express.Router()  //得到Router

apiRoutes.get('/getLyric', function(req, res) {

      var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'

      axios.get(url, {

             headers: {

                        referer: 'https://c.y.qq.com/',

                         host: 'c.y.qq.com'

            },

            arams: req.query

       }).then((response) => {

              // 这里的response.data为字符串,需要进行处理,得到json

             var ret = response.data

            // ret: "MusicJsonCallback({\"retcode\":0,\"code\":0,\"subcode\":0,\"lyric\":\"W3R......T\",\"trans\":\"\"})"   

          if (typeof ret === 'string') {

                 var reg = /^\w+\(({[^()]+})\)$/

                 var matches = ret.match(reg)

                if (matches) {

                    ret = JSON.parse(matches[1])

               }

     }

            // res.json()发送一个JSON应答,参数必须为json

           res.json(ret)

     }).catch((e) => {

           console.log(e)

     })

})

app.use('/api', apiRoutes)

2.在src中的api下写song.js,访问dev-server.js中的getLyric方法,抓取数据

使用axios.get()方法进行访问,get方法有两个参数:

① url   //这里的url为dev-server.js中的getLyric,即‘api/getLyric’

② params //抓取歌词数据需要的参数

axios支持Promise的api,可以使用then来定义回调函数,song.js中的返回如下:

return axios.get(url, {

          params: data

     }).then((response) => {

         // response的结构包括:config,headers,request,data,status,statusText

        // 其中response.data为dev-server.js中res.json发送的json数据

         return Promise.resolve(response.data)

})

这样得到就抓取到了歌词数据,但是我们要在项目中使用它,则需要将它加入到song类中

3.在song的class中,定义getLyric方法

getLyric() {

     return new Promise((resolve, reject) => {

              getLyric(this.mid).then((res) => {

                       if (res.retcode === ERR_OK) {

                            this.lyric = res.lyric

                            console.log(this.lyric)

                     }

            })

    })

}

在getLyric方法中,调用了api/song.js中的getLyric方法,该方法返回 Promise.resovle(data),其中Promise.resolve()方法的作用是将现有的对象转为Promise对象, 当参数不是具有then方法的对象,或者根本不是对象时,Promise.resolve方法返回一个新的Promise对象,状态为resolved

因此,在class Song中new Promise中,getLyric方法返回的promise对象状态为resolved,触发then,将lyric赋值给Song对象的lyric属性

相关文章

  • 播放器歌词数据抓取

    在api中写一个song.js用于抓取歌词数据。 通过查看qq音乐的js请求,可以得到歌词数据的url,由于请求头...

  • 仿QQ音乐播放器

    效果图:可实现左右点击下一个播放 仿QQ音乐播放器 Ajax方式请求后端数据 播放器制作 滚动歌词制作 ...

  • [开源APP推荐] LittleFrog-MusicPlayer

    基于AVPlayerItem的在线音乐播放器,音乐数据来源于百度. 抓取了百度音乐歌单/新曲/搜索以及排行的数据....

  • 播放器歌词数据解析

    1.引入js-base64对歌词数据进行解码 修改class Song类中的getLyric方法 this.lyr...

  • 04_中央气象台

    简述 再次进行分析抓取气象数据练习,本节主要抓取预报气象数据。抓取数据请勿存档,商用请联系官方。 爬取对象 抓取中...

  • Python抓取歌词

    以某云为例,其实不太想写出来,用多了可能不灵了。 构造header 因为是通过网页版抓取 获取歌曲id 以下代码是...

  • iOS 防止 Charles 抓取数据

    iOS 防止 Charles 抓取数据 iOS 防止 Charles 抓取数据

  • 03_中央气象台

    简述 继续分析抓取气象数据练习,本节主要抓取实时气象数据。抓取数据请勿存档,商用请联系官方。 爬取对象 抓取中央气...

  • requests-code说明

    Charles抓取的request的raw数据 chrome抓取的network数据

  • 一个简单的本地音乐播放器

    本次写的是一个简单的音乐播放器;写播放器首先要下载一首歌, 和歌词, 然后解析你的歌词;把歌词部分和时间部分分别放...

网友评论

      本文标题:播放器歌词数据抓取

      本文链接:https://www.haomeiwen.com/subject/wvjupxtx.html