控制歌词滚动案例

首先要获取带有时间轴的歌词(如下图所示)
在这里插入图片描述
正则匹配时间的表达式: 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)
    }
})

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值