cljs karaoke client

CLJS-KARAOKE-CLIENT

在Clojurescript中实现的Web卡拉OK播放器

演示

滚石 - 现在到处

描述

我尝试制作一个不错的卡拉OK播放器。多年来，我一直在尝试使用一个好的软件卡拉OK解决方案，但几乎没有成功，主要替代方案是Ultrastar，Frets Fire等游戏，或者将YouTube Karaoke视频的播放列表放在一起。

这两种替代方案都提供广泛的歌曲目录，您可以通过互联网自由访问，但有一些缺点：

• 在线上可用于像Ultrastar这样的游戏的歌曲，通常不使用人声的原始歌曲曲目，这在我看来会杀死“ Karaoke Experience”
• 使用YouTube Karaoke视频时，歌词同步差异很大（有些只是一次渲染整节经文，而其他人则在音节级别同步）。

主要困难是获得带有同步信息的歌词，我在网络上发现了许多MIDI文件，显然是用于卡拉OK机器的。这些文件包含的歌词一直同步到音节级别。由于如何在Karaoke机器上存储歌词在Karaoke机器上存储歌词确实没有标准，因此许多人在存储的方式上存在微妙的差异，因此在解析这些文件时，我做了一堆总假设，并提取了歌词以与定时数据一起分开文件。大多数还可以，但是许多人都会有些偏移

MIDI解析器是一个单独的项目：CLJ-KARAOKE。

另一个困难是获得歌曲音轨，因为歌词已同步到MIDI音频曲目，因此要做的是使用它。最初，我打算将MIDI文件直接用于音频轨道，但是在播放音频时，质量极大地取决于您已安装的声音字体，并为不错的结果设置了一个好的ENV并不是一项琐碎的任务。另外，如果我想在Web客户端上播放这些文件，请考虑所有这些文件，只是使事情变得更加复杂。因此，我解决了提取歌词以分离文件并使用胆怯将MIDIS渲染到MP3文件的，这很棒，我能够尝试使用不同的声音字体集合。

特征

• 大量歌曲
• 歌曲的背景图像在歌曲负载期间进行了Google搜索后，从网络中动态获取（如果没有缓存）
  • 每个用户都会缓存其本地背景，并定期将其URL推到Mongo DB，Google自定义搜索具有每日限制，因此我尝试最大程度地减少其使用。
  • 初始化数据（歌词偏移，BG图像）通过合并用户的数据来改善构建过程
• 能够通过miliseconds中的偏移（从控制面板或将查询字符串附加到URL）同步歌词的能力）
• 由以前同步的歌曲构建的自动播放列表
• 导出本地歌曲同步信息，以便可以将其合并到服务器端同步数据
• 台式Firefox和Chrome的实验音频输入，带有现场回声/混响声音FX（使用外部麦克风获得最佳效果）
• 实验性网络摄像头记录和视频导出到WebM文件。导出视频中的音频通道是将麦克风输入与效果和歌曲轨道混合的结果。
• 遥控。在大屏幕上运行应用程序，并从其他应用程序实例控制播放（例如，从您的移动设备中！）
• 使用SEO标签构建预读者的歌曲页面，以便您可以在社交网络中共享链接，作为漂亮的卡片，带有歌曲名称和图像（如果有）。
  • 
• 歌词编辑器，用于将新曲目与歌词同步。
  • 选择一个音频文件
  • 添加文本，将其分为音节（或只是随机块）
  • 播放您的曲目并点击每件的“同步”按钮
  • 如果您想要更准确性，则可能会减慢轨道降低播放率

继续工作

• 动态字体尺寸，已经优化了歌曲标题的字体大小，但我正在寻找一种改善歌词显示的方法。
• 一种捕获所有用户的自定义歌词偏移的方法，将它们集成为后续版本中的默认值
• 与歌曲背景相同的事情，当前使用Google自定义搜索来查找与歌曲标题相关的图像，此服务的配额非常低，我们需要搜索越越越好。

本地运行

先决条件：

• JDK
• 影子-CLJS

$ npm i -g shadow-cljs 
$ npm install
$ shadow-cljs watch app

如果要编译发布版本，则可以运行以下内容：

$ shadow-cljs release app

该构建将位于/public目录中。

关键绑定

• “ ESC”：停止播放
• “ LR”：负载歌曲
• “ alt-o”：在播放模式下启用Opton
• “ alt-h”：启用控制面板模式
• “左”：音频向后寻求
• “正确”的音频寻求前进
• “ meta-shift-l”：循环模式（目前正在工作）
• “ alt-shift-p”：玩
• “换档”：播放列表上的下一首歌
• “ TT”：烤面包！
• “ H”：显示作弊表

未来的工作

• 覆盆子PI图像
• 歌词同步编辑器