波形表示
オーディオプレイヤーの波形表示は WaveSurfer.js の Canvas レンダリングを使用しています。
| 項目 | 値 |
|---|---|
| レンダリング | HTML5 Canvas |
| 波形の高さ | 128 px |
| バー幅 | 2 px |
| バー間隔 | 1 px |
| 波形色 | グレー (#666) |
| 再生済み色 | 赤 (#e63946) |
| カーソル色 | 赤 (#e63946) |
スクロール動作
Section titled “スクロール動作”- 自動スクロール: 有効 — 再生中はカーソルに追従してスクロールします
- 手動スクロール: 波形エリアを左右にドラッグまたはスクロールバーで移動
- 波形をクリックするとその位置にシークします
コメントマーカー
Section titled “コメントマーカー”波形上にはコメントのマーカーが表示されます (WaveSurfer RegionsPlugin)。
- アクティブなコメント: カテゴリ色 + 88% 不透明度
- 解決済みコメント: カテゴリ色 + 33% 不透明度(薄く表示)
- マーカーをクリックすると該当コメントにスクロールし、その位置から再生が開始されます
表示モード切替
Section titled “表示モード切替”波形表示とスペクトログラム表示を切り替えることができます。スペクトログラム表示では周波数分布を視覚的に確認できます。