Media & time

Audio player

An audio player with its own controls — a podcast episode, a voice note, a sample.

Client componentSource

Import

import { AudioPlayer } from '@the_viveksingh/vivek-ui'

A track card

title, subtitle and artwork make it a card; the string title names the player for assistive tech. Every control is a real button or range: the seek bar announces "1:23 of 4:56", volume a percentage. Space/K play, arrows seek and change volume, J/L jump ten seconds, M mutes.

T. rex roar
CC0 sample · 2 seconds
<AudioPlayer
  title="Episode 12: Zero dependencies"
  subtitle="The VivekUI podcast · 42 min"
  artwork="/podcast/cover.jpg"
  src="/podcast/ep12.mp3"
  onEnded={() => markListened(12)}
/>

Bare and small

Without a title it is one control row. size="sm" tightens it for a comment thread or a table cell; rates={[]} drops the speed control; several sources let the browser pick the first it can decode. Under 28rem the volume slider goes (mute stays); under 20rem the speed control goes too.

T. rex roar
CC0 sample · 2 seconds
<AudioPlayer
  size="sm"
  label="Voice note from Priya"
  rates={[]}
  src={[
    { src: '/notes/priya.ogg', type: 'audio/ogg' },
    { src: '/notes/priya.mp3', type: 'audio/mpeg' },
  ]}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for AudioPlayer
PropTypeDefaultDescription
srcstring | AudioSource[]—One URL, or several sources the browser picks from in order.
titleReactNode—Track title, shown above the controls.
subtitleReactNode—Artist, episode, date — the line under the title.
artworkstring—Square artwork beside the title. Decorative: the title is the name.
labelstring—Accessible name of the player. Defaults to the `title` when it is a string, else `'Audio player'`.
size'sm' | 'md'——
autoPlayboolean——
mutedboolean——
loopboolean——
preload'none' | 'metadata' | 'auto'——
ratesnumber[]—Playback speeds offered. Default `[0.75, 1, 1.25, 1.5, 2]`; `[]` hides the control.
seekStepnumber—Seconds moved by ArrowLeft / ArrowRight. Default `5`.
errorMessageReactNode—Shown when the media fails to load or decode.
audioRefRef<HTMLAudioElement>—The `<audio>` element, for anything the props do not cover.
audioPropsOmit<AudioHTMLAttributes<HTMLAudioElement>, 'src' | 'controls' | 'autoPlay' | 'muted' | 'loop' | 'preload'>—Extra attributes for the `<audio>` — `crossOrigin`, for one.
onPlayingChange(playing: boolean) => void——
onTimeChange(currentTime: number, duration: number) => void——
onEnded() => void——
onError() => void——

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering