Audio Player

An audio playback component in Compact and Detailed layouts, with Transparent, Brand, Black, and Neutral colour styles.

Loading demo: audio-player-real-world

Installation

npx sdaia-ui@latest add audio-player

import { AudioPlayer } from "@/components/ui/audio-player"

<AudioPlayer type="compact" style="neutral" />

Compact audio player for minimal interfaces.

Loading demo: audio-player-compact

Detailed audio player with full playback controls and track information.

Loading demo: audio-player-detailed

Props for the AudioPlayer component.

Prop	Type	Default	Required
type	'compact' \| 'detailed'	'compact'	optional
style	'transparent' \| 'neutral' \| 'brand'	'transparent'	optional
playing	boolean	-	optional
defaultPlaying	boolean	false	optional
progress	number	-	optional
defaultProgress	number	0	optional
currentTime	string	'0:00'	optional
duration	string	'0:00'	optional
audioName	string	-	optional
onPlay	() => void	-	optional
onPause	() => void	-	optional
onSkipBack	() => void	-	optional
onSkipForward	() => void	-	optional
onProgressChange	(value: number) => void	-	optional
onVolumeClick	() => void	-	optional
onSettingsClick	() => void	-	optional
muted	boolean	—	optional
defaultMuted	boolean	false	optional