Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/audio-timeline-with-chapters"use client"
import AudioTimelineWithChapters, { Chapter } from "@/components/ui/audio-timeline-with-chapters"
export default function DemoAudioTimelineWithChapters() {
const chapters: Chapter[] = [
{ time: 0, label: "Intro" },
{ time: 15, label: "Chapter 1" },
{ time: 30, label: "Chapter 2" },
{ time: 45, label: "Chapter 3" },
]
return (
<div className="flex flex-col items-center justify-center">
<h2 className="text-xl font-bold text-black dark:text-white">Podcast Player with Chapters</h2>
<AudioTimelineWithChapters
audioSrc="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
chapters={chapters}
width={500}
/>
</div>
)
}