Audio Player
An audio playback component in Compact and Detailed layouts, with Transparent, Brand, Black, and Neutral colour styles.
Loading preview…
1
'use client';2
3
import { AudioPlayer } from 'sdaia-ui';4
import { useEffect, useState } from 'react';5
Installation
npx sdaia-ui@latest add audio-player
Usage
import { AudioPlayer } from "@/components/ui/audio-player"<AudioPlayer type="compact" style="neutral" />Examples
Compact
Compact audio player for minimal interfaces.
Loading preview…
1
<AudioPlayer2
type="compact"3
style="neutral"4
currentTime="0:12"5
duration="2:32"Detailed
Detailed audio player with full playback controls and track information.
Loading preview…
1
<AudioPlayer2
type="detailed"3
style="neutral"4
audioName="Episode 3: The Future of Design Systems"5
currentTime="0:12"API Reference
AudioPlayerProps
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 |