Video Player
Media
Source and install need .
pnpm dlx shadcn@latest add @assembli/podcast-playerPodcast Player
An episode player for podcasts. A scrubber split into chapter segments previews the chapter under the pointer, with skip back 15 and forward 30, a speed menu and a sleep timer that can stop at the end of a chapter. Chapters and a transcript sit in tabs; the transcript follows playback, highlights the sentence being spoken and seeks when clicked. Also comes as a one-row mini player.
Props
Other props pass through to the root element.
src
string
The episode's audio. Without it the player runs on a simulated clock for
durationseconds, which is handy for demos and for designing before the audio exists.duration
number
Length in seconds. Required without
src; withsrcit's read from the file.title*
string
show*
string
episode
string
A short label such as "Episode 48".
date
string
A short date label, e.g. "Oct 28".
cover
string | React.ReactNode
An image URL, or your own artwork node.
chapters
PodcastChapter[]
transcript
PodcastCue[]
Sentences with start times in seconds, in order.
variant
"full" | "mini"
Default
"full""full" (with chapters and transcript) or a one-row "mini" player.
defaultTime
number
Default
0Where playback starts, in seconds.
rates
number[]
Default
[0.8, 1, 1.2, 1.5, 1.75, 2]defaultRate
number
Default
1onTimeChange
(seconds: number) => void
| Description | |||
|---|---|---|---|
| src | string | – | The episode's audio. Without it the player runs on a simulated clock for |
| duration | number | – | Length in seconds. Required without |
| title* | string | – | |
| show* | string | – | |
| episode | string | – | A short label such as "Episode 48". |
| date | string | – | A short date label, e.g. "Oct 28". |
| cover | string | React.ReactNode | – | An image URL, or your own artwork node. |
| chapters | PodcastChapter[] | – | |
| transcript | PodcastCue[] | – | Sentences with start times in seconds, in order. |
| variant | "full" | "mini" | "full" | "full" (with chapters and transcript) or a one-row "mini" player. |
| defaultTime | number | 0 | Where playback starts, in seconds. |
| rates | number[] | [0.8, 1, 1.2, 1.5, 1.75, 2] | |
| defaultRate | number | 1 | |
| onTimeChange | (seconds: number) => void | – |
