スペクトログラム
スペクトログラムは、オーディオの周波数分布を時間軸に沿って視覚的に表示する機能です。
スペクトログラムはサーバーサイドで FFmpeg の showspectrumpic フィルターを使って生成されます。トラックアップロード後にバックグラウンドで自動生成されます。
| 項目 | 値 |
|---|---|
| 解像度 (幅) | 50 ピクセル/秒 (最大 30,000 px) |
| 解像度 (高さ) | 256 px |
| 周波数スケール | 対数 (低域から高域まで均等に視認可能) |
| 時間スケール | 対数 |
| チャンネル | Combined (L+R ミックス) |
| 元データ形式 | グレースケール RAW (1 バイト/ピクセル、256 段階) |
カラーマップ (Magma)
Section titled “カラーマップ (Magma)”サーバーから受信したグレースケールデータは、フロントエンドで 256 段階の Magma カラーマップに変換されます:
| 値の範囲 | 色 | 意味 |
|---|---|---|
| 0〜64 (0〜25%) | 黒 → 紫 | 無音〜非常に小さい音 |
| 64〜128 (25〜50%) | 紫 → オレンジ | 小さい音 |
| 128〜192 (50〜75%) | オレンジ → 黄 | 中程度の音量 |
| 192〜256 (75〜100%) | 黄 → 白 | 大きい音量 |
レンダリング最適化
Section titled “レンダリング最適化”スペクトログラムの描画にはパフォーマンス最適化が施されています:
- プリレンダリング: 全体のスペクトログラムを
OffscreenCanvasに事前描画 - ビューポートスライシング: 表示領域に対応する部分のみを
drawImage()1 回の呼び出しで描画 (GPU アクセラレーション) - 変更検出: スクロール位置が変化した場合のみ再描画 (不要な描画をスキップ)
- ノイズの特定 — 特定の周波数帯に現れる不要なノイズやレゾナンスを視覚的に発見
- EQ の効果確認 — EQ 処理前後のスペクトログラムを比較して、周波数バランスの変化を確認
- 帯域バランス — 低域・中域・高域のエネルギー分布を視覚的に評価
- 位相の問題 — 特定の周波数帯が異常に弱い場合、位相キャンセルの可能性を示唆
ピッチオーバーレイ
Section titled “ピッチオーバーレイ”スペクトログラム上にはオプションでピッチ検出結果をオーバーレイ表示できます。
| 項目 | 値 |
|---|---|
| アルゴリズム | YIN |
| サンプルレート | 22,050 Hz |
| ホップサイズ | 221 サンプル (約 10 ms) |
| ウィンドウサイズ | 2,048 サンプル (約 93 ms) |
| 検出範囲 | C2 (65 Hz) 〜 C7 (2,100 Hz) |
- 音階グリッド (C, D, E, F, G, A, B) が対数スケールで表示されます
- ピッチカーブは検出信頼度に応じた透明度で描画されます（高信頼度 = 不透明、低信頼度 = 半透明）