# Audio Timeline With Chapters

> The Audio Timeline with Chapters component provides an interactive audio player with clickable chapter markers, allowing users to jump to specific sections of a podcast, audiobook, or lecture. Chapter markers are displayed immediately after the audio metadata loads, ensuring users can see the structure of the content before playing. The progress bar visually tracks playback in real time, and users can navigate either through the timeline or by selecting chapters from the provided list. This compact yet functional design makes it ideal for media-rich applications where quick navigation is essential.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- Live preview: https://21st.dev/@ruixen.ui/components/audio-timeline-with-chapters

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/audio-timeline-with-chapters?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt