js 解析lrc文件(歌词)

已于 2024-07-15 17:59:59 修改
阅读量1.9k 收藏 9
点赞数
分类专栏： # JavaScript # 已归档链接 文章标签： javascript
于 2022-01-25 14:57:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41192489/article/details/122685243
版权

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": ""
        }
    ]
}
朝阳39
关注
专栏目录
用JS解析LRC格式的歌词
fenglin247的博客
01-28 8171
把LRC格式的歌词解析成一个JS对象，适用于大部分书写比较规范的LRC格式的歌词。
JavaScript解析lrc歌词并匹配时间显示在页面只显示代码
weixin_42605397的博客
12-22 504
好的，下面是 JavaScript 解析 lrc 歌词并匹配时间显示在页面的代码： 首先，你需要获取歌词文件并将其转换为 JavaScript 可以处理的格式。这里假设你已经将歌词文件读取到了一个字符串中，并且该字符串被存储在变量 lrc 中。 // 按行分割歌词字符串 const lines = lrc.split('\n'); // 将每行歌词转换为对象，并存储在数组中 const lyri...
lrc:一个 javascript lrc 解析器和运行器
07-05
lrc a javascript lrc parser lrc 是个 解析程序, 并且有 lrc 播放功能. 可用于 node 和 browser 环境. 安装 In node: npm install lrc In browser: [removed][removed] 在浏览器中暂不支持模块加载器. 用法示例 //创建实例 var lrcStr = "[ti: title]\n[ar: artist]\n[00:01.00]line 1\n[00:05.00]line 2" var lrc = new Lrc(lrcStr, outputHandler); //定义歌词输出处理程序 function outputHandler(line, extra){ console.log(line) } //播放控制 lr
js解析多种写法的lrc歌词
12-22
对于多种写法的lrc都能做到完美解析，比很多人用"[" 分割的方法更靠谱。还能解析自定义标签，扩展lrc 并精准到 每字。绝对值10分，有任何不懂 可以随时来问我。
lrc文件解析
xiaomin0903的专栏
04-25 374
public class Lrcget { /**[code="java"][/code] * @throws IOException */ private static HashMap infos; private static Listlrctime=new ArrayList(); public static void read(String file)...
使用js解析歌词文件(lrc格式歌词)
芥末菌的芥末园
01-06 1833
首发地址：https://www.hsmus.top/202101235.html 像音乐播放器一样，可以把歌词文件解析为方便使用的对象 效果如下： 代码如下： 用法： /***** 用法 ******/ const lrc = ` [ti:沙漠骆驼] [ar:展展与罗罗] [al:] [by:芥末] [00:00.00]沙漠骆驼 - 展展与罗罗 [00:03.00]作词：展展与罗罗 [00:06.00]作曲：展展与罗罗 [00:09.00]歌词编辑：果果 [00:18.00] [00:
js解析lrc 实现lrc歌词同步滚动效果
Zy的博客
11-26 1万+
这两天想着做一个h5的网页播放器，实现歌词同步滚动 但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现 经过两三天的努力，终于做出了这样的效果 实现功能 歌词同步滚动 同步歌词高亮效果 代码实现 首先，在body中加audio 和 放歌词的ul标签 <div> <ul id="lrclist...
基于前端的LRC歌词文件解析插件
岸在彼方
10-30 2742
写音乐播放器的时候，做了显示歌词的功能，而歌词内容为lrc格式。为了显示歌词，就参考其他库根据自己的想法实现了一个基于JavaScript的lrc文件解析库。
Android初探（一）关于LRC文件解析
weixin_30552635的博客
01-20 184
关于LRC文件的解析大概总结如下： 获取LRC文件 得到输入流 使用正则表达式，逐行解析，生成HashMap或自定义格式 package daodao.FileReader; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; impor...
基于java的lrc歌词文件解析工具
10-22
java版本的lrc文件解析源代码，内有测试类和测试文件，可以方便的添加到需要用到的项目中。
MP3歌词文件解析算法
04-14
MP3歌词文件解析 LRC文件算法与排序 代码主体部分用来从lrc数据的开头开始解析时间标签，检测到一个标签就将对应的歌词提取出来，并放入一个链表中。 采用链表是为了方便排序。在这段代码中同时提供了典型的链表排序的过程，这样，扫描以便lrc数据，就可以将所有的时间标签以及对应的歌词提取出来，并顺序放到链表中~~ 程序中虽然用到了链表，但是并没有使用动态内存分配，因为本身这个程序是给嵌入式平台写的，确切的说，是一个“裸奔”的嵌入式平台，呵呵~~ 这个代码在vc下验证通过
HTML5原生态JS的音乐播放器-带lRC歌词分析.rar
03-21
HTML5 原生态 JS 的音乐播放器。能上一首，下一首进行切换。并且可以分析 LRC 歌词。 歌词文件采用 AJAX 加载。
html+js的lrc歌词同步播放器
03-25
NULL 博文链接：https://412599526-qq-com.iteye.com/blog/1156467
如何用js完美的解析lrc歌词
热门推荐
XU1432566997的博客
12-18 1万+
要想解析lrc，就得先知道lrc是什么，lrc是英文lyric（歌词）的缩写，基于纯文本的歌词专用格式，被用做歌词文件的扩展名。以lrc为扩展名的歌词文件可以在各类数码播放器中同步显示，最早是由郭祥祥先生(Djohan)提出并在其程序中得到应用。目前市场上的支持显示歌词的音乐播放器都有相同的规定，要求歌曲和LRC歌词的文件名相同，即：唐磊 - 丁香花.mp3，唐磊 - 丁香花.lrc。
浅谈歌词文件（LRC、QRC、KRC）
weixin_30458043的博客
07-14 1441
1、LRC(LRC是目前运用最广的歌词文件) 千千静听、酷我音乐都是用LRC做歌词解析的。歌词格式: [00:02.37]三十而立 [00:03.12] [00:03.80]作词：唐孝凡 [00:04.55]作曲：唐孝凡 [00:05.18]演唱：唐孝凡 [00:06.43]出品：深圳小龙文化 这种格式文件小，容易解析。但是，歌词的精度只能控制到一行 2、QRC(Q...
用JS解析LRC格式的歌词，实现歌词同步滚动效果
執筆冩回憶
01-09 4961
用JS解析LRC格式的歌词 1、把歌词载入。 方法一：直接把歌词粘贴到一个textarea文本域中，然后把它设置为隐藏。 <!-- LRC歌词 --> <textarea id="lrc_content" cols="30" style="display: none"> [ti:沙漠骆驼] [ar:展展与罗罗] [al:沙漠骆驼] [by:0] [offset:0]...
c#解析Lrc歌词文件
SilverFoxGame的博客
04-01 467
c#解析Lrc歌词文件 http://www.cnblogs.com/liuxiaobo93/p/3896914.html posted on 2017-04-01 16:30 jiahuafu 阅读(...) 评论(...) 编辑 收藏 ...
MP3 lrc文件的解析
dikeboy1234的专栏
11-08 1738
今天在看Mars 的mp3播放器的视频时，看到lrc歌词文件的匹配， lrc文件的格式为 [00:01.00]第一次 [00:03.00]光良 [00:05.00]作词：张天成　作曲：光良 [00:08.00]当你看著我　我没有开口 [00:13.00]已被你猜透 [00:01.00]代表的是一个时间段， 可以表示为long time  =00*1000*60 +01*1000+0
JavaScript歌词解析算法
sthudy的博客
01-07 398
JavaScript歌词解析算法，可以直接复制使用，适合初学者
JavaScript解析lrc歌词
最新发布
09-03
下面是一个示例代码，可以帮助你解析 lrc 歌词。 首先，你需要将 lrc 歌词作为字符串读入，然后使用 `split` 函数将其分割为行。接下来，你可以使用一个循环来遍历每一行，并根据 lrc 歌词的格式来解析每一行。 ``` // 将 lrc 歌词作为字符串读入 const lrc = '[00:12.00]这是一行歌词\n[00:17.20]这是另一行歌词'; // 使用 split 函数将 lrc 歌词分割为行 const lines = lrc.split('\n'); // 创建一个空数组，用于存储解析后的歌词 const parsedLyrics = []; // 遍历每一行 for (const line of lines) { // 使用正则表达式解析时间标签 const timeExp = /\[(\d{2}):(\d{2})\.(\d{2})\]/; const timeResult = timeExp.exec(line); // 如果时间标签存在，则解析歌词文本 if (timeResult) { // 解析时间标签 const minute = timeResult[1]; const second = timeResult[2]; const time = parseInt(minute, 10) * 60 + parseInt(second, 10); // 获取歌词文本 const text = line.replace(timeExp, '').trim(); // 将时间和歌词文本存入 parsedLyrics 数组 parsedLyrics.push({ time, text }); } } // 输出解析后的歌词 console.log(parsedLyrics); ``` 输出结果如下： ``` [ { time: 12, text: '这是一行歌词' }, { time: 17.2, text: '这是另一行歌词' } ] ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

朝阳39

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值