← Works へ戻る

NERO VISUALIZER

音楽ファイルを渡すと、SNSに投稿できる動画になって返ってきます。
サーバーには何も送らず、ブラウザの中だけで作ります。

NERO VISUALIZERのPCでの表示

モックアップではなく、実際の画面をそのまま撮っています(1440px)。

やっていること

曲を聴かせると、テンポや音の密度から曲調を読み取って、合いそうな演出を推薦します。50種類のテーマから選んで、そのまま書き出せます。

  • 音楽ファイルから動画(MP4)を生成
  • 曲調に合わせたテーマの推薦(50種)
  • 横 16:9 / 縦 9:16 / 正方形 1:1 の出力
  • フルHD・4K の書き出し

現在はプライベート公開です。このツールで作った動画を YouTube で公開しています。

どう作ったか

音源も動画もサーバーへ送りません。ブラウザが持っている動画の書き出し機能をそのまま使い、映像の演出はGPUで描いています。

TypeScriptVite 7WebCodecsWebGL2

詰まったところ

うまくいかなかったものも、そのまま書いています。

1. 60分の動画を作ろうとして、メモリで止まった

課題
長いBGM動画を書き出そうとすると途中で落ちます。調べると、ブラウザが一度に確保できるメモリには上限があり、完成した動画を丸ごとメモリに載せる作りでは、フルHDで12分ほどが限界でした。
やったこと
書き出しの考え方を変えました。全部を作ってから保存するのではなく、エンコードしながら保存先へ直接書き込む方式に組み替えています。
結果
29曲・90分を通しで書き出せるようになりました。上限そのものが無くなったので、長さを気にしなくてよくなっています。

2. テストは全部通るのに、実機で落ちる

課題
合成した音源で動作を確かめる仕組みは作ってあり、そちらは全部通ります。それでも実際の曲を入れると不具合が出ることがありました。
やったこと
テストの粒度を上げようとしましたが、短い音源では再現しない種類の問題でした。
結果
実際の長さで通してみるまで分からない問題は、いまも残っています。書き出しの前に、実尺で一度通すようにしています。

ブラウザの中だけで完結させたい、といったご相談も受け付けています。

メールで相談する