大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

用JS解析LRC格式的歌词

1、把歌词载入。

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

<!-- LRC歌词 -->
<textarea id="lrc_content" cols="30" style="display: none">[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]如此妖娆婀娜
[01:22.85][02:45.85][04:35.01]蹉跎着岁月又蹉跎了自我
[01:27.20][02:50.16][04:39.25]前方迷途太多
[01:29.32][02:52.33][04:41.39]坚持才能洒脱
[01:31.56][02:54.46][04:43.58]走出黑暗就能逍遥又快活
[01:38.54]
[01:49.43]我寻找沙漠绿洲
[01:51.34]出现海市蜃楼
[01:53.44]我仿佛看到她在那里等候
[01:57.80]想起了她的温柔
[01:59.91]滚烫着我的胸口
[02:02.19]迷失在昨夜的那壶老酒
[02:06.42]我穿上大头皮鞋
[02:08.75]跨过凛冽荒野
[02:10.75]我仿佛穿越到另一个世界
[02:15.20]阿拉丁神灯要倾斜
[02:17.33]天堂地狱已然重叠
[02:19.51]突然之间飞来一只蝴蝶
[03:01.04]
[03:47.15]我已坠入在这神奇的国度
[03:51.28]驼铃相伴走向圣堂之路
[03:55.64]原谅我曾经恍惚陷入迷途
[03:59.80]遮住了眼眸
[04:01.80]湮没了意图
[04:04.02]怎能被这样征服
[04:48.19]梦里回到最初
[04:50.08]浪潮起起伏伏
[04:52.29]彷徨着未来又彷徨着孤独
[04:56.74]漫长人生旅途
[04:58.87]花开花落无数
[05:01.03]沸腾的时光怎能被荒芜
[05:05.76]清晨又到日暮
[05:07.48]天边飞鸟群逐
[05:09.79]摇曳着苍穹又描摹着黄土
[05:14.26]东方鱼肚白出
[05:16.53]烈日绽放吐露
[05:18.47]放下尘浮我已踏上归途
[05:25.04]</textarea>

Jetbrains全家桶1年46，售后保障稳定

再用JS把歌词读出来：

<script>
    var lrc = document.getElementById("lrc_content").innerHTML;
</script>

方法二：用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);
        }
    };
    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、把解析后的歌词呈现在页面上

定义一个列表标签：

<ul id="lyric"></ul>

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

function showLRC() { 

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

好了，解析后的歌词就可以用在歌曲播放页面上，用来在播放歌曲时呈现相应歌词了。