Audio Meter
Sound Graffitiは、ブラウザ上で動作するオーディオメーターアプリケーションです。放送基準（EBU R128 / ITU-R BS.1770-4）に準拠したLUFS測定、スペクトラム解析、ステレオフィールド表示などの機能を提供します。
ITU-R BS.1770-4 / EBU R128準拠のラウドネスメーター
グラフ表示:
- 緑のバー (Integrated): 開始からの統合ラウドネス（ゲート処理済み）
- 黄色のバー (Short-term): 直近3秒間の短期ラウドネス
- オレンジのバー (Momentary): 直近400msの瞬時ラウドネス
- 青い横線: ターゲット基準値（変更可能）
数値表示:
- Integrated: 全体の平均ラウドネス（放送・配信の基準値）
- Short-term: 直近のラウドネス変化を捉える
- Momentary: 瞬間的なピークを検出
- LRA: ラウドネス幅（ダイナミックレンジの指標）
プラットフォーム別推奨基準値:
- 放送 (EBU R128): -23 LUFS
- YouTube: -14 LUFS
- Spotify: -14 LUFS
- Apple Music: -16 LUFS
- Twitch: -14 LUFS
- Amazon Music: -14 LUFS
使い方:
- ヘッダーの「Target」から配信先に応じた基準値を選択
- Integratedがターゲット基準値付近なら適正レベル
- Short-termで瞬間的な音量変化を監視
- LRAが高い：ダイナミック、低い：圧縮された音
オーバーサンプリングによる真のピーク値測定
グラフ表示:
- 緑〜黄〜オレンジ〜赤: レベルによるグラデーション
- 青い縦線: ピークホールド（過去2秒の最大値）
- オレンジの縦線（0dB）: クリッピング境界線
数値表示:
- Peak L / Peak R: 左右チャンネルの最大ピーク値（dBTP）
使い方:
- 0 dBTP超過でクリッピング（歪み）発生のリスク
- 放送基準: -1 dBTP以下推奨
- D/A変換時のオーバーシュートを検出
アナログスタイルのボリュームユニットメーター
グラフ表示:
- アナログ針: L/R独立のVUメーター
- 緑の針: -20〜0 VU（安全範囲）
- オレンジの針: 0〜+3 VU（注意）
- 赤い針: +3 VU超過（過大入力）
- 青い0マーク: 基準レベル（0 VU）
数値表示:
- VU値: -20〜+6 VUの範囲で表示（高レベル音源対応）
使い方:
- 0 VU = -18 dBFS（デジタル換算）
- 針が0 VU付近で揺れるのが理想的
- +3 VU超過は過大入力（YouTube等の高レベル音源では+3〜+6 VUになることがある）
- アナログミキサーのVUメーターを再現
FFT解析による周波数スペクトラム表示
グラフ表示:
- 紫のグラデーション: 周波数成分の強度
- 横軸: 20Hz〜20kHz（DAW/ミキサーEQ風の対数スケール）
- 縦軸: -80dB〜0dB
- 低域を圧縮し、中高域（1kHz〜）により多くのスペースを割り当て
使い方:
- 低域（20-200Hz）: キックドラム、ベース
- 中域（200-2kHz）: ボーカル、楽器
- 高域（2k-20kHz）: シンバル、倍音
- 特定周波数の突出を視覚的にチェック
ステレオイメージとフェーズ相関の可視化
左側 - ステレオフィールド:
- 円形グラフ: L/R/M/Sの音像定位
- M（上）: モノラル成分
- L（左）/R（右）: ステレオ成分
- S（下）: サイド成分
- 青い点: 音の位置（リアルタイム）
右側 - Phase Correlation:
- 緑のバー: 正の相関（+1）= 完全同相（モノラル）
- 黄色のバー: 中間（0付近）= 良好なステレオ
- オレンジ〜赤のバー: 負の相関（-1方向）= 逆相（要注意）
数値表示:
- +1.0: 完全なモノラル
- 0.0: 理想的なステレオ
- -1.0: 完全な逆相（モノラル化で音が消える）
使い方:
- Correlationが-1に近い場合、モノラル再生で位相キャンセル発生
- ステレオの広がりと相関のバランスをチェック
ラウドネスの時系列変化グラフ
グラフ表示:
- 緑のライン: Integrated Loudness
- 黄色のライン: Short-term Loudness
- オレンジのライン: Momentary Loudness
- 青い横線: ターゲット基準線（変更可能）
- 横軸: 時間（約30秒分）
使い方:
- 楽曲全体のラウドネス変化を確認
- 急激な音量変化を視覚的に検出
- ターゲット基準値との乖離をチェック
画面右上の 🌙 Dark / ☀️ Light ボタンでテーマを切り替え可能。設定は自動保存されます。
ライトモード:
- 明るい背景、コントラスト重視
- 長時間作業に適した視認性
ダークモード:
- 暗い背景、目に優しい
- 夜間作業や暗い環境に最適
- 対応ブラウザ: Chrome, Edge（Web Audio API対応ブラウザ）
- サンプルレート: 48kHz
- バッファサイズ: 2048サンプル（低レイテンシー）
- FFTサイズ: 8192（高解像度）
- レイテンシー: 約40-50ms（インタラクティブモード）
index.htmlをブラウザで開く- 入力ソースを選択（マイク or デスクトップ音声）
- "▶ Start Monitoring" ボタンをクリック
- ブラウザのマイク/音声キャプチャ許可を承認
- ▶ Start Monitoring: 音声モニタリングを開始
- ■ Stop: モニタリングを停止
- 🔄 Reset: すべてのメーター値をリセット（ピーク値、履歴など）
- オーディオインターフェースのマイク入力
- ループバック機能を使えばシステム音声も取得可能
- Chrome の
getDisplayMediaAPI を使用 - 画面共有ダイアログで「タブ」または「ウィンドウ」を選択
- オーディオ共有を有効化
ヘッダー部のチェックボックスで各メーターの表示/非表示を切り替え可能。設定はローカルストレージに保存され、次回起動時に復元されます。
各メーターパネルのヘッダー部分（⋮⋮ アイコン付き）をドラッグして、好きな順序に並び替え可能。
操作方法:
- パネルのヘッダー部分にマウスをホバーすると「ドラッグして移動」と表示されます
- ⋮⋮ アイコン部分をクリック＆ドラッグ
- ドラッグ中はパネルがマウスカーソルに追従して移動します
- 元の位置に点線の枠で「ここに配置」と表示されます
- マウスに近いパネルが青い枠でハイライトされます
- 目的の位置でマウスを離すとパネルが移動します
視覚的なフィードバック:
- ドラッグ中のパネルは半透明で傾き、マウスに追従します
- マウス位置に最も近いパネルが青い枠でハイライト
- 元の位置には点線の枠が残り、配置場所が明確
- パネル内にマウスがある場合、そのパネルの前後に正確に配置されます
賢い位置判定:
- 横方向の重なりを優先的に判定
- グリッドレイアウトを考慮した2次元配置
- 意図した場所に正確に配置できます
並び順はローカルストレージに自動保存され、次回起動時に復元されます。
- 対応ブラウザ: Chrome, Edge（Web Audio API対応ブラウザ）
- サンプルレート: 48kHz
- バッファサイズ: 4096サンプル（CPU負荷軽減のため最適化）
- FFTサイズ: 2048（パフォーマンス重視で最適化）
- レイテンシー: 約85ms（バックグラウンド再生への影響を最小化）
- フォント: LINE Seed JP（Google Fonts）
- カラーテーマ: ライト/ダークモード対応
sound_graffiti/
├── index.html # メインHTML
├── css/
│ └── styles.css # スタイルシート
├── js/
│ ├── app.js # メインアプリケーション
│ ├── audio-engine.js # Web Audio API処理
│ ├── meters/
│ │ ├── lufs-meter.js # LUFSメーター
│ │ ├── truepeak-meter.js # True Peakメーター
│ │ ├── vu-meter.js # VUメーター
│ │ ├── spectrum-analyzer.js # スペクトラムアナライザー
│ │ ├── stereo-field.js # ステレオフィールド
│ │ └── history.js # ヒストリー
│ └── ui/
│ └── layout-manager.js # レイアウト管理
└── README.md # このファイル
- 音声処理: Web Audio API の
ScriptProcessorNodeを使用（将来的にAudioWorkletへの移行を推奨） - 描画: Canvas 2D API によるリアルタイムレンダリング
- レイアウト: CSS Grid による柔軟なパネル配置
- 状態管理: localStorage による設定の永続化
audio-engine.js の bufferSize を変更：
this.bufferSize = 1024; // より低レイテンシー（CPU負荷増）
this.bufferSize = 4096; // より高レイテンシー（CPU負荷減）各メータークラスの minDB, maxDB, minLUFS, maxLUFS などの値を調整。
✅ 完全対応
- デスクトップ音声キャプチャ未対応
- ScriptProcessorNode の挙動が若干異なる
- Web Audio API の実装差異に注意
- デスクトップ音声キャプチャは Chrome/Edge のみ対応
ScriptProcessorNodeは非推奨（将来AudioWorkletに移行予定）
LUFS計算が正しいことを確認するため、以下のテストツールを用意しています：
- 基本テスト:
test-lufs.htmlを開いて coefficient と計算式を確認 - リアルタイムデバッグ: コンソールで
enableLUFSDebug()を実行して詳細ログを表示
詳細は TESTING.md を参照してください。
重要: LUFS値は必ず負の値（-60〜0 LUFS程度）になります。正の値が表示される場合は、ページをリロードしてください。
- モバイルブラウザでは動作が不安定な可能性あり
- ITU-R BS.1770-4: Algorithms to measure audio programme loudness and true-peak audio level
- EBU R128: Loudness normalisation and permitted maximum level of audio signals
- IEC 60268-18: Peak programme level meters
- AudioWorklet への移行（より低レイテンシー）
- エクスポート機能（CSV, 画像）
- プリセット機能（放送局別基準値）
- ダークモード切り替え（実装済み）
- カスタムテーマカラー設定
警告: "The ScriptProcessorNode is deprecated"
この警告はブラウザが出力するもので、アプリケーションの動作には影響しません。
- 原因: 現在のWeb Audio API実装で使用している
ScriptProcessorNodeが非推奨とされています - 影響: 警告メッセージが表示されますが、機能は完全に動作します
- 対策: 将来的に
AudioWorkletNodeへの移行を検討していますが、現時点では問題ありません
その他のコンソールメッセージを非表示にする
開発モード（DEBUG）を無効にすることで、アプリケーションのログメッセージを非表示にできます：
// js/app.js の先頭
const DEBUG = false; // true にするとログが表示される一部のブラウザでは、画面共有を通じたデスクトップオーディオ取得がサポートされていない場合があります。Chrome/Edgeの最新版を使用してください。
Sound Graffiti - Web Audio Loudness Meter