使用node实现歌词滚动输出
使用node实现歌词滚动输出
运用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元素这样反复输出，达到歌词滚动效果
**
最后……最后给各位程序猿/媛们来一波鸡汤，BAT我都不扶，就服他。
**
width="640" height="498" src="https://v.qq.com/iframe/player.html?vid=x0551efvwvn&tiny=0&auto=0" allowfullscreen="">
使用node实现歌词滚动输出相关推荐
- 原生js实现歌词滚动以及卡拉OK效果
干货转自网易实践者社区,感谢作者[严跃杰] [歌词滚动效果] 滚动歌词比较常见的一种歌词显示方式,今天我们来讨论如何通过原生js来完成一个简单的滚动歌词实现. 一般来说,滚动歌词有如下几项需求: 1. ...
- 歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析 后台歌词接口返回的数据如下(base64字符串): W3R ...
- 歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析: 后台歌词接口返回的数据如下(base64字符串): W3 ...
- C#/音乐播放器/带进度条/歌词滚动、颜色变化/桌面应用程序设计
用基本C#知识实现制作一个音乐播放器 前言 写这个博客并不是说我的作品多么高级或完美,只是希望能在一些功能方面给你们一些启发,能帮助到你们做出真正好的程序,这就足够了 话不多说,让我们开始吧~~~ 截 ...
- VUE获取网易云音乐接口，并实现歌词滚动效果
VUE获取网易云音乐接口,并实现歌词滚动效果 最近在捣腾个人博客,加了个播放音乐的模块,所以在这里记录一下歌曲播放歌词实时滚动效果的实现,顺便总结加深一下对各个知识点的理解. GitHub地址 演示地 ...
- jquery实现歌词滚动
jquery实现歌词滚动 1.css /* CSS Document */* {margin: 0;padding: 0;font-size: 12px; }body {background: no ...
- JS原生---歌词滚动效果案例
[开门见山] 实现目标: 需要让歌词列表随着播放的时间更新而滚动,即实时的跟随歌曲的进度而滚动 效果: 需要事先准备的东西: 1.音频(mp3格式): 2.歌词(详细): 先展示html和css的实现 ...
- 前端实战复习——歌词滚动
歌词滚动 此处展示为html的demo 思路 首先歌词单独为div 歌词整体滚动,设置wrap为div 歌词上移使用移动wrap位置,所以需要设置wrap,position为absolute. 歌词高 ...
- java 滚动歌词_歌词数据解析、歌词滚动、歌词进度控制功能的实现(基于js-base64、lyric-parser、better-scroll)，以vue项目为例...
歌词数据解析.歌词滚动.歌词进度控制功能的实现(基于js-base64.lyric-parser.better-scroll) 1.需求分析 后台歌词接口返回的数据如下(base64字符串): W3R ...
最新文章
- 如何处理海量数据（上）：从并发编程到分布式系统
- ABAP 标准培训教程 BC400 学习笔记之三：ABAP 编程语言的特性和基本构成要素
- python discuz搜索api_python如何模拟搜索引擎分词
- 什么是5G？居然有人用漫画把它讲得如此接地气!
- linux中的定时器检测按键,STM32单片机利用定时器实现按键采集
- vue音乐项目歌手页面滚动、吸顶效果
- Mybatis中resultMap的作用-解决实体类属性名和数据库字段不一致
- 《交互式程序设计 第2版》一第2章 编程基础
- Lightroom Classic 教程，如何在 Lightroom 中裁剪并修齐照片？
- Struts2-01-配置文件
- 使用bind()和connect()函数
- Linux服务器 屏蔽国外IP访问及简单的防CC攻击拦截
- STM8S103重映射
- [Spring实战系列]（2）Maven创建Spring-HelloWorld项目
- PS 仿制图章 轻松换支付宝赞赏码 GIF动态图手把手教你
- 神经网络分析教学目标,神经网络分析教学反思
- 一文弄懂printf函数从用户态到内核态的执行流程
- 课程设计：公交线路管理系统
- mysql游戏名称_MySQL 游戏排行榜
- SM30表维护自动更新值