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圖像
• 歌詞同步編輯器