## Podcast Chapters (S—242)

An episode player with chapters: the current one fills as it plays, tap to jump, skip back or ahead, change speed.

- URL: https://sundaeui.dev/components/podcast-chapters
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/podcast-chapters.json`
- Tags: player, audio, podcast, media, chapters, episode

The chapter list doubles as navigation: each row shows its start time and a thin progress line while it plays. The scrubber marks chapter boundaries.
Skip back 15s and forward 30s, and cycle playback speed. Time is simulated in the demo; wire it to an audio element in production.

### Usage

```tsx
import { PodcastChapters } from '@/components/sundae/podcast-chapters'

<PodcastChapters />
```

### Props

- `chapters` (`{ title: string; start: number }[]`, required): Chapter starts in seconds.
- `duration` (`number`, required): Episode length.
- `title` (`string`): Episode title.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Podcast apps, course lessons, long talks.

### When not to use

- Music tracks with no structure.

### Accessibility

- Chapters are buttons with their start time; the current one has aria-current.
- The scrubber is a slider with time text.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Space: Play / pause
- ← / →: Back 15s / forward 30s