js 解析lrc文件(歌词)

简介: 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": ""
        }
    ]
}
目录
相关文章
|
1月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
544 0
|
3月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
124 19
|
4月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
9月前
|
人工智能 自然语言处理 Java
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
FastExcel 是一款基于 Java 的高性能 Excel 处理工具,专注于优化大规模数据处理,提供简洁易用的 API 和流式操作能力,支持从 EasyExcel 无缝迁移。
1801 65
FastExcel:开源的 JAVA 解析 Excel 工具,集成 AI 通过自然语言处理 Excel 文件,完全兼容 EasyExcel
|
6月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
150 17
|
6月前
|
JavaScript 算法 前端开发
JS数组操作方法全景图,全网最全构建完整知识网络!js数组操作方法全集(实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解,附大量源码和易错点解析)
这些方法提供了对数组的全面操作,包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆,并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用,方便您理解数组操作的底层原理。链式调用的几个案例,让您玩转数组操作。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
6月前
|
存储 JavaScript 前端开发
全网最全情景,深入浅出解析JavaScript数组去重:数值与引用类型的全面攻略
如果是基础类型数组,优先选择 Set。 对于引用类型数组,根据需求选择 Map 或 JSON.stringify()。 其余情况根据实际需求进行混合调用,就能更好的实现数组去重。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
Java API 数据处理
深潜数据海洋:Java文件读写全面解析与实战指南
通过本文的详细解析与实战示例,您可以系统地掌握Java中各种文件读写操作,从基本的读写到高效的NIO操作,再到文件复制、移动和删除。希望这些内容能够帮助您在实际项目中处理文件数据,提高开发效率和代码质量。
164 4
|
6月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
8月前
|
Serverless 对象存储 人工智能
智能文件解析:体验阿里云多模态信息提取解决方案
在当今数据驱动的时代,信息的获取和处理效率直接影响着企业决策的速度和质量。然而,面对日益多样化的文件格式(文本、图像、音频、视频),传统的处理方法显然已经无法满足需求。
292 4
智能文件解析:体验阿里云多模态信息提取解决方案

推荐镜像

更多
  • DNS