مشغّل الصوت

An audio playback component in مدمج and مفصَّل layouts, with شفاف, الهوية, أسود, and محايد colour styles.

Loading demo: audio-player-real-world

التثبيت

npx sdaia-ui@latest add audio-player

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

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

audio player مدمج لـ minimal interfaces.

Loading demo: audio-player-compact

audio player مفصَّل مع full playback controls and track information.

Loading demo: audio-player-detailed

خصائص مكوّن AudioPlayer.

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