1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ブラウザで音楽をオーディオリアクティブ動画にするツールを作った話

1
Posted at

Mint Xu です。2026年8月31日に、ブラウザで使える音楽ビジュアライザー Music Visualizer(https://musicvisualizer.net/ )を公開しました。この記事では、何ができるかと、どういう構成にしたかを紹介します。

作った動機

曲をリリースするとき、今は音源だけでは足りず、YouTube や TikTok 向けの動画が必要になります。ところが「静止画+ループアニメ」では物足りないし、本格的な動画編集ソフトは学習コストが高い。音にちゃんと反応する映像を手軽に作れるものが欲しくて作りました。

できること

  • オーディオリアクティブなプリセット(Liquid Bass、Retro Cassette、Lo-fi、Prism Reactor など)。周波数解析でバーや波形、パルスがビートに合わせて動きます
  • アートワーク(パン・ズームでクロップ)、ロゴ、タイトル、色、エフェクト強度のカスタマイズ
  • 16:9 / 9:16 / 1:1 の3フォーマット。アスペクト比に合わせてアートワークのクロップも追従します
  • H.264、720p / 1080p / 2K、最大60FPSで書き出し

仕組み(ユーザーから見た流れ)

  1. プリセットを選ぶ
  2. 音声・アートワーク・ロゴを追加
  3. テキスト・比率・色・強度を調整
  4. ライブプレビューで確認して書き出し

設計で意識したのは次の3点です。

  • ローカルファースト:編集とプレビューの間、音声や画像はブラウザ内に置いたまま。アップロードするのは書き出しを始めたときだけです
  • 非同期のクラウドレンダリング:最終的な動画はサーバー側でレンダリングします。GPU がなくても使えて、端末も重くなりません。モバイルブラウザにも対応しています
  • データは14日で自動削除:素材・完成動画・作成履歴は14日後に自動で消えます。期間中は何度でもダウンロードできます

想定している用途

  • 音楽プロデューサー・インディーアーティストのリリース用動画、ビートのプレビュー
  • YouTube / TikTok クリエイターの縦型・横型動画
  • DJ ミックス用のビジュアル
  • ポッドキャストの「見られる」版(エピソードのアートワーク+ロゴ+動き)

料金

編集とプレビューは無料です。書き出しはクレジット制の買い切りで(3.9 USD〜、有効期限なし、サブスクなし)、720p/1080p が1クレジット、2K が2クレジット。1分未満の音声なら1日1回無料で書き出せます。システム側の原因でレンダリングに失敗した場合、クレジットは自動で返却されます。

今後

歌詞の同期表示、4K書き出し、プリセットの追加、サブスクプランを予定しています。

フィードバックをください

まだ公開したばかりです。使いにくい点、表示が崩れる環境、欲しい表現など、何でもコメントで教えてもらえると助かります。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?