Audio Player

FreeNew

A podcast-style audio player with play and pause, skip back and forward, a scrubber with chapter ticks, the current chapter and a speed control. Works with a real file or as a silent demo.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

title

src

subtitle

duration0

time1

variant

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/audio-player.json

Usage

import { AudioPlayer } from "@/components/ui/audio-player"

<AudioPlayer
  src="/episode-42.mp3"
  title="Episode 42: The Optimised Life"
  subtitle="Slow Burn · 41 min"
  duration={2460}
  chapters={[
    { start: 0, title: "Cold open" },
    { start: 95, title: "Why we stopped measuring" },
  ]}
/>

<AudioPlayer variant="compact" title="Weekly update" duration={312} />

Props

AudioPlayer

Prop	Type	Default	Description
`title`	`string`	-	Episode or track title. Also names the player for screen readers.
`src`	`string`	-	Audio file URL. Leave it out for a silent demo that advances its own clock.
`subtitle`	`string`	-	Show or artist, shown under the title.
`duration`	`number`	`0`	Length in seconds. Used before the file's metadata loads, and as the length of a silent demo.
`chapters`	`{ start: number; title: string }[]`	`[]`	Chapters, drawn as ticks on the scrubber. The current one is named under the title.
`artwork`	`ReactNode`	-	Artwork shown on the left.
`rates`	`number[]`	`[1, 1.25, 1.5, 2, 0.75]`	Playback speeds the speed button cycles through.
`skip`	`{ back: number; forward: number }`	`{ back: 15, forward: 30 }`	Seconds the back and forward buttons skip.
`time`	`number`	-	Controlled position in seconds.
`onTimeChange`	`(seconds: number) => void`	-	Called when the position changes through playback, seeking or skipping.
`onPlayingChange`	`(playing: boolean) => void`	-	Called when play or pause is chosen.
`variant`	`"default" \| "compact"`	`"default"`	`"compact"` is a single row, for a sticky mini player.

Also accepts all <div> props.

Notes

The scrubber is a Radix slider, so it works with arrow keys, Home and End, and announces the position as "1:35 of 41:00".
formatTime(seconds) is exported too and formats as m:ss, or h:mm:ss for long audio.

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/audio-player.json

Usage

import { AudioPlayer } from "@/components/ui/audio-player"

<AudioPlayer
  src="/episode-42.mp3"
  title="Episode 42: The Optimised Life"
  subtitle="Slow Burn · 41 min"
  duration={2460}
  chapters={[
    { start: 0, title: "Cold open" },
    { start: 95, title: "Why we stopped measuring" },
  ]}
/>

<AudioPlayer variant="compact" title="Weekly update" duration={312} />

Props

AudioPlayer

Prop	Type	Default	Description
`title`	`string`	-	Episode or track title. Also names the player for screen readers.
`src`	`string`	-	Audio file URL. Leave it out for a silent demo that advances its own clock.
`subtitle`	`string`	-	Show or artist, shown under the title.
`duration`	`number`	`0`	Length in seconds. Used before the file's metadata loads, and as the length of a silent demo.
`chapters`	`{ start: number; title: string }[]`	`[]`	Chapters, drawn as ticks on the scrubber. The current one is named under the title.
`artwork`	`ReactNode`	-	Artwork shown on the left.
`rates`	`number[]`	`[1, 1.25, 1.5, 2, 0.75]`	Playback speeds the speed button cycles through.
`skip`	`{ back: number; forward: number }`	`{ back: 15, forward: 30 }`	Seconds the back and forward buttons skip.
`time`	`number`	-	Controlled position in seconds.
`onTimeChange`	`(seconds: number) => void`	-	Called when the position changes through playback, seeking or skipping.
`onPlayingChange`	`(playing: boolean) => void`	-	Called when play or pause is chosen.
`variant`	`"default" \| "compact"`	`"default"`	`"compact"` is a single row, for a sticky mini player.

Also accepts all <div> props.

Notes

The scrubber is a Radix slider, so it works with arrow keys, Home and End, and announces the position as "1:35 of 41:00".
formatTime(seconds) is exported too and formats as m:ss, or h:mm:ss for long audio.