AudioPlayer

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

Import

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

Basic Usage

<AudioPlayer
  album="Prehistoric Sessions"
  artist="NASA"
  artwork="/images/cover.webp"
  duration="11:06"
  src="/audio/briefing.mp3"
  title="STS-133 FD11 Mission Status Briefing"
/>

Pass a number of seconds to duration to let the component format it. 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. Native audio controls remain available as the no-JavaScript fallback.

Multiple Sources

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 also accepts native audio attributes such as src, autoplay, loop, muted, and crossorigin.