歌词解析的JS实现及某类库的源码解读

最近在做慕课网上音乐APP项目时碰到的一个小功能，觉得比较有意思，就稍微研究了一下。

1.功能需求

要实现一个在线音乐播放器的歌词功能，需要歌词列表，并且根据音乐播放进度，凸显出当前歌词信息

歌词界面

歌词是从QQ音乐官网的线上接口直接抓取的，Base64格式加密过，解码之后是如下一段Sring字符串

'[ti:泡沫]\n[ar:邓紫棋]\n[al:Xposed]\n[by:]\n[offset:0]\n[00:00.10]泡沫 - G.E.M. 邓紫棋\n[00:00.20]词：G.E.M. 邓紫棋\n[00:00.30]曲：G.E.M. 邓紫棋\n[00:00.40]\n[00:01.83]阳光下的泡沫 是彩色的\n[00:08.40]就像被骗的我 是幸福的\n[00:15.44]追究什么对错 你的谎言\n[00:22.31]基于你还爱我\n[00:26.05]\n[00:28.61]美丽的泡沫 虽然一刹花火\n[00:35.54]你所有承诺 虽然都太脆弱\n[00:42.40]但爱像泡沫 如果能够看破\n[00:49.45]有什么难过\n[00:52.95]\n[00:57.82]早该知道泡沫 一触就破\n[01:04.18]就像已伤的心 不胜折磨'
// 后边还有很长一部分，格式都一样的，就不都写上了

歌词（为了直观，将换行符去掉了）

2.实现

先说说我自己的想法，在没直接引入第三方类库实现前，我自己试着写了这两行代码，具体的实现没有细写，希望先将字符串拆解，然后将信息合理地重组，得到一个可用的JSON格式对象。事后证实，思路还是很正确的（窃喜！！）

var reg = /\[([A-Za-z]+):([^\]\n]*)\]/g                   //拆分基本信息中的字段
var reg = /\[(\d{2,}):(\d{2})\.(\d{2,})\]([^\]\n]*)/g    // 拆分时间和歌词

3. lyric-parser源码解读

最终实现，是引用了黄轶老师开源的一个类库。花了点时间研读了下源码，根据自己的理解，写了注释。
毕竟个人水平有限，理解不对的地方，欢迎指正。
lyric-parser项目地址：https://github.com/ustbhuangyi/lyric-parser

个人认为整个类库最核心的代码，也是最重要的实现，timeExp 和 matchs 中的两句正则
分别用来匹配标签属性 和 歌词
和我自己写的，也算是（不要脸了，那就算是吧）差不多吧！

// '\['                 转义方括号
// '\d{2,}'             0-9任意数字重复至少两次，分别匹配分钟和整数秒
// (?:\.(\d{2,3}))?     小括号里的一坨，也就是毫秒，可能有，也可能没有
// ']'                  匹配括号，很奇怪这个括号竟然不需要转义，奇葩！我也是测试后才知道的
const timeExp = /\[(\d{2,}):(\d{2,3})(?:\.(\d{2,3}))?]/g
// 播放状态常量
const STATE_PAUSE = 0
const STATE_PLAYING = 1

// 重新定义了更加语义化的标签名
const tagRegMap = {
    title: 'ti',
    artist: 'ar',
    album: 'al',
    offset: 'offset',
    by: 'by'
}

function noop() {
}

// 输出 Lyric 类
export default class Lyric {
    constructor(lrc, handler = noop) {
        this.lrc = lrc
        this.tags = {}
        this.lines = []
        this.handler = handler
        this.state = STATE_PAUSE
        this.curLine = 0

        this._init()
    }

    _init() {
        this._initTag()

        this._initLines()
    }

    _initTag() {
        for (let tag in tagRegMap) {
            // 匹配出歌词的标签属性
            const matchs = this.lrc.match(new RegExp(`\\[${tagRegMap[tag]}:([^\\]]*)`, 'i'))
            // 填充进 tags 对象
            this.tags[tag] = matchs && matchs[1] || ''
        }
    }

    _initLines() {
        // 通过换行符，拆解歌词
        const lines = this.lrc.split('\n')
        for (let i = 0; i < lines.length; i++) {
            const line = lines[i]
            // 匹配时间戳
            let result = timeExp.exec(line)
            if (result) {
                // 去掉时间，只留下文字部分
                const txt = line.replace(timeExp, '').trim()
                if (txt) {
                    // 将符合格式的歌词和时间转换后推进列表
                    this.lines.push({
                        time: result[1]*60*1000 + result[2]*1000 + (result[3] || 0)*10,
                        txt
                    })
                }
            }
        }

        // 按歌词的时间顺序重新排了一遍
        // 好像本来解析出来顺序就是对的，大概是为了以防万一吧
        this.lines.sort((a, b) => {
            return a.time - b.time
        })
    }

    // 通过时间，找到当前歌词的位置
    _findCurNum(time) {
        for (let i = 0; i < this.lines.length; i++) {
            if (time <= this.lines[i].time) {
                return i
            }
        }
        return this.lines.length - 1
    }

    // 调用处理函数，并将当前歌词和行数传入
    _callHandler(i) {
        if (i < 0) {
            return
        }
        this.handler({
            txt: this.lines[i].txt,
            lineNum: i
        })
    }

    // 持续输出当前的歌词位置
    _playRest() {
        let line = this.lines[this.curNum]
        // 根据歌词中带有的时间信息，计算出下一次歌词变更的时间间隔
        let delay = line.time - (+new Date() - this.startStamp)

        this.timer = setTimeout(() => {
            this._callHandler(this.curNum++)
            if (this.curNum < this.lines.length && this.state === STATE_PLAYING) {
                // 只要处于播放状态中，重复调用这个函数
                this._playRest()
            }
        }, delay)
    }

    // 暴露在类库外部调用的功能函数
    // 歌词播放
    play(startTime = 0, skipLast) {
        if (!this.lines.length) {
            return
        }
        // 修改播放状态
        this.state = STATE_PLAYING
        // 记录下播放开始瞬间的歌词当前值和时间戳
        this.curNum = this._findCurNum(startTime)
        this.startStamp = +new Date() - startTime

        if (!skipLast) {
            this._callHandler(this.curNum - 1)
        }

        if (this.curNum < this.lines.length) {
            clearTimeout(this.timer)
            this._playRest()
        }
    }

    // 切换播放状态
    togglePlay() {
        var now = +new Date()
        if (this.state === STATE_PLAYING) {
            this.stop()
            // 记录下暂停的时间戳
            this.pauseStamp = now
        } else {
            this.state = STATE_PLAYING
            // 如果是第一次播放，传入 0
            // 如果是从暂停处播放，就传入已经播放完的进度时间
            this.play((this.pauseStamp || now) - (this.startStamp || now), true)
        }
    }

    // 停止播放
    stop() {
        this.state = STATE_PAUSE
        clearTimeout(this.timer)
    }

    // 在指定位置开始播放
    seek(offset) {
        this.play(offset)
    }
}