Elements
Audio player
View in FigmaControls-less audio element with play/pause, seek, volume, download, and playback-speed controls.
Install
npx shadcn@latest add @alix/audioPlayerPreview
Weekly field note
A short operational update from the shipping and energy team.
0:000:00
Usage
<AudioPlayer src="/audio/weekly-field-note.mp3" label="Weekly field note" />Examples
01
Bare control row
Use the player alone when the surrounding content already names the recording.
0:000:00
<div className="w-full max-w-xl">
<AudioPlayer
src="/audio/liquidity-update.mp3"
label="Liquidity update"
/>
</div>02
Multiple recordings
Give every instance a specific label when several recordings sit in one stream.
0:000:00
0:000:00
<div className="flex w-full max-w-xl flex-col gap-6">
<AudioPlayer
src="/audio/partner-note.mp3"
label="Partner note"
/>
<AudioPlayer
src="/audio/client-briefing.mp3"
label="Client briefing"
/>
</div>03
Briefing panel
Frame a recording with Panel metadata when it belongs to a dashboard or engagement workspace.
Field note
Turnaround programme update
8 min
0:000:00
<div className="w-full max-w-xl">
<Panel
title="Field note"
description="Turnaround programme update"
actions={<Badge variant="primary">8 min</Badge>}
>
<AudioPlayer
src="/audio/field-note.mp3"
label="Field note"
/>
</Panel>
</div>When to use it
Use it for
- Embedded leadership updates, field notes, or insight recordings that need consistent playback controls.
- Dashboards or engagement spaces where the recording title and context live outside the control row.
- Multiple recordings in one view, provided each instance has a unique `label`.
Reach for something else
- Audio that needs its own visual stage in a grid — use AudioTile instead.
- CMS-fed audio sections with surrounding copy — use TextAndAudioBlock instead.
- Image or video galleries — use MediaCarousel instead.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Accessible name for the grouped player controls, usually the episode or track title. |