AudioPlayer component for playing audio with play/pause, progress bar and timestamp.
Used for voice notes, audio messages, and media playback. The PhiaAudioPlayer
JS hook handles all playback logic — the component renders a static, accessible
shell that is enhanced client-side.
Variants
| Variant | Description |
|---|---|
:default | Full-width player with waveform track |
:compact | Condensed single-line layout |
Examples
<%!-- Basic player --%>
<.audio_player id="vn-1" src="/uploads/voice.mp3" />
<%!-- With known duration --%>
<.audio_player id="vn-2" src="/uploads/voice.mp3" duration={45} />
<%!-- Compact variant --%>
<.audio_player id="vn-3" src="/uploads/voice.mp3" variant={:compact} />
<%!-- With label --%>
<.audio_player id="vn-4" src="/uploads/voice.mp3" label="Voice note" />Summary
Functions
Renders an audio player component.
Functions
Renders an audio player component.
The component is wired to the PhiaAudioPlayer LiveView hook via phx-hook.
The hook manages play/pause toggling, progress updates, and timestamp display.
Examples
<.audio_player id="msg-audio" src={@message.audio_url} duration={@message.duration} />
<.audio_player
id="voice-note"
src="/uploads/note.mp3"
variant={:compact}
label="Recording 1"
/>Attributes
id(:string) (required) - Unique HTML id — required by the JS hook.src(:string) (required) - URL of the audio file.duration(:integer) - Known duration in seconds. Displayed as MM:SS before playback starts. Defaults to0.variant(:atom) - Visual style — :default (full) or :compact (single-line). Defaults to:default. Must be one of:default, or:compact.label(:string) - Optional label rendered above the player. Defaults tonil.autoplay(:boolean) - Auto-start playback on mount. Defaults tofalse.class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root element.