オーディオビジュアライザーとは？
波形、周波数バー、円形スペクトラム、スクロール式スペクトログラムでオーディオをリアルタイムに表示します。各ディスプレイは再生中の音楽に合わせて反応します。
ビジュアライザーはファイルかマイクから音声を取り込み、Web Audio の AnalyserNode に通して、周波数または時間領域のデータを 60fps でキャンバスに描画します。波形、周波数バー、ミラーバー、円形スペクトル、スクロール式スペクトログラムから選び、キャンバスをワイド・正方形・縦型に切り替えてどんなプラットフォームにも対応、背景色はプリセットまたはカスタムから指定、カラースキームをオレンジ、ネオン、オーシャン、モノクロ、レインボーで切り替え、感度とバーの数を調整。1フレームを PNG で保存することも、動画ボタンから音声入りの WebM クリップを書き出すこともできます。
使い方
- 音声ファイルをアップロードするか、マイク入力を使用します
- 波形、周波数バー、ミラーバー、円形スペクトル、スクロール式スペクトログラムから表示スタイルを選ぶ
- 音声を再生して、リアルタイムでビジュアライズが反応するのを観察します
使用するタイミング
- 曲の一番盛り上がる瞬間のバースペクトラムをスクリーンショットしてシングルのカバーアートにする。
- SNS 投稿や YouTube アップロード用に、ビジュアライザーが同期した楽曲の WebM クリップを録画する。
- サウンドデザインの学生に、EQ の操作で曲のスペクトラム形状がどう変わるかを見せる。
結果
ストリーマーが音楽配信にライブオーディオビジュアライザーを追加し、ビートに合わせて脈打つカラフルな周波数バーを表示します。
よくある質問
- バーや波形のグラデーション色はどう決まっていますか?
- 各スキームは周波数または振幅値をカラースケールにマッピングしています。レインボーは HSL の全色相、ネオンは鮮やかなピンクとシアン、オーシャンは青系、モノクロはグレースケール、オレンジはサイトのアクセントカラーに合わせています。
- マイク利用のたびに許可ダイアログが出るのはなぜですか?
- ブラウザは明示的な許可なしにマイクへのアクセスを認めません。同一セッション内で一度許可すれば通常その間は有効です。以前拒否していた場合は、ブラウザ設定でこのサイトのマイク権限をクリアし、ページを再読み込みしてください。
- 1 フレームだけでなく、ビジュアル全体を映像として記録するには?
- キャンバス上の動画アイコンを押すと、ライブのビジュアライズを音声付きで WebM として録画できます。ファイルの場合は曲全体を頭から録画し、マイクの場合は30秒のクリップを録画します。隣の PNG ボタンは1フレームだけ書き出すので、静止画が欲しいときに使ってください。
- 感度スライダーは何をしているのですか?
- 描画前に振幅を拡大・縮小しています。低い値にすると音圧の強いマスターでもバーが画面に収まり、高い値にすると囁き声やクリーンに弾いたアコギなど音量の小さい素材を見える大きさまで強調します。
- 純音を再生するとバーが数本しか立たないのはなぜですか?
- 純粋なサイン波は基本周波数と僅かな倍音しか持たないので、FFT の大部分はほぼゼロになります。これはスペクトラムが正しく動いている証拠です。音楽や音声に切り替えると全帯域が点灯します。