# AudioPlayer

Source: https://lumeo.nativ.sh/components/audio-player

# AudioPlayer

A themed audio player with play/pause, scrub bar, time display, volume, optional cover art, and download.

## When to Use

-   Embed a single audio track inline with metadata (title, artist, cover) instead of the unstyled native `<audio>` element
-   Provide consistent playback controls in podcast, music, or voice-memo features
-   Offer a download affordance for hosted media when licensing allows
-   Auto-loop short ambient or ringtone-style clips
-   React to playback events (play / pause / ended / timeupdate) from C# code

Preview Code

Basic

Piano sampleCool Edit demo

0:00 / 0:00

Copy Code

Preview Code

With cover art

![Album cover](https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=160&h=160&fit=crop)

Piano sampleCool Edit demo

0:00 / 0:00

Copy Code

Preview Code

Looping + download

Looping piano sampleCool Edit demo

0:00 / 0:00

[](https://www.kozco.com/tech/piano2-CoolEdit.mp3)

Copy Code

Preview Code

Playback events

Tracked sampleCool Edit demo

0:00 / 0:00

Last event: `(none)`

Copy Code

## API Reference

### AudioPlayer

Property

Type

Default

Description

Src

string?

—

Required. URL of the audio file to play.

Title

string?

null

Track title rendered next to the playback controls.

Artist

string?

null

Secondary artist / source label rendered beneath the title.

Cover

RenderFragment?

null

Optional cover art slot. Use an `Avatar` or `Image` to display album art.

Autoplay

bool

false

Starts playback automatically when the component mounts. Browsers may block autoplay for non-muted audio.

Loop

bool

false

When true, the track restarts from the beginning after it ends.

ShowDownload

bool

false

Renders a download button that lets the user save the source file.

PreloadMode

string?

"metadata"

Mirrors the HTML5 `preload` attribute. Values: "none", "metadata", "auto".

OnTimeUpdate

EventCallback<double>

—

Fires while playback progresses with the current time in seconds.

OnPlay

EventCallback

—

Fires when playback starts.

OnPause

EventCallback

—

Fires when playback pauses.

OnEnded

EventCallback

—

Fires when the track reaches the end (does not fire on looped tracks).

Class

string?

null

Additional CSS classes appended to the root element.

AdditionalAttributes

Dictionary<string, object>?

null

Splatted onto the root element for arbitrary HTML attributes.

## Related Components

-   [FileUpload](/components/file-upload) — Capture an audio file from the user before playing it back
-   [Image](/components/image) — Pair with AudioPlayer's `Cover` slot for static album art
-   [Avatar](/components/avatar) — Compact cover-art fallback for podcast hosts or speakers