用JS解析LRC格式的歌词，实现歌词同步滚动效果

用JS解析LRC格式的歌词

1、把歌词载入。

方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。

[ti:沙漠骆驼]
[ar:展展与罗罗]
[al:沙漠骆驼]
[by:0]
[offset:0]
[00:00.59]沙漠骆驼 - 展展与罗罗
[00:02.97]词：展展与罗罗
[00:04.46]曲：展展与罗罗
[00:26.45]我要穿越这片沙漠
[00:28.51]找寻真的自我
[00:30.50]身边只有一匹骆驼陪我
[00:34.96]这片风儿吹过
[00:37.15]那片云儿飘过
[00:39.26]突然之间出现爱的小河
[00:43.63]我跨上沙漠之舟
[00:45.71]背上烟斗和沙漏
[00:47.92]手里还握着一壶烈酒
[00:52.35]漫长古道悠悠
[00:54.51]说不尽喜怒哀愁
[00:56.56]只有那骆驼奔忙依旧
[01:01.08][02:23.81][04:13.30]什么鬼魅传说
[01:03.12][02:25.94][04:15.20]什么魑魅魍魉妖魔
[01:05.43][02:28.30][04:17.47]只有那鹭鹰在幽幽的高歌
[01:09.81][02:32.61][04:21.83]漫天黄沙掠过
[01:11.90][02:35.04][04:23.90]走遍每个角落
[01:14.05][02:36.99][04:26.20]行走在无尽的苍茫星河
[01:18.69][02:41.50][04:30.60]白天黑夜交错
[01:20.80][02:43.56][04:32.65]如此妖娆婀娜

再用JS把歌词读出来：

方法二：用Ajax把后台的lrc文件载入。

var lrc = "";
function getLRC() {
    var ajax = new XMLHttpRequest();
    ajax.open("GET", "media/沙漠骆驼 - 展展与罗罗.lrc");
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            lrc = ajax.responseText;
            //console.log(lrc);
            createLrcObj(lrc); // 调用createLrcObj函数，并传入lrc参数
        }
    };
    ajax.send(null);
}
getLRC();

2、把LRC歌词解析为JS对象

代码如下：

var oLRC = {
    ti: "", //歌曲名
    ar: "", //演唱者
    al: "", //专辑名
    by: "", //歌词制作人
    offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
    ms: [] //歌词数组{t:时间,c:歌词}
};

function createLrcObj(lrc) {
	if(lrc.length==0) return;
    var lrcs = lrc.split('\n');//用回车拆分成数组
    for(var i in lrcs) {//遍历歌词数组
    	lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格
        var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容
        var s = t.split(":");//分离:前后文字
        if(isNaN(parseInt(s[0]))) { //不是数值
            for (var i in oLRC) {
                if (i != "ms" && i == s[0].toLowerCase()) {
                    oLRC[i] = s[1];
                }
            }
        }else { //是数值
            var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个
            var start = 0;
            for(var k in arr){
                start += arr[k].length; //计算歌词位置
            }
            var content = lrcs[i].substring(start);//获取歌词内容
            for (var k in arr){
                var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容
                var s = t.split(":");//分离:前后文字
                oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组
                    t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),
                    c: content
                });
            }
        }
    }
    oLRC.ms.sort(function (a, b) {//按时间顺序排序
        return a.t-b.t;
    });
    /*
    for(var i in oLRC){ //查看解析结果
        console.log(i,":",oLRC[i]);
    }*/
}

createLrcObj(lrc);

解析后的歌词位于oLRC对象的ms数组中：
oLRC.ms[i].t 是第i行歌词的时间，以秒计；
oLRC.ms[i].c 是第i行歌词。

3、把解析后的歌词呈现在页面上

定义一个列表标签：

用JS把歌词写到标签里面：

function showLRC() {
    var s="";
    for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表
        s+='
'+oLRC.ms[i].c+'
';
    }
    document.getElementById("lyric").innerHTML = s;
}
showLRC();

以上完毕。

以下是结合这个页面加工后的完整代码：https://blog.csdn.net/yzy_csdn/article/details/84536646

效果：