音楽ビジュアライザー

このツールについて

音楽ビジュアライザーは、音に合わせて動く装飾アニメーションを「動画素材」として 書き出せる、ブラウザ完結のジェネレーターです。動画編集のワンポイントや配信画面の 飾り、SNS投稿の背景などに重ねて使うことを想定しています。生成はすべてお使いの ブラウザ内で完結し、アップロードした音楽ファイルがサーバーへ送信されることは ありません。書き出しは背景を透過できる WebM 形式なので、映像の上に自然に 重ねられます。

2つのモードと使い方

ループモード（音声なし）は、先頭と末尾が完全に一致する シームレスなループ動画を作ります。BPM（テンポ）を指定すると拍に合わせて 脈動し、尺は拍数の整数倍に自動スナップされるため、何度繰り返しても継ぎ目が 目立ちません。編集ソフト側で曲のBPMと尺を合わせれば「曲に連動しているように 見える」汎用素材として使えます。

音楽連動モードは、読み込んだ曲の波形・周波数を解析して、 その曲に完全に同期した動きを描きます。編集ソフトで同じ曲を同じ位置に 配置すれば、本当に音と一致した映像になります。

1. モード（ループ／音楽連動）を選ぶ。音楽連動なら曲ファイルを読み込む。
2. ビジュアルの種類（バー・波形・リング・パーティクル・心電図）を選ぶ。
3. 本数・感度・グロー・配色・解像度・FPSなどを画面で調整する。
4. 「プレビュー再生」で動きを確認する。
5. 「WebMで書き出し」を押すと録画が始まり、完了後に自動でダウンロードされる。

各設定の説明

ビジュアル

• 種類 — 形を選びます。バー（イコライザー）は縦棒の並び、波形ウェーブは1本の波線、円形・リングは中心から放射状に伸びる線、ラジアル・スペクトラムは中心円のまわりに放射状のバーが並び、高いバーほど明るく光る音楽スペクトラム風（高さに応じて濃淡が変化）、バーストは中心の点が拍ごとに破裂し、同心円の波紋が外へ広がりながらフェードする演出、パーティクル/ドットは動き回る点群、心電図（ハートビート）は、光のヘッドが掃引しながら鼓動の波形（鋭いスパイク＋フラットな基線）を描き、後方へ残光がフェードしていく心電図モニター風です。
• 本数/密度 — バーの本数や点の数です。多いほど細かく緻密に、少ないほど一つひとつが大きく見えます。
• 感度 — 動きの振れ幅の倍率です。大きくすると音や脈動への反応が激しく（バーが高く・線が大きく）なり、小さくするとおとなしくなります。
• 太さ/サイズ — 線の太さ・バーの幅・ドットの大きさの倍率です。値は解像度に比例して描かれるため、解像度が高いほど実際のピクセル幅も太くなります。
• グロー — 発光（光のにじみ）の強さです。0でにじみなしのくっきりした線になり、値を上げるほど線のまわりに光の輪が広がります。にじみ幅も解像度に比例するため、縮小表示されるプレビューより、原寸で書き出した動画のほうが強く（線を縁取るように）見えます。線をシャープに見せたい・「枠線が付いて見える」のを避けたいときは 0 にしてください。
• 左右/上下ミラー — 描画を対称にコピーします（波形なら上下、バーなら上下方向に鏡像が追加されます）。
• 角を丸く — 線の端やバーの角を丸めます。オフにすると角ばった見た目になります。

配色

• カラー1 / カラー2 — 描画色のグラデーション（カラー1→カラー2）です。なお発光（グロー）の色はカラー1が使われます。
• 背景を透過 — オンで背景なし（アルファ付き）のWebMを書き出します。映像の上に重ねたいときはオン、単体で背景を付けたいときはオフにします。
• 背景色 — 「背景を透過」をオフにしたときの塗りつぶし色です。

出力

• 解像度 — 書き出す動画のサイズです。プリセットから選ぶか、カスタムで自由に指定できます。プレビューは画面に合わせて縮小表示されるため、線の太さやグローは実際の書き出しのほうが大きく見える点に注意してください。
• FPS — 1秒あたりのコマ数です。数値が大きいほど滑らかですが、ファイルサイズも増えます。
• ループ尺（秒） — ループモードでの1ループの長さです。
• BPM — ループモードのテンポ（拍/分）です。0にすると拍の脈動がオフになります。尺はBPMの整数拍に自動スナップされ、継ぎ目のないループになります。
• 拍の強さ — ループモードで、各拍ごとにどれだけ強く脈動させるかです。0で脈動なし、上げるほどビートが強調されます。

よくある質問

書き出した動画の線が、プレビューより太く（縁取りが付いたように）見える

プレビューは画面に合わせて縮小表示されているのに対し、書き出しは指定した解像度の 原寸で出力されるためです。線の太さも「グロー」のにじみ幅も解像度に比例するので、 原寸ではその分くっきり大きく見えます。とくに光の輪（グロー）が線を縁取るように 見えることがあります。シャープにしたいときは「グロー」を 0、または「太さ/サイズ」を 下げてから書き出してください。

背景を透過させるには？

配色セクションの「背景を透過」にチェックを入れると、背景なし（アルファ付き）で 書き出されます。チェックを外すと指定した背景色で塗りつぶされます。

後から付ける音楽に連動させられますか？

事前に書き出した動画が、編集時に足す音楽へ自動で連動することは原理上できません。 完全に同期させたい場合は音楽連動モードでその曲を読み込んでから書き出し、編集側で 同じ曲を同じ位置に置いてください。曲をまだ決めていない場合は、ループモードで BPMを合わせた汎用ループを使うのがおすすめです。

うまく再生・書き出しできない

透過WebMの生成と再生は Chrome 系ブラウザを推奨します。Safari は透過に対応して いないため、背景色を付けて書き出すか、別のブラウザをご利用ください。