控制歌词滚动案例

简介: 控制歌词滚动案例

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

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)
    }
})

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


目录
相关文章
|
26天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
52 7
|
4月前
|
移动开发 前端开发 UED
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)
|
4月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
|
5月前
|
JavaScript BI UED
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
vue + element UI【实战】打字闯关(含按键监听、按键音效、字符匹配、动态样式、结果判定、数据统计、音效获取和剪辑等实用技巧)
63 0
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
166 0
|
编解码 前端开发
前端设置页面字体尺寸跟随屏幕大小而进行变化
前端设置页面字体尺寸跟随屏幕大小而进行变化
679 0
前端设置页面字体尺寸跟随屏幕大小而进行变化
|
自然语言处理 JavaScript
如何实现一个能精确同步滚动的Markdown编辑器
如何实现一个能精确同步滚动的Markdown编辑器
314 0
如何实现一个能精确同步滚动的Markdown编辑器
|
存储 JSON 移动开发
基于Qt的网络音乐播放器(五)实现歌词滚动显示
基于Qt的网络音乐播放器(五)实现歌词滚动显示