AudioPlayer
A full-featured audio playback bar with play/pause, seeking, skip, volume, and speed controls.
Installation
npx dafink-ui add audioplayerAlso installs: Button, Slider
Demo
SoundHelix Song 1
SoundHelix
Compact size
Pass size="compact" for exactly three elements in one row (play/pause, seek slider, elapsed time) with no card chrome of its own. The play button and slider derive their color from currentColor, so they stay legible when dropped straight into a colored container, like a Message bubble.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| src | string | - | URL of the audio file to play. Required. |
| title | string | - | Track title. Displayed above the controls in "default" size only; "compact" never renders it. |
| subtitle | string | - | Secondary line displayed below the title. Typically artist, episode name, or any short descriptor. "default" size only, same as title. |
| size | 'default' | 'compact' | 'default' | "compact" strips the player to exactly play/pause, seek slider, and elapsed time in one row, with no card chrome (border/shadow/background/padding), for embedding inside another container that supplies its own background, like a Message bubble. |
| className | string | "" | Additional classes applied to the container div. |