AudioPlayer

A full-featured audio playback bar with play/pause, seeking, skip, volume, and speed controls.

Installation

npx dafink-ui add audioplayer

Also installs: Button, Slider

Demo

SoundHelix Song 1

SoundHelix

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.

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.

Accessibility

AudioPlayer adds no custom focus management: every control is a real, native-tab-order element (Button and Slider's native input type="range"), so Tab steps through them in DOM order with no roving tabindex or trap. The container is role="region" with an aria-label that includes the track title when provided, the seek slider exposes a human-readable aria-valuetext (e.g. "1:32 of 6:12"), and the play/pause and mute buttons' aria-label update live to describe the action each will perform next.

Key	Function
`space`	Toggles playback when the play/pause button is focused.
`enter`	Toggles playback when the play/pause button is focused.
`left arrow`	Steps the seek slider back 0.1 seconds, or decreases volume by 0.05 on the volume slider.
`right arrow`	Steps the seek slider forward 0.1 seconds, or increases volume by 0.05 on the volume slider.
`home`	Jumps the seek slider to the start.
`end`	Jumps the seek slider to the end.