Loading...
Installation
Usage
import AudioBookPlayer from "@/components/ruixen/audio-book-player";
export default function App() {
return (
<AudioBookPlayer
audioSrc="https://example.com/audiobook-chapter1.mp3"
chapterTitle="Chapter 1: The Beginning"
author="John Doe"
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
audioSrc | string | Default audio URL | URL of the audiobook file |
chapterTitle | string | "Chapter 1: The Beginning" | Title of current chapter |
author | string | "John Doe" | Author name |
className | string | - | Additional CSS classes |
Features
- Fixed Position: Stays at bottom of screen like music apps
- Chapter Information: Display chapter title and author
- Speed Control: Toggle between 1x, 1.5x, and 2x playback speeds
- Progress Slider: Seekable progress bar
- Play/Pause Control: Simple audio controls
- Progress Percentage: Shows completion percentage
- Responsive Design: Adapts to different screen sizes
Positioning
The player is positioned fixed at the bottom center of the screen:
position: fixed
bottom: 1rem
left: 50%
transform: translateX(-50%)Speed Options
The speed control cycles through:
- 1x: Normal speed
- 1.5x: 1.5x faster
- 2x: Double speed