§20-08Media
Waveform 表示
音声の波形を描き、クリックで再生位置を移す。
無音部分や盛り上がりが視覚的に分かり、目的の箇所に素早く移動できる。録音やポッドキャストの編集・視聴で使う。
実装のポイント
波形は decodeAudioData で得たサンプルを区間ごとのピーク値に間引いて描く。クリック位置を currentTime に換算し、role="slider" で矢印キーのシークも受け付ける。
- 特徴
- 状態管理
- デモで使っているもの
- motion
- lucide-react
- requestAnimationFrame
- Pointer Events
- ソース
- waveform.tsx