AudioPlayer
v1.0.0Compact audio playback with waveform visualization. Played portion shown in temporal blue; unplayed in border-structure. Click waveform to seek. Supports controlled and uncontrolled modes. States: idle, playing, paused, loading (skeleton bars), error.
import { AudioPlayer } from "@danagraph/design-system/patterns"Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Audio source URL. Used in uncontrolled mode. |
waveform | number[] | — | Pre-computed amplitude data 0–1 per bar. Falls back to generated envelope when omitted. |
duration | number | — | Duration in seconds. Required if src is not provided. |
currentTime | number | — | Controlled playback position in seconds. |
state | "idle" | "playing" | "paused" | "loading" | "error" | — | Controlled state. Uncontrolled when omitted. |
onPlay | () => void | — | Called when playback is requested. |
onPause | () => void | — | Called when pause is requested. |
onSeek | (seconds: number) => void | — | Called when user seeks (click or keyboard). |
errorMessage | string | — | Error message for error state. |
label | string | — | Label shown above the player (e.g. Voice Recording). |
barCount | number | 60 | Number of waveform bars to render. |
srcstringDefault —Audio source URL. Used in uncontrolled mode.
waveformnumber[]Default —Pre-computed amplitude data 0–1 per bar. Falls back to generated envelope when omitted.
durationnumberDefault —Duration in seconds. Required if src is not provided.
currentTimenumberDefault —Controlled playback position in seconds.
state"idle" | "playing" | "paused" | "loading" | "error"Default —Controlled state. Uncontrolled when omitted.
onPlay() => voidDefault —Called when playback is requested.
onPause() => voidDefault —Called when pause is requested.
onSeek(seconds: number) => voidDefault —Called when user seeks (click or keyboard).
errorMessagestringDefault —Error message for error state.
labelstringDefault —Label shown above the player (e.g. Voice Recording).
barCountnumberDefault 60Number of waveform bars to render.
This component was designed to express:
Explore Related
Microphone trigger with integrated waveform animation. States: idle, listening (agency red), processing (temporal blue), done, error. Waveform bars animate to real or simulated audio amplitude while listening; freeze and pulse during STT processing.
Live speech-to-text output with per-segment confidence signaling. Low-confidence words are underlined in gold (validation) with a confidence pill. Temporal blue border while transcribing, gold for low-confidence final output, error red for STT failure.
Ambient ring indicator for voice pipeline state. Sizes: sm/md/lg. States: idle (muted), listening (agency red pulse), processing (temporal blue spin), speaking (green pulse — agent delivering output), error, muted. Designed for headers, toolbars, and conversation panels.