Audio Player
An audio player with play/pause controls, elapsed and total time, and a built-in waveform visualizer that tracks playback progress.
Installation
pnpm dlx shadcn@latest add @ikui/audio-playerUsage
import { AudioPlayer } from "@/components/audio-player";<AudioPlayer blob={blob} /><AudioPlayer url="/audio/sample.mp3" />Props
| Prop | Type | Default |
|---|---|---|
blob | Blob | - |
url | string | - |
width | number | - |
height | number | 84 |
barWidth | number | 2 |
gap | number | 1 |
barColor | string | - |
barPlayedColor | string | rgb(34, 197, 94) |
className | string | - |
onPlayStateChange | (playing: boolean) => void | - |