1. 下载lrc文件
通过以下链接，可以搜索下载相关歌曲的lrc歌词文件
https://www.1ting.com/geci93979.html
2. 提取lrc文件的内容
用记事本打开下载的lrc文件，全选复制到js文件中
let lrc =
`[00:01.59]不再犹豫
[00:03.91]作词：小美 作曲：黄家驹
[00:06.46]演唱：Beyond
[00:08.55]
[00:29.48]无聊望见了犹豫
[00:32.87]达到理想不太易
[00:36.44]即使有信心
[00:38.58]斗志却抑止
[00:43.61]谁人定我去或留
[00:47.31]定我心中的宇宙
[00:50.83]只想靠两手向理想挥手
[00:56.88]
[00:58.15]问句天几高心中志比天更高
[01:05.11]自信打不死的心态活到老
[01:11.37]
[01:11.90]OH… 我有我心底故事
[01:19.41]亲手写上每段
[01:21.57]得失乐与悲与梦儿
[01:26.18]OH… 纵有创伤不退避
[01:33.77]梦想有日达成
[01:35.90]找到心底梦想的世界
[01:40.01]终可见
[01:43.83]
[02:09.64]谁人没试过犹豫
[02:13.28]达到理想不太易
[02:16.85]即使有信心
[02:18.91]斗志却抑止
[02:23.96]谁人定我去或留
[02:27.68]定我心中的宇宙
[02:31.28]只想靠两手向理想挥手
[02:36.83]
[02:38.41]问句天几高
[02:40.06]心中志比天更高
[02:45.57]自信打不死的心态活到老
[02:51.53]
[02:52.34]OH… 我有我心底故事
[02:59.91]亲手写上每段
[03:02.05]得失乐与悲与梦儿
[03:06.66]OH… 纵有创伤不退避
[03:14.07]梦想有日达成
[03:16.35]找到心底梦想的世界
[03:20.45]终可见
[03:24.04]
[03:25.06]OH… 亲手写上每段
[03:30.64]得失乐与悲与梦儿
[03:36.31]
[03:39.07]OH… 梦想有日达成
[03:45.05]找到心底梦想的世界
[03:49.60]终可见
[03:52.99]`;
3. 编写lrc解析函数parseLyric()
function parseLyric(lyric) {
const lrcObj = {
ti: "",
ar: "",
al: "",
by: "",
lrc: [],
};
/*
[ar:艺人名]
[ti:曲名]
[al:专辑名]
[by:编者（指编辑LRC歌词的人）]
[offset:时间补偿值] 其单位是毫秒，正值表示整体提前，负值相反。这是用于总体调整显示快慢的。
*/
const lrcArr = lyric
.split("\n")
.filter(function (value) {
// 1.通过回车去分割歌词每一行,遍历数组，去除空行空格
return value.trim() !== "";
})
.map(function (value) {
// 2.解析歌词
const line = parseLyricLine(value.trim());
// console.log(line);
if (line.type === "lyric") {
lrcObj.lrc.push(line.data);
} else {
lrcObj[line.type] = line.data;
}
return value.trim();
});
function parseLyricLine(line) {
const tiArAlByExp = /^\[(ti|ar|al|by):(.*)\]$/;
const lyricExp = /^\[(\d{2}):(\d{2}).(\d{2})\](.*)/;
let result;
if ((result = line.match(tiArAlByExp)) !== null) {
return {
type: result[1],
data: result[2],
};
} else if ((result = line.match(lyricExp)) !== null) {
return {
type: "lyric",
data: {
time: {
m: result[1],
s: result[2],
ms: result[3],
},
lyric: result[4].trim(),
},
};
}
}
return lrcObj;
}4. 调用lrc解析函数parseLyric()进行解析
let result = parseLyric(lrc);
最终 result 的值为一个对象，内容如下：
{
"ti": "",
"ar": "",
"al": "",
"by": "",
"lrc": [
{
"time": {
"m": "00",
"s": "01",
"ms": "59"
},
"lyric": "不再犹豫"
},
{
"time": {
"m": "00",
"s": "03",
"ms": "91"
},
"lyric": "作词：小美 作曲：黄家驹"
},
{
"time": {
"m": "00",
"s": "06",
"ms": "46"
},
"lyric": "演唱：Beyond"
},
{
"time": {
"m": "00",
"s": "08",
"ms": "55"
},
"lyric": ""
},
{
"time": {
"m": "00",
"s": "29",
"ms": "48"
},
"lyric": "无聊望见了犹豫"
},
{
"time": {
"m": "00",
"s": "32",
"ms": "87"
},
"lyric": "达到理想不太易"
},
{
"time": {
"m": "00",
"s": "36",
"ms": "44"
},
"lyric": "即使有信心"
},
{
"time": {
"m": "00",
"s": "38",
"ms": "58"
},
"lyric": "斗志却抑止"
},
{
"time": {
"m": "00",
"s": "43",
"ms": "61"
},
"lyric": "谁人定我去或留"
},
{
"time": {
"m": "00",
"s": "47",
"ms": "31"
},
"lyric": "定我心中的宇宙"
},
{
"time": {
"m": "00",
"s": "50",
"ms": "83"
},
"lyric": "只想靠两手向理想挥手"
},
{
"time": {
"m": "00",
"s": "56",
"ms": "88"
},
"lyric": ""
},
{
"time": {
"m": "00",
"s": "58",
"ms": "15"
},
"lyric": "问句天几高心中志比天更高"
},
{
"time": {
"m": "01",
"s": "05",
"ms": "11"
},
"lyric": "自信打不死的心态活到老"
},
{
"time": {
"m": "01",
"s": "11",
"ms": "37"
},
"lyric": ""
},
{
"time": {
"m": "01",
"s": "11",
"ms": "90"
},
"lyric": "OH… 我有我心底故事"
},
{
"time": {
"m": "01",
"s": "19",
"ms": "41"
},
"lyric": "亲手写上每段"
},
{
"time": {
"m": "01",
"s": "21",
"ms": "57"
},
"lyric": "得失乐与悲与梦儿"
},
{
"time": {
"m": "01",
"s": "26",
"ms": "18"
},
"lyric": "OH… 纵有创伤不退避"
},
{
"time": {
"m": "01",
"s": "33",
"ms": "77"
},
"lyric": "梦想有日达成"
},
{
"time": {
"m": "01",
"s": "35",
"ms": "90"
},
"lyric": "找到心底梦想的世界"
},
{
"time": {
"m": "01",
"s": "40",
"ms": "01"
},
"lyric": "终可见"
},
{
"time": {
"m": "01",
"s": "43",
"ms": "83"
},
"lyric": ""
},
{
"time": {
"m": "02",
"s": "09",
"ms": "64"
},
"lyric": "谁人没试过犹豫"
},
{
"time": {
"m": "02",
"s": "13",
"ms": "28"
},
"lyric": "达到理想不太易"
},
{
"time": {
"m": "02",
"s": "16",
"ms": "85"
},
"lyric": "即使有信心"
},
{
"time": {
"m": "02",
"s": "18",
"ms": "91"
},
"lyric": "斗志却抑止"
},
{
"time": {
"m": "02",
"s": "23",
"ms": "96"
},
"lyric": "谁人定我去或留"
},
{
"time": {
"m": "02",
"s": "27",
"ms": "68"
},
"lyric": "定我心中的宇宙"
},
{
"time": {
"m": "02",
"s": "31",
"ms": "28"
},
"lyric": "只想靠两手向理想挥手"
},
{
"time": {
"m": "02",
"s": "36",
"ms": "83"
},
"lyric": ""
},
{
"time": {
"m": "02",
"s": "38",
"ms": "41"
},
"lyric": "问句天几高"
},
{
"time": {
"m": "02",
"s": "40",
"ms": "06"
},
"lyric": "心中志比天更高"
},
{
"time": {
"m": "02",
"s": "45",
"ms": "57"
},
"lyric": "自信打不死的心态活到老"
},
{
"time": {
"m": "02",
"s": "51",
"ms": "53"
},
"lyric": ""
},
{
"time": {
"m": "02",
"s": "52",
"ms": "34"
},
"lyric": "OH… 我有我心底故事"
},
{
"time": {
"m": "02",
"s": "59",
"ms": "91"
},
"lyric": "亲手写上每段"
},
{
"time": {
"m": "03",
"s": "02",
"ms": "05"
},
"lyric": "得失乐与悲与梦儿"
},
{
"time": {
"m": "03",
"s": "06",
"ms": "66"
},
"lyric": "OH… 纵有创伤不退避"
},
{
"time": {
"m": "03",
"s": "14",
"ms": "07"
},
"lyric": "梦想有日达成"
},
{
"time": {
"m": "03",
"s": "16",
"ms": "35"
},
"lyric": "找到心底梦想的世界"
},
{
"time": {
"m": "03",
"s": "20",
"ms": "45"
},
"lyric": "终可见"
},
{
"time": {
"m": "03",
"s": "24",
"ms": "04"
},
"lyric": ""
},
{
"time": {
"m": "03",
"s": "25",
"ms": "06"
},
"lyric": "OH… 亲手写上每段"
},
{
"time": {
"m": "03",
"s": "30",
"ms": "64"
},
"lyric": "得失乐与悲与梦儿"
},
{
"time": {
"m": "03",
"s": "36",
"ms": "31"
},
"lyric": ""
},
{
"time": {
"m": "03",
"s": "39",
"ms": "07"
},
"lyric": "OH… 梦想有日达成"
},
{
"time": {
"m": "03",
"s": "45",
"ms": "05"
},
"lyric": "找到心底梦想的世界"
},
{
"time": {
"m": "03",
"s": "49",
"ms": "60"
},
"lyric": "终可见"
},
{
"time": {
"m": "03",
"s": "52",
"ms": "99"
},
"lyric": ""
}
]
}
