阅读(430)评论(0)

banner

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

[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;
    }
}

发表评论

评论

暂无评论

    本日の格言
    博主闪亮登场!

    就算世界终结,也无所谓
    by 少女终末旅行

    超想说
    博主の友人
    对!就是这种低调,如同吃了炫迈
    超有爱
    TOP