Skip to content
LoidoltTheme 0.11.1
Svelte 5

Component

AudioPlayer

Audio with a title, artist, artwork and the shared control bar.

import { AudioPlayer } from '@loidolt/theme-svelte';

Example

Calibration tone Workshop sounds

Notes

  • The title names the player for assistive tech; artwork is decorative.

Props

Generated from the component source, so it cannot drift from the implementation.

AudioPlayer props
PropTypeDefaultNotes
src required string | MediaSourceEntry[]—
title required string—The track or recording title; also names the player.
artist string—
artwork string—Cover art. Decorative: the title already names the recording.
class string—
hlsLoader HlsLoader—
labels Partial<MediaPlayerLabels>—
loop booleanfalse
mediaRef bindableHTMLAudioElement | nullnull
onEnded () => void—
onTimeUpdate (seconds: number) => void—
preload 'none' | 'metadata' | 'auto''metadata'
ref bindableHTMLDivElement | nullnull

Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>, forwarded to the root element.