Component
AudioPlayer
Audio with a title, artist, artwork and the shared control bar.
import { AudioPlayer } from '@loidolt/theme-svelte';
Example
Calibration tone Workshop sounds
0:00
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.
| Prop | Type | Default | Notes |
|---|---|---|---|
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 | boolean | false | |
mediaRef bindable | HTMLAudioElement | null | null | |
onEnded | () => void | — | |
onTimeUpdate | (seconds: number) => void | — | |
preload | 'none' | 'metadata' | 'auto' | 'metadata' | |
ref bindable | HTMLDivElement | null | null |
Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'>, forwarded to the root element.