# `PhiaUi.Components.AudioPlayer`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/media/audio_player.ex#L1)

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" />

# `audio_player`

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 to `0`.
* `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 to `nil`.
* `autoplay` (`:boolean`) - Auto-start playback on mount. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*