Media Controls

Pro

Audio player controls with a play button that morphs into pause, skip buttons and toggle chips for modes like shuffle or sleep, plus a line or waveform scrubber that follows your finger.

Preview

Installation

npx @lumioui/cli add pro/media-controls

Usage

import { formatMediaTime, PlayPauseButton, MediaToggle, MediaChip, MediaControls } from "@/components/ui/media-controls/media-controls";
<MediaControls />

Also exported: formatMediaTime, PlayPauseButton, MediaToggle, MediaChip.

Examples

Audiobook

A long-form listening player in teal.

Meditation

A night-time guided session on a pinned dark stage in green.

Music player

A full-screen music player in pink.

Podcast

A talk-show episode in pink.

API reference

PlayPauseButton

Prop Type Default
playing* boolean —
onPress () => void —
size PlayPauseSize

sm 44 · md 64 · lg 76 · xl 112 (single-control players). Default md.

 "md"
appearance "filled" | "bare"

filled — accent disc; bare — large glyph only (full-screen music idiom).

 "filled"
disabled boolean —
className string —

MediaToggle

Prop Type Default
icon* IconName —
label* string

Accessible name ("Shuffle", "Repeat").

 —
active* boolean —
onPress () => void —
badge string

Tiny badge on the glyph — "1" for repeat-one.

 —
className string —

MediaChip

Prop Type Default
label* string —
accessibilityLabel string

Accessible name — "Playback speed 1.5x". Defaults to the label.

 —
icon IconName —
active boolean

Filled while a mode is on (sleep timer set).

 —
onPress () => void —
className string —

MediaControls

Prop Type Default
playing boolean —
defaultPlaying boolean false
onPlayingChange (playing: boolean) => void —
duration number

Track length in seconds. Omit for a transport row with no clock.

 —
defaultPosition number

Start position in seconds.

 0
trackId string | number

Changing it (new track) resets the position to 0.

 —
rate number

Simulated clock rate (1, 1.5, 2…). Default 1.

 1
onSeek (seconds: number) => void

Fires after a scrub or skip with the new position in seconds.

 —
onPositionChange (seconds: number) => void

Fires once per whole second of position (never per frame).

 —
onEnd () => void

Fires when playback reaches the end.

 —
loop boolean

Restart from the top at the end instead of stopping (repeat one).

 false
scrubber "line" | "waveform" | "none"

line — thin bar with a knob; waveform — amplitude bars; none — hide. Default line.

 "line"
markers number[]

Positions (seconds) drawn as notches on the line scrubber — chapters.

 —
showTime boolean

Show elapsed / remaining under the scrubber. Default true.

 true
skip
"track" | "seconds" +2 "track" | "seconds" | "both" | "none"

track — prev/next · seconds — ±N skips · both — prev, −N, play, +N, next · none. Default track.

 "track"
skipBackSeconds number 15
skipForwardSeconds number 15
onPrevious () => void —
onNext () => void —
leading React.ReactNode

Outer-left slot — shuffle toggle, speed chip.

 —
trailing React.ReactNode

Outer-right slot — repeat toggle, sleep chip.

 —
size PlayPauseSize

Play button size. Default lg.

 "lg"
playAppearance "filled" | "bare"

filled disc or bare glyph. Default filled.

 "filled"
className string —