js 解析lrc文件(歌词)

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 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 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
71 2
|
2月前
|
存储 前端开发 JavaScript
JavaScript垃圾回收机制深度解析
【10月更文挑战第21】JavaScript垃圾回收机制深度解析
113 59
|
29天前
|
消息中间件 存储 Java
RocketMQ文件刷盘机制深度解析与Java模拟实现
【11月更文挑战第22天】在现代分布式系统中,消息队列(Message Queue, MQ)作为一种重要的中间件,扮演着连接不同服务、实现异步通信和消息解耦的关键角色。Apache RocketMQ作为一款高性能的分布式消息中间件,广泛应用于实时数据流处理、日志流处理等场景。为了保证消息的可靠性,RocketMQ引入了一种称为“刷盘”的机制,将消息从内存写入到磁盘中,确保消息持久化。本文将从底层原理、业务场景、概念、功能点等方面深入解析RocketMQ的文件刷盘机制,并使用Java模拟实现类似的功能。
40 3
|
1月前
|
存储
文件太大不能拷贝到U盘怎么办?实用解决方案全解析
当我们试图将一个大文件拷贝到U盘时,却突然跳出提示“对于目标文件系统目标文件过大”。这种情况让人感到迷茫,尤其是在急需备份或传输数据的时候。那么,文件太大为什么会无法拷贝到U盘?又该如何解决?本文将详细分析这背后的原因,并提供几个实用的方法,帮助你顺利将文件传输到U盘。
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
110 6
|
26天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
54 0
|
2月前
|
数据安全/隐私保护 流计算 开发者
python知识点100篇系列(18)-解析m3u8文件的下载视频
【10月更文挑战第6天】m3u8是苹果公司推出的一种视频播放标准,采用UTF-8编码,主要用于记录视频的网络地址。HLS(Http Live Streaming)是苹果公司提出的一种基于HTTP的流媒体传输协议,通过m3u8索引文件按序访问ts文件,实现音视频播放。本文介绍了如何通过浏览器找到m3u8文件,解析m3u8文件获取ts文件地址,下载ts文件并解密(如有必要),最后使用ffmpeg合并ts文件为mp4文件。
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
45 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
38 0

推荐镜像

更多
下一篇
DataWorks