Patterns
Audio Player
Compact controls bar around an HTML5 audio element — play/pause, seek, time, and download.
A compact controls bar around an HTML5 <audio> element: play/pause, a seekable progress track, elapsed/total time, and an optional download button. Give it a src (a URL or object URL) — the host owns the blob lifecycle (e.g. URL.createObjectURL(blob)). Presentation only; no fetching.
Import
tsx
1import { AudioPlayer } from "@yuhuanowo/yunui/patterns";Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| autoPlay | boolean | false | Begin playing as soon as the source is ready. |
| className | string | — | |
| downloadName | string | — | Show a download button linking to `src`; the value is the download filename. |
| labels | AudioPlayerLabels | — | Localized `aria-label`s for the controls (defaults are English). |
| src* | string | — | Audio source URL or object URL. |
| title | string | — | Optional title shown above the controls. |