vue-music项目:歌词获取并解析为json

2018-10-13 admin

播放器歌词数据需要从qq官网上抓取,打开qq音乐任意一首歌曲的播放页面,在chrome的Network中搜索lyric,即获取歌词的接口 歌词获取接口

1. 配置接口

qq对接口进行了安全控制,在devserver中模拟请求头等从而避开 在config文件夹中index.js文件中,配置proxyTable

proxyTable: {
      //target:真实请求的值
      //bypass:对应的函数是请求之前可以进行的操作
      //req这个参数是请求的信息,可以在这里设置请求头信息
      '/api/lyric':{
        target: 'https://szc.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg',
        bypass: function (req, res, proxyOptions) {
          req.headers.referer = 'https://c.y.qq.com';
          req.headers.host = 'c.y.qq.com';
        },
        pathRewrite: {
          '^/api/lyric': ''
        }
      }
    }

2. 调取接口的API

在api文件夹下创建song.js

export function getLyric(mid) {
  const url = '/api/lyric'
  const data = Object.assign({}, commonParams, {
    songmid: mid,
    platform: 'yqq',
    hostUin: 0,
    needNewCode: 0,
    pcachetime: +new Date(),
    format: 'json',
    g_tk: 67232076
  })

  return axios.get(url, {
    params: data
  }).then((res) => {
    if (typeof res.data === 'string') {
      //返回的jsonp格式,利用正则,提取我们需要的json字段
      const reg = /^\w+\(({[^()]+})\)$/
      var matches = res.data.match(reg)
      if (matches) {
        let val = JSON.parse(matches[1])
        //为什么用Promise:为了后边的方法调用的时候,进一步then,操作数据
        return Promise.resolve(val)
      }
    }
  })
}

3.在Song类中调用

为什么写在class Song{}中:因为这样可以它的实例直接调用自己的歌词

export default class Song {
  ....
  //当初没有搞懂为什么lyric不再constructor中定义:下面的if判断,防止重复请求歌词
  getLyric() {
    if (this.lyric) {
      return Promise.resolve(this.lyric)
    }
    //这里用Promsie返回,同样的道理:后面调用这个方法,方便进一步操作数据,同2中的promsie
    return new Promise((resolve, reject) => {
      getLyric(this.mid).then((res) => {
        if (res.code === ERR_OK) {
          //返回数据的是 base64 的字符串,需要解码,这里用到了第三方库: js-base64
          this.lyric = Base64.decode(res.lyric)
          resolve(this.lyric)
        } else {
          reject(new Error('no lyric'))
        }
      })
    })
  }
}

3.真正调取方法

在player.vue中methods,调取方法

getLyric() {
  //在2中,方法定义在class Song{}类中,这个时候this.currentSong是类的实例,可以直接调用定义的实例方法
  this.currentSong.getLyric().then((lyric) => {
    //利用第三方库: js-lyric ,解析我们的歌词,生成方便操作的对象
    //new生成的实例,还有一些api方便使用play、stop等等
    this.currentLyric = new Lyric(lyric, this.handleLyric)
    if (this.playing) {
      this.currentLyric.play()
    }
  }).catch(() => {
    //如果歌词有问题,初始化
    this.currentLyric = null
    this.playingLyric = ''
    this.currentLineNum = 0
  })
},

在watch里的currentSong中调用this.getLyric()

原文链接:https://segmentfault.com/a/1190000016666222

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42548.html

文章标题:vue-music项目:歌词获取并解析为json

相关文章
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
为什么AngularJS能够成功?
AngularJS 为什么成功了? 写在前面的话 继上一篇总结之后, 觉得必须补充一下 AngularJS 与 Ionic 的技术性话题 于是, 连夜写了这第一篇. 讲述了 AngularJS 与其他对手之间的优与缺. 我有任何理解错误, ...
2015-11-12
线程有什么用处? 为什么有些东西注定不会流行
多线程的领域也许只有一个: 图形学. 我们以一个游戏来说明 @ |___|___|___|___|___ @是一个玩家, 往前走, 每一个___是1米. 每当@走到1米的时候, 会绘制一个蘑菇*给玩家看. @|___*___|___|___...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
Easyui Tree获取当前选择节点的所有顶级父节点
只支持四层目录结构,比较笨的一个方法 JS代码 var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 ...
2017-03-17
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax <form id="myForm" action="#"&...
2017-04-01
WebSocket断开原因分析,再也不怕为什么又断开了
阅读原文:https://wdd.js.org/websocket-… 1. 把错误打印出来 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来。 在线demo地址:https://wdd.js.org/we...
2018-04-25
回到顶部