核心提示:运用fs,path,iconv三个模块实现歌词滚动打印.// 动态显示歌词const fs = require(fs);const path = require(path);const iconv =...
运用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元素这样反复输出,达到歌词滚动效果