控制歌词滚动案例

简介: 控制歌词滚动案例

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

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

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


目录
相关文章
无限滚动-放上暂停滚动jsdemo效果示例(真理)
无限滚动-放上暂停滚动jsdemo效果示例(真理)
|
8月前
数显仪表盘显示“速度、方向、计数器”的跑马灯
数显仪表盘显示“速度、方向、计数器”的跑马灯
28 0
|
10月前
|
数据安全/隐私保护 iOS开发 芯片
将任意应用窗口置顶显示,这个工具太强了。
将任意应用窗口置顶显示,这个工具太强了。
LabVIEW显示控件中内容过长设置自动滚动条
本篇博文分享程序设计时一个细节小技巧,在LabVIEW显示控件中内容过长设置自动滚动条。
|
12月前
|
开发者 索引
如何实现水平关卡翻页功能
最近有几位同学问水平方向上的关卡翻页功能怎么做,这篇教程就详细的介绍一下水平的关卡翻页功能的实现方法。 如果游戏中的关卡数量比较多,一般有两种方式展示大量的关卡按钮,一种是垂直的滑动显示,这个比较简单,只需要使用一个“滚动列表”插件即可实现。另一种是水平方向的翻页显示,当然水平方向上也是可以滑动的,但是似乎很少看见有在水平方向上使用滑动的方式显示大量关卡按钮的(或许这样与我们的操作习惯不符,或许你可以尝试一下这种很少有人用的方式?),大部分水平方向关卡的切换都是使用点击按钮翻一页的方式。
85 0
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
滚动条案例(点击跳转到指定地点,上下滑动跟随显示标题)
|
前端开发
前端工作总结141-根据后台传值动态显示开关状态及文字说明(0为文字,1为图标)
前端工作总结141-根据后台传值动态显示开关状态及文字说明(0为文字,1为图标)
107 0
|
前端开发
前端工作总结104-控制弹出框不全屏
前端工作总结104-控制弹出框不全屏
58 0
C++ 使得窗口置顶(终极方案)
C++ 使得窗口置顶(终极方案)
597 0
|
前端开发 JavaScript
【前端三分钟】锚点自动跟随滚动定位
【前端三分钟】锚点自动跟随滚动定位
661 0