LOLILI

提供一个歌词的简单解析方法

[ti:ときめきポポロン♪]
[ar:チマメ隊]
[al:ときめきポポロン♪]
[by:菜籽酱]
[00:00.54]「ときめきポポロン♪」
[00:01.75]TVアニメ「ご注文はうさぎですか?」第2期EDテーマ
[00:02.58]歌：チマメ隊 -チノ(CV.水瀬いのり) / マヤ(CV.徳井青空) / メグ(CV.村川梨衣)-
[00:03.59]作詞：うらん
[00:04.39]作曲：大隅知宇
[00:05.18]編曲：千葉直樹
[00:05.83]
[00:06.36]まだ知らないこと たくさんある
[00:09.24]見つけちゃったなら
[00:12.00]それは冒険の始まりです
[00:14.80]ワクワクするよね!
[00:16.86]
[00:17.67]未来地図はどこ? わかんないから
[00:20.65]いっそ作っちゃおう

以上就是一部分简单的lrc格式的歌词，只有一个时间段+歌词，这种比较常见，也比较容易解析

通常我们在制作音乐播放器时需要显示歌词和实现歌词的滚动

第一步，我的想法是先把歌词按照换行符分割成数组

const _array = lrc.split('\n');

分割以后就得到了[00:17.67]未来地図はどこ? わかんないから这样的数组集合。

第二步，分割时间与歌词部分

let match = _array[i].match(/\[\d+:\d{2}\.\d+\]/g);

如果成功，match就是时间戳部分[00:17:67]

第三步，分割时间戳[00:17:67]

let sss = match[0].match(/\d+/g);
let m = parseInt(sss[0]);  //分
let s = parseInt(sss[1]);  //秒
let ms = parseInt(sss[2]); //毫秒
lrcTime = m * 60 + s + parseFloat('0.' + ms);

第四步，将解析出来的时间和歌词存入数组中

完整代码

const _array = music.lrc.split('\n');
let lrcList = [];
for (let i = 0; i < _array.length; i++) {
    let match = _array[i].match(/\[\d+:\d{2}\.\d+\]/g);
    if (match) {
        let lrcTime;
        //精确到毫秒
        let sss = match[0].match(/\d+/g);
        let m = parseInt(sss[0]);  //分
        let s = parseInt(sss[1]);  //秒
        let ms = parseInt(sss[2]); //毫秒
        lrcTime = m * 60 + s + parseFloat('0.' + ms);
        lrcList.push({
            lrcTime,
            lrcText: _array[i].replace(/\[\d+:\d{2}\.\d+\]/g, '')
        });
    }
}

在audio的timeupdate事件中获取当前的播放位置currentTime，循环我们解析出来的歌词数组就可以获取当前的播放歌词了

for (let i = lrcList.length - 1; i >= 0; i--) {
    if (lrcList[i].lrcTime < currentTime) {
        //设置当前歌词
        return;
    }
}