音楽に反応する波形動画の作り方｜オーディオビジュアライザーをブラウザで作成

音楽に反応する波形動画を作るには？

楽曲の再生に合わせてバーや波形が動く映像を「オーディオビジュアライザー」と呼びます。

音声だけでは画面に表示する映像がありませんが、背景画像とオーディオビジュアライザーを組み合わせることで、YouTubeやSNSへ投稿できる音楽動画を作成できます。

オリジナル楽曲、BGM、歌ってみた、ポッドキャスト、DJミックスなど、音声を視覚的に見せたい場合に適した表現です。

メディアソート株式会社が提供する「オーディオビジュアライザー」では、音声ファイルと背景画像、または音声を含む動画から、音に反応するビジュアライザー動画を作成できます。

オーディオビジュアライザーとは？

オーディオビジュアライザーとは、音声に含まれる音量や周波数の変化を、バー、線、円、粒子などの動きへ変換する映像表現です。

低音、中音、高音には、それぞれ異なる周波数が含まれています。音声を周波数ごとに分析し、その強さを図形の高さや大きさへ反映すると、音楽に合わせて動く映像になります。

単純な音量メーターとは異なり、複数の周波数帯を分けて表示できるため、キック、ベース、ボーカル、シンバルなど、楽曲の構成に応じた動きを作れます。

音声ファイルと画像から音楽動画を作成できる

Mediassort Studioのオーディオビジュアライザーには、以下の2つの作成方法があります。

• 動画へビジュアライザーを合成する
• 音声ファイルと背景画像から動画を作成する

すでに映像素材がある場合は動画から作成し、MP3やWAVなどの音声しかない場合は背景画像と組み合わせます。

ジャケット画像やイラストを背景に使用すれば、静止画と楽曲だけでも、音に反応する映像付きの音楽動画を作れます。

ブラウザでオーディオビジュアライザーを作る方法

1．オーディオビジュアライザーを開く

以下のページへアクセスします。

オーディオビジュアライザーを開く

アカウント登録や動画編集ソフトのインストールは必要ありません。パソコンのブラウザから利用できます。

2．作成方法を選択する

「動画から作成」と「音声＋画像から作成」のどちらかを選択します。

動画から作成する場合

音声を含むMP4またはWebM形式の動画を読み込みます。

元の映像へ、音に反応するバー、波形、パーティクルなどが合成されます。

音声＋画像から作成する場合

音声ファイルと背景画像をそれぞれ読み込みます。

対応している音声形式は以下のとおりです。

• MP3
• WAV
• M4A

対応している背景画像の形式は以下のとおりです。

• JPEG
• PNG
• WebP

音声ファイルの長さに合わせ、背景画像とビジュアライザーを組み合わせた動画を作成できます。

3．ビジュアライザーのスタイルを選択する

表示するビジュアライザーは、以下の4種類から選べます。

• バー
• 円形バー
• 波形
• パーティクル

楽曲のジャンルや背景画像に合わせて選択します。

4．感度を調整する

感度では、音声の変化をビジュアライザーの動きへどの程度反映するか調整します。

感度を高くすると、小さな音にも反応して大きく動きます。低くすると動きが穏やかになり、大きな音を中心に反応します。

• 動きが小さすぎる：感度を上げる
• 常に大きく動いている：感度を下げる
• 静かな楽曲：高めから調整
• 音圧の高い楽曲：低めから調整

5．線の太さを調整する

線の太さでは、バーや波形などを構成する線の見え方を変更できます。

細くすると繊細でスタイリッシュな印象になり、太くすると小さな画面でも動きが分かりやすくなります。

YouTubeの横長動画では細め、スマートフォンで見るShortsやTikTokでは少し太めにすると、視認性を確保しやすくなります。

6．不透明度を調整する

不透明度では、背景に対するビジュアライザーの濃さを変更できます。

不透明度を高くすると図形がはっきり表示され、低くすると背景へなじんだ柔らかい見た目になります。

背景画像が暗い場合は明るい色を濃く表示し、人物や文字の上へ重なる場合は不透明度を下げると見やすくなります。

7．反応させる周波数帯を設定する

周波数帯の下限と上限を変更すると、ビジュアライザーが反応する音の範囲を指定できます。

人が聞き取れる音には、低い音から高い音まで幅広い周波数が含まれています。

• 低音域：キック、ベースなど
• 中音域：ボーカル、ギター、ピアノなど
• 高音域：ハイハット、シンバル、空気感など

低音を中心に動かしたい場合は上限を下げ、高音まで細かく反応させたい場合は上限を高くします。

下限を上げると、非常に低いノイズや不要な振動への反応を抑えられます。

8．メインカラーとサブカラーを設定する

ビジュアライザーの配色は、メインカラーとサブカラーの2色を指定できます。

楽曲のジャケット画像、アーティストのイメージカラー、ブランドカラーなどに合わせると、動画全体へ統一感を持たせられます。

• 同系色の2色：まとまりのある落ち着いた印象
• 補色の2色：コントラストの強い印象
• 白＋アクセントカラー：シンプルで見やすい表現
• ネオンカラー2色：サイバー・EDM風の表現

9．左右対称を設定する

左右対称を有効にすると、ビジュアライザーが中央を基準に対称的な形で表示されます。

構図が安定しやすく、中央に人物、ロゴ、ジャケット画像などを配置したデザインと相性がよい設定です。

左右非対称の動きを使いたい場合は無効にします。

10．プレビューを確認して書き出す

音声を再生し、ビジュアライザーの動き、色、太さ、背景とのバランスを確認します。

制限付きでツールを試すことができ、無料利用時の書き出しは透かし入り・長辺1080pxまでです。

25ドルの買い切りプランでは、透かしなし・フル解像度で書き出せます。

4種類のビジュアライザースタイル

バー

周波数ごとの音の強さを、縦方向のバーで表示します。

一般的なスペクトラムアナライザーに近い見た目で、低音から高音までの変化を分かりやすく表現できます。

ジャンルを問わず使いやすく、迷った場合に選びやすいスタイルです。

円形バー

バーを円形に配置し、音に合わせて外側へ伸縮させます。

中央にジャケット画像、ロゴ、人物などを配置した音楽動画と相性がよく、YouTubeやSNSでよく使われる構成を作れます。

波形

音声の変化を連続した線の動きで表示します。

バーよりも柔らかく、落ち着いた印象に仕上がります。バラード、環境音、ポッドキャスト、ナレーションなどにも適しています。

パーティクル

音の強さに合わせて複数の粒子が動く表現です。

幻想的、壮大、宇宙、魔法、サイバーなどの雰囲気を作りやすく、MVや作業用BGMの背景映像にも活用できます。

目的別のおすすめ設定

YouTubeへオリジナル楽曲を投稿する場合

• 作成方法：音声＋画像
• スタイル：バーまたは円形バー
• 背景：ジャケット画像
• 色：ジャケットのメインカラーに合わせる
• 左右対称：オン

中央に曲名やアーティスト名を配置し、その周囲へ円形バーを表示すると、シンプルな音楽動画を作れます。

作業用BGM動画を作る場合

• スタイル：波形またはパーティクル
• 感度：低めから中程度
• 線の太さ：細め
• 不透明度：少し低め

動きを激しくしすぎず、背景へ自然になじませることで、長時間見ても疲れにくい映像になります。

EDM・ロックの楽曲動画を作る場合

• スタイル：バーまたは円形バー
• 感度：素材に合わせて調整
• 線の太さ：中程度から太め
• 色：コントラストの強い2色

キックやスネアへ大きく反応させると、楽曲の勢いが伝わりやすくなります。

ポッドキャストやナレーション動画を作る場合

• スタイル：波形
• 感度：中程度
• 線の太さ：細めから中程度
• 色：背景と区別しやすい色

話者の声に合わせて波形が動くため、静止画像だけの場合よりも、音声が再生されていることを視覚的に伝えられます。

周波数帯の調整方法

低音へ強く反応させたい場合

キックやベースを中心に動かしたい場合は、上限周波数を低めに設定します。

楽曲のリズムに合わせた大きな動きを作りやすくなります。

ボーカルを中心に反応させたい場合

極端な低音と高音を除き、中音域を中心に設定します。

声の強弱に合わせて波形やバーを動かしたい、ポッドキャストや歌もの楽曲に向いています。

楽曲全体へ反応させたい場合

下限を低め、上限を高めに設定し、幅広い周波数帯を含めます。

低音から高音まで多くの成分へ反応するため、細かな動きのあるビジュアライザーになります。

見やすい音楽動画に仕上げるポイント

背景とビジュアライザーの色を分ける

背景と図形が似た色だと、バーや波形が見えにくくなります。

暗い背景には明るい色、明るい背景には濃い色を指定し、十分なコントラストを確保しましょう。

ジャケット画像の重要な部分を隠さない

人物の顔、曲名、アーティスト名などへビジュアライザーが重なると、情報が読みにくくなります。

配置を想定して、中央または周囲に適度な余白がある背景画像を使用しましょう。

音圧に合わせて感度を変更する

音圧の高い楽曲では、感度が高すぎるとビジュアライザーが常に最大付近まで動くことがあります。

反対に、静かな音源では動きが小さくなるため、感度を上げて調整します。

実際の投稿画面で見える太さにする

パソコンの大きな画面では見やすくても、スマートフォンへ縮小すると細い線が見えなくなる場合があります。

YouTube Shorts、TikTok、Instagram Reelsなどへ投稿する場合は、少し太めに設定すると視認性を確保しやすくなります。

オーディオビジュアライザーの活用例

音に反応する波形やスペクトラム動画は、以下のような用途で活用できます。

• オリジナル楽曲のYouTube投稿
• 作業用BGM・睡眠用BGM
• 歌ってみた・演奏してみた動画
• ポッドキャストやラジオ
• DJミックス
• ゲーム音楽やチップチューン
• TikTokやInstagram Reels
• MVやリリックビデオ
• ライブ・イベントの背景映像

楽曲を公開するときの著作権に注意

オーディオビジュアライザーで動画を作成できることと、使用した音源を自由に公開できることは別です。

他者が制作した楽曲をYouTubeやSNSへ投稿する場合は、著作権や各プラットフォームの利用条件を確認してください。

オリジナル楽曲、自分で権利を保有している音源、公開許諾を得た音源などを使用しましょう。

まとめ

オーディオビジュアライザーを使うと、音楽の周波数や強さに反応するバー、円形バー、波形、パーティクルを動画へ合成できます。

Mediassort Studioでは、動画から作成する方法と、MP3・WAV・M4Aなどの音声ファイルへ背景画像を組み合わせる方法を選べます。

感度、線の太さ、不透明度、周波数帯、2色のカラー、左右対称などもブラウザ上で調整可能です。

音楽に反応するビジュアライザー動画を作成する