控制歌词滚动案例

简介: 控制歌词滚动案例

首先要获取带有时间轴的歌词(如下图所示)

d00d3f0bc7284a9986e8d04c07bd2060.png

正则匹配时间的表达式:

var reg = /\[(\d{2})\:(\d{2})\.(\d{3})\]\s*(.+)/;

整体代码如下:


//加载fs模块
var fs = require('fs');
// 读取歌词文件
fs.readFile('./lrc.txt',function(err,data){
    if(err){
        return console.log("读取歌词文件失败");
    }
    data = data.toString();
    var lines = data.split('\n');
    // 遍历所以行,通过正则匹配里面的时间,解析出毫秒
    // 需要里面的时间 和里面的内容
    console.log(lines);
    console.log(lines.length);
    var reg = /\[(\d{2})\:(\d{2})\.(\d{3})\]\s*(.+)/;
    for(let i = 0;i < lines.length;i++){
        (function(index){
            var line = lines[index]
            // console.log(line);
            var matches = reg.exec(line);
            // console.log(matches);
            if(matches){
                // 获取分
                var m = parseFloat(matches[1]);
                // console.log(m);
                // 获取秒
                var  s= parseFloat(matches[2]);
                // console.log(s);
                // 获取毫秒
                var ms = parseFloat(matches[3]);
                // 获取定时器中要输出的内容
                var content = matches[4];
                // 将分+秒+毫秒转换为毫秒
                var time = m * 60*1000 + s*1000 + ms;
                // 使用定时器,让每行内容在指定时间输出
                setTimeout(function(){
                    console.log(content);
                },time)
            }
        })(i)
    }
})

最后实现歌词逐个出现的功能


目录
相关文章
|
Linux 图形学 Windows
Linux(入门)---001.desktop文件教程
Linux(入门)---001.desktop文件教程
947 1
|
机器学习/深度学习 人工智能 算法
机器学习是什么?
机器学习是什么?
760 4
|
4月前
|
人工智能 算法 安全
IROS 2025 |从数字智能走向物理智能,“桃源”与真实世界机器人学习挑战赛启动,2大赛道等你来战
2025年10月,IROS (智能机器人与系统国际会议)期间,上海人工智能实验室(上海AI实验室)将举办物理世界中的多模态机器人学习研讨会,IROS 2025“桃源”与真实世界机器人学习挑战赛(机器人学习挑战赛)现已启动报名,欢迎全球创新者与挑战者参加。
658 0
|
9月前
|
人工智能 JavaScript Java
从零开始教你打造一个MCP客户端
Anthropic开源了一套MCP协议,它为连接AI系统与数据源提供了一个通用的、开放的标准,用单一协议取代了碎片化的集成方式。本文教你从零打造一个MCP客户端。
6673 5
|
JSON 数据格式
Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
【6月更文挑战第15天】Uncaught SyntaxError: JSON.parse: expected property name or '}' at line 1 column 14 of the JSON data问题如何处理
694 5
|
监控 安全 Linux
【专栏】Linux中六个常用的网络命令:ping、traceroute、netstat、nmap、ifconfig和ip
【4月更文挑战第28天】本文介绍了Linux中六个常用的网络命令:ping、traceroute、netstat、nmap、ifconfig和ip,以及它们在测试网络连通性、追踪路由、查看网络状态、安全扫描和接口配置等场景的应用。通过学习和运用这些命令,系统管理员和网络爱好者能更有效地诊断和管理网络问题,确保网络稳定运行。
1080 0
|
存储 运维 负载均衡
智能存储解决方案:探索 TDengine 的多级存储功能
在当今数据驱动的时代,如何高效地存储和管理海量数据已成为企业面临的一大挑战。为了应对这一需求,TDengine Enterprise 不仅支持使用对象存储(S3),还早已引入了独特的多级存储功能。这一功能不仅能够降低存储成本,还能显著提升数据写入性能,并简化系统维护流程。
240 2
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
2333 3
使用vite搭建一个React项目!真香!
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
578 1