AudioPlayer

AudioPlayer builds a themed control surface around the native audio element.

STS-133 FD11 Mission Status Briefing, STS-133 FD11 Mission Status Briefing

Prehistoric Sessions - NASA

00:00666

1.0x

import { AudioPlayer } from '@prosefly/astro-components';

<AudioPlayer
  album="Prehistoric Sessions"
  artist="MDN Audio Lab"
  artwork="/images/cover.webp"
  duration="00:02"
  src="/audio/roar.mp3"
  title="T-Rex roar"
/>

Pass a number of seconds to duration when the value should be formatted by the component. A string is displayed as written until the browser discovers a finite duration from the audio metadata.

The enhanced controls include playback-speed cycling, 15-second replay, 30-second forward, mute, and Media Session integration where supported.

The controls are managed by a light-DOM <pf-audio-player> custom element. Players initialize when added to the page, including after Astro page transitions, and release event listeners, animation frames, and observers when removed. Removing a player pauses its audio; reinserting it preserves the playback position. No JavaScript framework or Shadow DOM is required, so theme tokens and CSS overrides continue to work normally.

Use source children when an audio file is available in multiple formats.

<AudioPlayer artist="Artist" title="Song title">
  <source src="/audio/song.mp3" type="audio/mpeg" />
  <source src="/audio/song.ogg" type="audio/ogg" />
</AudioPlayer>

Props

The component accepts native audio attributes, including src, autoplay, loop, muted, and crossorigin. It uses native controls as its no-JavaScript fallback.