字母轮动显示代码解析

运用fs,path,iconv三个模块实现歌词滚动打印.

// 动态显示歌词


const fs = require('fs');
const path = require('path');
const iconv = require('iconv-lite');

//获取字幕文件路径
fs.readFile(path.join(__dirname, './../lyrics/血染的风采.lrc'), (error, data) => {
var lines = iconv.decode(data, 'gbk').split('\n');
// console.log(lines.length);
var regex = /\[(\d{2})\:(\d{2})\.(\d{2})\]\s(.+)/;

var begin = new Date().getTime();
// 遍历
lines.forEach((line) => {
    // [00:32.67] 也许我告别 将不再回来
    var matches = regex.exec(line);
    if (matches) {
      var m = parseFloat(matches[1]);
      var s = parseFloat(matches[2]);
      var f = parseFloat(matches[3]);
      var lyric = matches[4]; // 当前行歌词不是立即执行
      // 由于下达输出任务的时刻不同
      var offset = new Date().getTime() - begin;
      setTimeout(() => {
        console.log(lyric);
      }, m * 60 * 1000 + s * 1000 + f - offset);
    } else {
      // 不是一行歌词
      console.log(line);
    }
});
});

首先定义3个常量，将模块导入。接着调用fs方法的API（readFile）,写一个路径方法和箭头函数.

用iconv方法把gbk解码（windows默认编码是gbk）换成字符串,然后赋值给局部变量lines

再写一个正则赋值给regex变量。将date对象实列化

局部变量lines写了一个遍历方法forEach然后将箭头函数作为参数传递进去,箭头函数有一个参数，是用来接收lines的值.

再定义一个matches变量用以校对正则表达式,只保留经正则表达式过滤的参数

写一个if判断，定义三个float局部变量用以接收matches的时间,还有一个变量接收matches的字符串

由于代码执行需要一定的时间，所以与歌词实际时间稍有不偏差，所以要定义两个对象，在相减得到偏移值

在写一个setTimeout函数，把上面的分秒毫（偏移量）加进去，得到滚动显示的时间。由于每个时间差各自不同，所以不能简单粗暴的直接写上一个number值.

每到一个时间点，触发一次setTimeout元素这样反复输出，达到歌词滚动效果

--------------------------------------------------------------------------end-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

最后......最后给各位程序猿/媛们来一波鸡汤

<iframe height=498 width=510 src='http://player.youku.com/embed/XMzAyMDIxNDY4NA==' frameborder=0 'allowfullscreen'></iframe>