Audio Visualizer

ブラウザ上で音楽を再生しながら、波形とスペクトラムをリアルタイム描画する Web オーディオビジュアライザー

概要

Web Audio API の AnalyserNode で取り出した周波数・波形データを Canvas に描画する、ビルド不要の静的 Web アプリです。同梱のサンプル曲を選ぶか手元の音声ファイルを読み込むだけで、音に合わせて動くビジュアルをブラウザ上で楽しめます。フレームワークやライブラリに依存しない素の HTML / CSS / JavaScript で構成しているため、Web Audio API と Canvas を組み合わせた最小構成のサンプルとしても読めます。

特徴

• 3 種類の表示モード — 棒型（周波数スペクトラム）・折れ線型（波形）・円型（放射状スペクトラム）を「表示を変更」ボタンで順に切り替え
• ワンクリックで配色変更 — 「色を変更」ボタンでランダムな色を再生成
• サンプル曲を同梱 — 8 曲の MP3 を assets/audio/ に同梱。プルダウンから選ぶだけで再生開始
• 手元の音声ファイルを再生 — 「デバイスから読み込む」を選ぶとファイル選択ダイアログが開き、ブラウザがデコードできる形式の音声ファイル（mp3 / wav など）を FileReader 経由で読み込んで再生
• 音量スライダー — GainNode で 0〜1 の範囲を調整（初期値 0.5）。幅 1280px 以下では非表示になり、音量は初期値固定
• レスポンシブ描画 — ウィンドウサイズに追従して Canvas を再描画。幅 1280px / 768px 以下でコントロールのレイアウトを切り替え

デモ

ライブデモ: https://akkunlab.github.io/audiovisualizer/

音楽を選択するまで Canvas は黒いままなので、プルダウンからサンプル曲を選ぶか「デバイスから読み込む」で音声ファイルを指定してください。

技術スタック

領域	技術
言語	HTML5 / CSS3 / JavaScript（ES2015+、IIFE でスコープ分離）
音声処理	Web Audio API（AudioContext / AnalyserNode / GainNode / AudioBufferSourceNode）
描画	Canvas 2D Context + requestAnimationFrame
ファイル読込	XMLHttpRequest（サンプル曲）/ FileReader（ローカルファイル）
フォント	Google Fonts（Roboto / Kanit / Noto Sans JP）
ホスティング	GitHub Pages

表示モードごとの取得データと主な設定値（assets/js/main.js 冒頭の config オブジェクトで一括管理）:

モード	データ	主な設定値
棒型（Bar）	getByteFrequencyData	fftSize: 128
折れ線型（Line）	getByteTimeDomainData	fftSize: 2048、lineWidth: 3
円型（Circle）	getByteFrequencyData	半径 180px、50 本のバーを放射状に配置

セットアップ

前提

• Web Audio API 対応のモダンブラウザ
• ローカル HTTP サーバー（サンプル曲を XMLHttpRequest で取得するため、file:// 直開きでは再生できない場合があります）

手順

git clone https://github.com/Akkunlab/audiovisualizer.git
cd audiovisualizer

# 任意の静的サーバーで公開（例: Python）
python3 -m http.server 8000

ブラウザで http://localhost:8000/ を開き、プルダウンから曲を選択します。

構成

audiovisualizer/
├── index.html            # 設定パネルと Canvas を持つ単一ページ
├── assets/
│   ├── css/style.css     # レイアウト・レスポンシブ設定
│   ├── js/main.js        # Web Audio 初期化・3 種の描画ロジック・イベント処理
│   └── audio/            # サンプル MP3（8 曲）
├── audiovisualizer.jpg   # ヒーロー画像
└── LICENSE

ライセンス

MIT