js 解析lrc文件(歌词)

本文涉及的产品
云解析DNS,个人版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: js 解析lrc文件(歌词)

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": ""
        }
    ]
}
目录
相关文章
|
2天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
1天前
|
文字识别 Java Python
文本,文识08图片保存()上,最方便在于整体生成代码,serivce及实体类,base64编码保存图片文件,调用flask实现内部ocr接口,通过paddleocr识别,解析结果,base64转图片
文本,文识08图片保存()上,最方便在于整体生成代码,serivce及实体类,base64编码保存图片文件,调用flask实现内部ocr接口,通过paddleocr识别,解析结果,base64转图片
|
1天前
|
JavaScript
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
TS,编写TS文件,编写hello.ts文件,cmd下打开终端,输入tsc hello.ts会生成一个hello.js文件,简化命令,npm i -g ts-node,ts-node hello.ts
|
2天前
|
JavaScript
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
文本,Pinia的使用,(0 , _stores_token_js__WEBPACK_IMPORTED_MODULE_1__.useTokenStore),接口中必须用引入store.js文件
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
|
2天前
|
JavaScript API
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
前后端数据交互.js文件的axios的写法,想要往后端发送数据,页面注入API,await的意思是同步等待服务器数据,并返回,axios注入在其他页面,其他页面调用的时候,同步作用
|
1天前
|
JavaScript
文件查询匹配神器 【glob.js】 实用教程
文件查询匹配神器 【glob.js】 实用教程
2 0
|
9天前
|
XML 缓存 JavaScript
一篇文章讲明白JS模板引擎之JST模板
一篇文章讲明白JS模板引擎之JST模板
11 2

推荐镜像

更多