MediaPlayer
Compact media player with playback controls and animated waveform visualization. Two variants: controls (shuffle, prev/play/next, repeat, volume) and waveform (animated bars with time display).
Installation
$ npx shadcn@latest add media-playerPreview
Controls Variant
Waveform Variant
3:41
Waveform Variant
3:41
Usage (React/TSX)
import { MediaPlayer } from "@/components/ui/media-player"
export default function MusicWidget() {
const [isPlaying, setIsPlaying] = useState(false);
return (
<MediaPlayer
variant="controls"
isPlaying={isPlaying}
onPlayPause={() => setIsPlaying(!isPlaying)}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "controls" | "waveform" | "controls" | The visual style of the player. |
| isPlaying | boolean | false | Whether the player is currently playing. |
| onPlayPause | () => void | — | Callback when play/pause is clicked. |
| currentTime | string | "3:41" | Current time display (waveform variant). |
| progress | number | 65 | Progress percentage (0-100). |
| className | string | — | Additional CSS classes to apply. |
Design Notes
- Controls variant: dark pill with white center section for playback controls.
- Waveform variant: animated bars that pulse when playing, static when paused.
- Shuffle, repeat, and volume have toggle states with visual feedback.
- All buttons have hover scale transitions for tactile feel.
- Use for music players, podcast controls, audio previews.