AudioPlayer

Playback of a short recording (Figma "Audio Player" 2056:47284): a 44 px brand play/pause button, a decorative waveform and the time as text.

Used inside Review Item (Kind=Voice) and Voice Recorder (Recorded). Not a general media player; the app's hook owns the <audio> element.

<AudioPlayer duration="0:12" playLabel="Ouvir sua gravação" pauseLabel="Pausar" onPlayingChange={(on) => (on ? audio.play() : audio.pause())} />

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Audio Player

0:12

playing

boolean

className

string

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Paused	Playing
0:12	0:05 / 0:12

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

Prop	Tipo	Padrão	Descrição
duration	string	—	Figma `duration`: the total length as text ("0:12").
elapsed?	string	—	Elapsed time while playing ("0:05"); shown as "0:05 / 0:12".
progress?	number	—	Share already played, 0–1: those bars turn brand.
playing?	boolean	—	Controlled Figma State (Playing / Paused).
defaultPlaying?	boolean	false	Uncontrolled initial state.
onPlayingChange?	((playing: boolean) => void)	—	Called with the next state when the button is pressed. Wire it to the app's own audio element: this part only draws the controls.
playLabel	string	—	Accessible name of the button while paused ("Ouvir sua gravação").
pauseLabel	string	—	Accessible name while playing ("Pausar").
className?	string	—