vue-music（15）歌词的处理

歌词被referer（）保护，所以要景后端反向代理取得数据。
得到的数据是格式不正确，不是一般的json格式，所以经过正则变换一下

     var ret = response.data // 歌词数据
          if (typeof ret === 'string') {
            var reg = /^\w+\(({[^()]+})\)$/
            // 以单词a-z，A-Z开头，一个或多个
            // \(\)转义括号以（）开头结尾
            // （）是用来分组
            // 【^()】不以左括号/右括号的字符+多个
            // {}大括号也要匹配到
            var matches = ret.match(reg)
            if (matches) {
              ret = JSON.parse(matches[1])
            // 对匹配到的分组的内容进行转换
            }
          }

得到的是json格式，但还是不行，有乱码即%。&。。等，多以要在处理

    var unescapeHTML = function (lrc) {
          var t = document.createElement('div')
          t.innerHTML = lrc + ''
          return t.innerHTML
        }
        this.lyric = unescapeHTML(ret.lyric)
        resolve(this.lyric)

现在得到的是正常的字符串
引用第三方库 ‘lyric-parser’， 将歌词转换成可以用的竖排格式，并与时间戳想匹配

npm  i js-base64 --save

getLyric () {
      this.currentSong.getLyric().then((lyric) => {
        this.currentLyric = new Lyric(lyric)
        console.log(this.currentLyric)
      })
    }

对于base64格式的转换

import { Base64 } from 'js-base64'
this.lyric = Base64.decode(res.lyric)

完整代码： 封装一个createSong对象，再次创立多个方法

import {getLyric} from '../../Api/song.js'
// import {ERR_OK} from '../../Api/config'
// import {Base64} from 'js-base64'

export default class Song {
  constructor ({id, songname, singer, albumname, albummid, duration, image, imageurl, url}) {
    // 绑到实例上来
    this.id = id
    this.songname = songname
    this.singer = singer
    this.imageurl = imageurl
    this.albumname = albumname
    this.duration = duration
    this.image = image
    this.url = url
  }
  getLyric () {
    if (this.lyric) {
      return Promise.resolve(this.lyric)
    }
    return new Promise((resolve, reject) => {
      getLyric(this.id).then((res) => {
        var ret = res
        if (typeof ret === 'string') {
          var reg = /^\w+\(({[^()]+})\)$/
          // 以单词a-z，A-Z开头，一个或多个
          // \(\)转义括号以（）开头结尾
          // （）是用来分组
          // 【^()】不以左括号/右括号的字符+多个
          // {}大括号也要匹配到
          var matches = ret.match(reg)
          if (matches) {
            ret = JSON.parse(matches[1])
          // 对匹配到的分组的内容进行转换
          }
        }
        var unescapeHTML = function (lrc) {
          var t = document.createElement('div')
          t.innerHTML = lrc + ''
          return t.innerHTML
        }
        this.lyric = unescapeHTML(ret.lyric)
        resolve(this.lyric)
        // console.log(this.lyric)
      })
    })
  }
}

// 工厂方法 调用new 创建实例
export function createSongs (musicData) {
  return new Song({
    id: musicData.songid,
    mid: musicData.songmid,
    singer: filterSinger(musicData.singer),
    // singer: musicData.singer[0].name,
    albumname: musicData.albumname,
    songname: musicData.songname,
    duration: musicData.interval, // 播放时长
    image: 'https://y.gtimg.cn/music/photo_new/T001R150x150M000' + musicData.singer[0].mid + '.jpg?max_age=2592000',
    imageurl: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000' + musicData.albummid + '.jpg?max_age=2592000',
    url: `http://dl.stream.qqmusic.qq.com/C400${musicData.songmid}.m4a?guid=6318207668&vkey=7F06E8EEC445CEE42DB564EB04E2D0FD7755DCABA7242530052859C8A5350511A8AA3B3C1DA0D933170E8DCC5583950B21FDDBA5BFD9AD13&uin=0&fromtag=38`
    // url: `http://dl.stream.qqmusic.qq.com/C400${musicData.songmid}.m4a?guid=6318207668&vkey=99645EE65B4DAC02E42A7AD3383A8BA39845B9A252DCD878B6FFEEB15E4655149F4E0E9D877841593582E149155C218545366FCB106D22AB&uin=7134&fromtag=38`
  })
}
// 遍历数组 找出数组中的对象的name 多个名字用/组合
export function filterSinger (singer) {
  let ret = []
  if (!singer) {
    return ''
  }
  singer.forEach((s) => {
    ret.push(s.name)
  })
  return ret.join('/')
}