Chapter waveformPro
A waveform with chapter markers, titles and a jump list.
On this page
ProA 32 minute episode in six chapters; click the wave or a chapter to jump.
Installation
Usage
import { ChapterWaveform } from "@/components/ui/chatcn/pro/chapter-waveform"
<ChapterWaveform peaks={peaks} duration={1902} currentTime={time} onSeek={seek} chapters={chapters} />Built on the free waveform. Chapter breaks cut a gap in the wave; hovering shows the time and chapter under the pointer. The current chapter's title sits above and updates as playback crosses a break.
Examples
States
ProWaveform only and one chapter.
Props
| Prop | Type | Notes |
|---|---|---|
peaks | number[] | Any length and scale |
duration, currentTime, onSeek | number | Seconds |
chapters | { start, title }[] | Oldest first |
list | boolean | Show the jump list. Default true |
Accessibility
- The wave is a slider: arrow keys step 5 s, Page Up and Page Down jump between chapters, Home and End go to the ends.
- The current chapter is marked with
aria-currentin the list and announced politely.