Node.Js同步实现歌词显示

一时失言乱红尘 2022-03-18 02:44 335阅读 0赞

首先需要知道lrc歌词的一版格式，然后才能继续下去。

**lrc歌词格式**  
\[00:00.88\]习惯一个人  
\[00:07.95\]作词；刘崇健  
\[00:14.39\]作曲；刘崇健  
\[00:21.56\]演唱；刘崇健  
\[00:32.43\]亲爱的 谢谢你还记得好久不见  
\[00:39.39\]分开了以后 不是说好了 请勿挂念  
\[00:46.62\]我已经习惯 冷眼看人生的 感慨万千  
\[00:53.87\]我不再贪心 也不再想念 那过去的疲倦  
\[01:00.93\]爱已经走远 我又回到了 一个人的空间

由上可知道由时间和正文两部分构成，所以接下来就好办了;

**思路**  
因为lrc是gbk格式,而node不支持这个格式，所以需要第三方插件iconv-lite。  
**源码:**

const iconv = require('iconv-lite');
    const fs = require('fs');
    fs.readFile('./xiguan.lrc', (err, data) => {
        if (err) {
            console.error(err);
        } else {
            let lrc = iconv.decode(data, 'UTF8').split('\n');
            let regx = /\[(\d{2}):(\d{2})\.(\d{2})](.*)/;
            let newregx = /\[\w{2}:(.*)]/;
            //因为lrc分为两部分，所以我们需要正则表达式提取这两部分，特别是对时间的提取。
            //转换成数组,然后通过foreach遍历
            let start = new Date().getTime();
            lrc.forEach((value) => {
                let str = regx.exec(value);
                if (str) {
              //  regx中的{2}是因为时，分，秒都会存在两位数，不会只有一位数。下面的newregx                        // 是		对歌词开头的一些其他部分的处理。可以忽略！
                             //下面是时间的处理，需要将时分秒转换为ms。所以有以下代码的存在
                    let minute = parseFloat(str[1]);
                    let second = parseFloat(str[2]);
                    let millisecond = parseFloat(str[3]);
                    let content = str[4];
                    let end = new Date().getTime();
                    let time = minute * 60 * 1000 + second * 1000 + millisecond - (end - start);
                    setTimeout(() => {
                        console.log("[" + minute + ":" + second + ":" + millisecond + "]",content);
                    }, time);
                } else {
                    let deputy = newregx.exec(value);
                    if (deputy) {
                        console.log(deputy[1]);
                    }
                }
            });
        }
    });

**注意lrc文件和js文件在同一目录下。**

**运行图:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDU5NzQy_size_16_color_FFFFFF_t_70]: /images/20220318/d7f29247c55c4fe89ca5d5e958ed9014.png

发表评论取消回复

表情：

评论列表（有 0 条评论，335人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5实现歌词同步

开篇 HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio

电玩女神/ 2022年08月04日 15:49/ 0 赞/ 213 阅读

相关 nodejs实现同步http请求

nodejs实现同步http模块请求。用到http模块。在命令行调用node命令执行，可以这样使用： let http = require("http");

不念不忘少年蓝@/ 2022年05月31日 12:15/ 0 赞/ 584 阅读

相关 HTML5使用Audio标签实现歌词同步的效果

HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签

向右看齐/ 2022年05月29日 03:12/ 0 赞/ 249 阅读

相关 Android仿酷狗动感歌词（支持翻译和音译歌词）显示效果

引言该开源依赖库是乐乐音乐播放器里的一个歌词模块功能，现在把该功能模块独立出来进行优化，并弄成了一个开源依赖库，其它音乐播放器项目只要引用该库并调用接口，便可轻松实现与

「爱情、让人受尽委屈。」/ 2022年05月28日 08:56/ 0 赞/ 187 阅读

相关 js解析lrc 实现lrc歌词同步滚动效果

这两天想着做一个h5的网页播放器，实现歌词同步滚动但是上网找了很多资料，竟发现没有比较完善的代码供参考，但是无意间看到了百度的千千音乐有这样的效果，就想着一定能通过js实现

系统管理员/ 2022年04月21日 15:54/ 0 赞/ 522 阅读

相关 JavaWeb音乐网站开发：Ajax异步获取歌词文件并显示，以及实现音频与歌词对应同步的方法

在开发音乐网站或APP的时候，都必须要面对这一个问题：如何让正在播放的歌曲的歌词与音频对应？也就是歌曲正在唱哪一句对应显示这一句的歌词？这便是今天这篇博客主要谈

亦凉/ 2022年04月17日 04:54/ 0 赞/ 272 阅读

相关 Android 实现歌曲播放时歌词同步显示

我们需要读取以上歌词文件的每一行转换成成一个个歌词实体： public class LyricObject { public int begintime;

电玩女神/ 2022年03月22日 10:20/ 0 赞/ 252 阅读

相关 Node.Js同步实现歌词显示

首先需要知道lrc歌词的一版格式，然后才能继续下去。 lrc歌词格式 \[00:00.88\]习惯一个人 \[00:07.95\]作词；刘崇健 \[00:14.3

一时失言乱红尘/ 2022年03月18日 02:44/ 0 赞/ 336 阅读

相关 Python 歌词解析器音乐与歌词同步播放

![在这里插入图片描述][20200325151724443.png_pic_center] python 歌词解析器前言歌词解析器，顾名思义就是在播放歌曲的

╰+哭是因爲堅強的太久メ/ 2021年11月23日 14:16/ 0 赞/ 345 阅读

相关在Windows Media Player中使用歌词插件显示歌曲歌词

Looking for a way to display song lyrics in Windows Media Player? Today we look at a ver

朱雀/ 2021年07月26日 22:40/ 0 赞/ 785 阅读