Skip to main content

Audio

Audio

Compact audio player with themed controls and keyboard support

Tags: component media display

View Demo

Audio is the same player engine as Video, laid out as a single inline bar: artwork, title, transport controls, seek bar, and volume. Fullscreen and picture-in-picture are omitted, since neither applies.

Import​

<script>
  import { Audio } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Audio src="/episode-12.mp3" title="Episode 12" artist="Design Notes" artwork="/cover.jpg" />

Props​

Prop Type Default Description
src string | MediaSource[] required A single URL, or several sources for format fallback
title string - Track title shown above the controls
artist string - Performer or author shown beside the title
artwork string - Artwork image URL
label string - Accessible name; defaults to the title
tracks MediaTextTrack[] [] Transcript or caption tracks
autoplay boolean false Start playing automatically
muted boolean false Start muted
loop boolean false Loop playback
volume number 1 Initial volume, 0 to 1
preload 'none' | 'metadata' | 'auto' 'metadata' How much to preload
onEnded () => void - Called when playback ends
onTimeUpdate (currentTime: number) => void - Called on each time update, with seconds elapsed
class string - Additional CSS classes

Keyboard Shortcuts​

Key Action
Space or K Play/pause
← / → Seek 5 seconds
J / L Seek 10 seconds
↑ / ↓ Volume up/down
M Mute/unmute
Home / End Jump to start/end
0–9 Seek to 0%–90%

Playlist​

Chain tracks by advancing an index from onEnded:

<script>
  let current = $state(0);
  const tracks = [
    { src: '/one.mp3', title: 'One' },
    { src: '/two.mp3', title: 'Two' },
  ];
</script>

<Audio
  src={tracks[current].src}
  title={tracks[current].title}
  onEnded={() => (current = Math.min(current + 1, tracks.length - 1))}
/>

Accessibility​

  • The player is a labelled region and is focusable, so the shortcuts have somewhere to land.
  • The seek bar announces spoken timestamps rather than raw numbers.
  • Artwork is decorative and hidden from assistive technology; the title carries the meaning.
  • Play and mute buttons relabel themselves to match their current state.
  • Video - The same player, laid out for video
  • MediaGrid - Shows audio items with artwork and duration
  • Lightbox - Plays audio full-screen
On this page