Loading...
Installation
Usage
import AudioTimelineWithChapters from "@/components/ruixen/audio-timeline-with-chapters";
const chapters = [
{ time: 0, label: "Introduction" },
{ time: 30, label: "Chapter 1" },
{ time: 90, label: "Chapter 2" },
{ time: 150, label: "Conclusion" },
];
export default function App() {
return (
<AudioTimelineWithChapters
audioSrc="https://example.com/audio.mp3"
chapters={chapters}
width={400}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
audioSrc | string | - | URL of the audio file |
chapters | Chapter[] | - | Array of chapter markers |
width | number | 400 | Width of the timeline |
className | string | - | Additional CSS classes |
Features
- Interactive Timeline: Click to seek to any position
- Chapter Markers: Visual chapter indicators on timeline
- Chapter Navigation: Click chapter buttons to jump to sections
- Play/Pause Control: Simple audio controls
- Progress Tracking: Real-time progress visualization
- Responsive Design: Adapts to different screen sizes
Chapter Type
export interface Chapter {
time: number; // in seconds
label: string;
}