Actions

AudioPlayer

Native audio element with Cinder media controls for play, pause, replay, and seeking.

import { AudioPlayer } from '@lostgradient/cinder';
mediaaudio
01

Overview

Reference usage

Native audio element with Cinder media controls for play, pause, replay, and seeking.

Usage

svelte 
<script lang="ts">
  import { AudioPlayer } from '@lostgradient/cinder';
</script>

<AudioPlayer src="https://example.com/media/briefing.mp3" label="Daily briefing" />

Guidance

Use When

  • Playing a single audio track from an https, http, or blob URL with accessible controls.

Avoid When

  • You need streaming protocols, caption authoring, or playlists — wire those separately.
  • You only need playback buttons for media you control elsewhere — use media-controls.
Live preview

Basic audio player

02

When to use

Use when
  • Playing a single audio track from an https, http, or blob URL with accessible controls.
Avoid when
  • You need streaming protocols, caption authoring, or playlists — wire those separately.
  • You only need playback buttons for media you control elsewhere — use media-controls.
03

Examples

Basic audio player

Play, pause, and seek from the media controls. Only https, http, and blob sources load.

Unavailable source

A source whose scheme is not https, http, or blob never loads and renders the unavailable controls.

04

Props

Props for audio-player
Name
Type
Default
Description
src required text Media source. Only https:, http:, and blob: URLs load; any other scheme renders the unavailable state.
label required text Accessible name for the player.