Audio player

A React component in Beamline's Voice & audio category.

One audio element and its controls: play with a loading state, a scrub bar with time, skip, speed and a playlist whose rows play into the same player. Use the ready layouts or compose the parts.

Use it for

Call recordings, voice notes and generated speech in an app.
A list of recordings that play one at a time in a shared player.

Not for

Video (video).
A transcript that follows the audio word by word (transcript-viewer).
Only a position control for your own player (scrub-bar).

Anatomy

root (one <audio>)
play button (loading while buffering)
title and subtitle
scrub bar with elapsed and total time
skip back / forward
speed menu
playlist (rows: state, title, subtitle, length)
error line with retry

Variants

layout: card, inline

States

empty (no source)
loading metadata (length unknown, hatched)
paused
playing
buffering
ended
error (file failed: the words and Retry replace the title; the play button turns quiet so Retry leads)
playlist: current row (filled disc in the accent, row tint), playing row (level bars and "Playing")

Keyboard

Tab reaches play, skip, the scrub bar, speed and each playlist row
On the scrub bar: ← → seek 5 s, Page keys a tenth, Home / End, Space or K play and pause
Speed menu: ↑ ↓ and Enter
Playlist row: Enter or Space plays it (or pauses the one playing)

Motion

The playing row's level bars move only while it plays and stop under reduced motion (the row says Playing instead). Everything else is instant.

Props

Prop	Type	Default	Description
`src / title / subtitle`	`string`	—	One recording; or pass tracks.
`tracks`	`AudioTrack[]`	—	{ id, src, title, subtitle?, duration? }; rows of the playlist.
`value / defaultValue / onValueChange`	`string`	—	Id of the loaded track.
`rate / defaultRate / onRateChange`	`number`	`1`
`rates`	`number[]`	`[0.75, 1, 1.25, 1.5, 2]`
`layout`	`"card" \| "inline"`	`"card"`	Ready layouts used when there are no children.
`autoAdvance`	`boolean`	`true`	Play the next track when one ends.
`onEnded`	`(track: AudioTrack) => void`	—
`children`	`ReactNode`	—	Your own composition of AudioPlayerButton, AudioPlayerScrubber, AudioPlayerTime, AudioPlayerSkip, AudioPlayerSpeed, AudioPlayerTitle, AudioPlayerPlaylist; useAudioPlayer() reads the state.
`classNames`	`AudioPlayerClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—
`AudioPlayer parts native props / ref`	`Button, div, span, ul or ScrubBar props`	—	Built-in playback handlers and required media accessibility remain owned by the player; classNames combines player and part overrides.

Built from

button
scrub-bar
dropdown-menu
tooltip

Dependencies

lucide-react

Import

import { AudioPlayer, AudioPlayerButton, AudioPlayerTitle, AudioPlayerScrubber, AudioPlayerTime, AudioPlayerSkip } from "@/components/audio-player/audio-player";

Get it

Audio player is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent