cljs-karaoke-client
ClojureScriptに実装されたWebカラオケプレーヤー
デモ
ローリング・ストーンズ - 今はずっと
説明
まともなカラオケプレーヤーを作ることを試みました。何年もの間、私はほとんど成功しない優れたソフトウェアカラオケソリューションを手に入れようとしてきました。そこには、Ultrastar、Freet on Fireなどのゲームがあるか、YouTube Karaokeビデオのプレイリストをまとめることができます。
どちらの代替案も、インターネット上で自由にアクセスできる曲の幅広いカタログを提供しますが、いくつかの欠点があります。
- Ultrastarのようなゲームでオンラインで利用できる曲は、私の意見では「Karaoke Experience」を殺しているボーカルでオリジナルの曲トラックを使用しないことが多いことが多い
- YouTubeカラオケビデオを使用すると、歌詞の同期は大きく異なります（一度に詩全体を一度にレンダリングしますが、音節レベルで歌詞が同期されます）。
主な難しさは、同期情報で歌詞を取得することでした。カラオケマシンに使用されているようです。これらのファイルには、歌詞が含まれているのは、音節レベルまでずっと同期されています。 Karaoke MachinesのMIDIファイルに歌詞を保存する方法については本当に標準がないため、多くの人が保存される方法に微妙な違いがあるため、これらのファイルを解析するときに、たくさんの大きな仮定を作成し、タイミングデータとともにファイルを分離するために歌詞を抽出しました。ほとんどは大丈夫ですが、多くは可変オフセットによって少し離れています
MIDIパーサーは別のプロジェクトであるClj-Karaokeに掲載されています。
歌詞はMIDIオーディオトラックに同期されるため、ソングオーディオトラックを取得することでした。当初、私はオーディオトラックにMIDIファイルを直接使用するつもりでしたが、オーディオを再生するとき、品質はインストールしたサウンドフォントに大きく依存し、適切な結果のために優れたENVを設定することは些細なタスクではありません。また、これらのファイルをWebクライアントで再生したい場合は、これらすべてを考慮に入れると、物事がより複雑になります。それで、私は歌詞を抽出してファイルを別々に抽出し、MIDISをmp3ファイルにレンダリングして、かなり素晴らしいことで、さまざまなサウンドフォントコレクションを実験することができました。
特徴
- たくさんの曲
- 曲の背景画像は、曲のロード中にGoogle検索後にWebから動的にフェッチされます（キャッシュされていない場合）
- 各ユーザーはローカルの背景をキャッシュし、そのURLをMongo DBに定期的に押します。Googleカスタム検索には毎日の制限があるため、その使用を最小限に抑えます。
- 初期化データ（歌詞のオフセット、BG画像）は、ユーザーからのデータを統合することでビルド中に改善します
- ミリ秒のオフセットで歌詞を同期する機能（コントロールパネルから、またはURLにクエリ文字列を追加する）
- 以前に同期した曲から構築された自動プレイリスト
- ローカルソングの同期情報をエクスポートして、サーバー側の同期データにマージできるように
- デスクトップFirefoxおよびLive Echo/Reverb Sound FXを備えたChromeの実験オーディオ入力（最良の結果を得るには外部マイクを使用してください）
- 実験的なウェブカメラの録音とWebMファイルへのビデオエクスポート。エクスポートされたビデオのオーディオチャネルは、マイク入力とエフェクトと曲トラックを混合した結果です。
- リモートコントロール。アプリケーションを大画面で実行し、別のアプリケーションインスタンスからの制御再生（モバイルデバイスなど！）
- SEOタグを使用してプレレンダーのソングページを構築して、ソーシャルネットワークのリンクを曲名と利用可能なイメージを含むかなり見えるカードとして共有できるようにします。
- 歌詞と同期するための歌詞エディター歌詞。
- オーディオファイルを選択します
- テキストを追加して、音節に分割します（またはランダムなチャンク）
- トラックを再生して、各ピースの「同期」ボタンをタップします
- より正確にしたい場合は、再生率を下げるトラックを遅くすることができます
取り組んでいます
- ダイナミックフォントサイズ、ソングタイトル用にすでに最適化されたフォントサイズがありますが、歌詞ディスプレイを改善する方法も探しています。
- すべてのユーザーからカスタム歌詞のオフセットをキャプチャし、これらを後続のリリースでデフォルトとして統合する方法
- 曲の背景と同じことですが、現在Googleカスタム検索は、曲のタイトルに関連する画像を見つけるために使用されています。このサービスにはクォータがあり、かなり低く、検索する必要が少ないほど良いです。
ローカルで実行されます
前提条件：
$ npm i -g shadow-cljs
$ npm install
$ shadow-cljs watch app
リリースビルドをコンパイルする場合は、次のことを実行できます。
$ shadow-cljs release app
ビルドは/publicディレクトリにあります。
キーバインディング
- 「ESC」：再生を停止します
- 「LR」：ロードソング
- 「Alt-O」：再生モードでオプトを有効にします
- 「Alt-H」：コントロールパネルモードを有効にします
- 「左」：オーディオが後方を求めます
- 「正しい」オーディオは前進します
- 「Meta-Shift-L」：ループモード（現在は現在作業中）
- 「alt-shift-p」：プレイ
- 「Shift-Right」：プレイリストの次の曲
- 「TT」：トースト！
- 「H」：チートシートを表示します
将来の仕事
