Media

Audio player

Plays a recording with a timeline you can drag or step through, skips of 15 seconds, speed and volume. Its title and controls also appear on the lock screen and respond to headphone buttons.

Installation

npx sinaui add audio-player

Copy src/lib/ui/AudioPlayer.svelte, with Visualizer, Button, Icon, Spinner, motion.ts and tokens.css. No dependencies.

Examples

Basic

Taxim Hicaz, played by Ahmed Djewdet around 1928. Public domain, via Wikimedia Commons.

Taxim Hicaz Ahmed Djewdet, c. 1928

<script lang="ts">
	import AudioPlayer from '#lib/ui/AudioPlayer.svelte';
</script>

<!-- Taxim Hicaz, played by Ahmed Djewdet, c. 1928. Public domain, via Wikimedia Commons. -->
<AudioPlayer
	src="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0c/Taxim_Hicaz_%28c._1928%29.ogg/Taxim_Hicaz_%28c._1928%29.ogg.mp3"
	title="Taxim Hicaz"
	artist="Ahmed Djewdet, c. 1928"
/>

With a visualizer

Bars that move with the music. The file's host must allow cross-origin requests; Wikimedia Commons does.

Taxim Hicaz Ahmed Djewdet, c. 1928

<script lang="ts">
	import AudioPlayer from '#lib/ui/AudioPlayer.svelte';
</script>

<!-- Taxim Hicaz, played by Ahmed Djewdet, c. 1928. Public domain, via Wikimedia Commons. -->
<AudioPlayer
	src="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0c/Taxim_Hicaz_%28c._1928%29.ogg/Taxim_Hicaz_%28c._1928%29.ogg.mp3"
	title="Taxim Hicaz"
	artist="Ahmed Djewdet, c. 1928"
	visualizer
/>

Props

Prop	Type	Default
`src`	`string` (required)
`title`	`string` (required)
`artist`	`string`
`artwork`	`string`: image URL
`visualizer`	`boolean \| 'bars' \| 'wave'`	`false`
`element`	`HTMLAudioElement`, bindable
`locale`	`string`	`'en'`

Keyboard

On the timeline:

Key	Does
`→` / `↑`	Forward 5 seconds
`←` / `↓`	Back 5 seconds
`PageUp` / `PageDown`	Forward / back 30 seconds
`Home` / `End`	Start / end

Accessibility

The timeline is a native slider; screen readers hear “1 minute, 23 seconds of 3 minutes, 5 seconds”.
Every button is named: play or pause, back and forward 15 seconds, speed, mute.
Right-to-left: the timeline fills from the right and the arrow keys follow it.
If the file can’t load, a plain message and a Try again button replace the timeline.
With reduced motion, play and pause swap with a fade only.