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.

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.