Claude Code を相棒に、音楽ファイルから動画（MP4）を自動生成する Web ツール 「Audio Visualizer」を作りました。登録不要・無料・ブラウザだけで完結します。

👉 使ってみる： https://audiovisualizer.mylil.jp/

何ができる？

音声ファイル（.mp3 / .wav / .flac / .ogg / .m4a / .aif の 6 形式に対応）をアップロードして数十秒待つと、音に合わせて図形が動く動画が落ちてきます。完成品は 1280×720 / 24fps の MP4。SNS にそのまま貼れる解像度です。

3 × 3 × 3 ＝ 27 パターンの組み合わせ

レイアウト スタイル ドット数
  • 円形（中央に円形）
  • 上向（下から上に伸びる）
  • 鏡面（上下対称に伸びる）
  • ドット（粒）
  • バー（棒）
  • 折れ線（連続したライン）
 10〜150 で自由調整
（デフォルト 120）

レイアウト 3 × スタイル 3 × カラー 3 ＝ 27 パターン。さらにドット数の調整で見た目の密度も変えられます。

色は 3 モードから選べる

  • 🎨 グラデーション（デフォルト）— 紫〜シアンの 2 色グラデーション。色相が毎秒 5 度ずつゆっくり回転するので、音と映像のテンポがピタッと合っていなくても画面はずっと楽しい感じに見えます。
  • 🌈 レインボー — 虹色を順番にサイクルする派手モード。MV っぽい雰囲気を出したいとき用。
  • ⚪ ホワイト — モノクロ一色。シンプルにしたいとき、上にテキストを乗せたいときに。

登録不要・無料

  • サーバー側で librosa（音声解析）と ffmpeg（エンコード）を回しているのでブラウザだけでよい
  • 会員登録もログインも要らない、ファイルを投げて待つだけ
  • 同時生成は CPU 都合で数本まで（混んでたら順番待ちが入ります）

使い方

動画でざっくり

テキストの解説ページ

4 ステップ（① 音声アップロード → ② レイアウト・スタイル選択 → ③ 動画生成 → ④ ダウンロード）の詳しい手順はこちら：

👉 Audio Visualizer の使い方（公式ガイド）

どうやって作ったか — Claude Code との合作

このツールはほぼ全行を Claude Code（Anthropic 社の CLI 型 AI コーディング支援）と一緒に書きました。

  • 言語：Python 3.11（標準ライブラリの http.server ＋ ライブラリ少々）
  • 音声解析：librosa
  • 描画：Pillow
  • 動画生成：imageio + imageio-ffmpeg
  • UI：単一ファイル内に静的 HTML/CSS/JS を埋め込み（フロント不要）
  • 本番配信：Xserver VPS（Ubuntu）上で systemd 常駐 + nginx でリバースプロキシ

「ブラウザに貼って Generate を押すと MP4 が落ちてくる」という体験を最短距離で作るために、フロントとバックを 1 ファイルに同居させる構成にしました。Python だけで完結するので、デプロイは git push ＋ systemctl restart だけでまわります。

実装の小ネタ

  • STFT で音声を log スケールで帯分けして、各周波数帯の強さで個々のドットを駆動（音量振幅ではなく周波数スペクトル）
  • 低すぎる帯と高すぎる帯はカット（動きが地味すぎたり過剰に跳ねたりする部分）
  • グラデーションモードでは、対面 60 度差の 2 色を毎秒 5 度ずつ右回転させる（モードが他の 2 つだと色挙動も別ロジック）
  • 同時アクセス対策：セッション ID 分離・IP 単位のレート制限（5 分 10 リクエスト）・同時生成数の上限

さわってみてください

音源（自作曲、フリーBGM、ボーカル単体、効果音、なんでも）を 1 つ用意して、ぽちっと押してみてください。シンプルなツールですが、SNS 用の短いループ動画を作るのにけっこう便利です。

👉 https://audiovisualizer.mylil.jp/ で試す

感想・要望は連絡フォームか X までどうぞ。「こんなレイアウト追加してほしい」「色変えたい」みたいな声があれば次のバージョンで取り込みます。