# Media players

> Music, podcast and video player chrome with simulated playback — drawn cover art, chaptered progress, speed control and a scene that pans as the video plays.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/media-players
- Install: `npx shadcn@latest add @geturui-pro/media-players`
- Dependencies: motion, lucide-react

## Variants

### Music player

Drawn cover art that crossfades per track, a draggable keyboard scrubber, equaliser bars and a queue with shuffle and repeat.

Install: `npx shadcn@latest add @geturui-pro/media-players-music`

```tsx
import { MusicPlayer } from "@/components/examples/media-players/music";

export function NowPlaying() {
  return (
    <MusicPlayer
      tracks={[{ title: "Salt and slow light", artist: "Harbor Lights", duration: 221 }]}
      defaultPlaying
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| tracks | `{ title; artist; duration; palette? }[]` | — | Queue; palette colours the drawn cover. |
| defaultTrack / defaultPosition | `number` | 0 / 72 | Starting track and second. |
| defaultPlaying | `boolean` | false | Start playing on mount. |
| onLikeChange | `(track, liked) => void` | — | Like toggle handler. |

### Podcast episode

Episode card with a progress track split into chapters, 15/30 second skips, a rolling speed button and a chapter list that follows playback.

Install: `npx shadcn@latest add @geturui-pro/media-players-podcast`

```tsx
import { PodcastEpisodeCard } from "@/components/examples/media-players/podcast";

export function Episode() {
  return <PodcastEpisodeCard title="Shipping design tokens without a rewrite" duration={2834} chapters={chapters} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| show / episode / title / published | `string` | — | Episode details. |
| duration | `number` | 2834 | Length in seconds. |
| chapters | `{ title; start }[]` | — | Chapter starts in seconds. |
| defaultPosition | `number` | 498 | Start position in seconds. |
| speeds | `number[]` | [1, 1.25, 1.5, 2] | Speeds the speed button cycles through. |
| onPlayChange | `(playing: boolean) => void` | — | Play state handler. |

### Video player

Player chrome over a drawn scene that pans with playback: buffered progress, volume slider, timed captions and controls that hide while you watch.

Install: `npx shadcn@latest add @geturui-pro/media-players-video`

```tsx
import { VideoPlayer } from "@/components/examples/media-players/video";

export function ProductTour() {
  return <VideoPlayer title="Product tour" duration={96} cues={captions} />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | — | Overlay title. |
| duration / defaultPosition / bufferAhead | `number` | 96 / 14 / 22 | Timing in seconds. |
| cues | `{ start; end; text }[]` | — | Captions shown while the CC toggle is on. |
| defaultVolume | `number` | 70 | 0–100. |
| defaultCaptions | `boolean` | true | Captions on at start. |

## Accessibility

- Every scrubber and volume control is a role=slider with arrow, Page and Home/End keys and an aria-valuetext like “1:12 of 3:41”.
- Play, like, shuffle, mute and captions are real buttons with labels and aria-pressed where they toggle.
- Reduced motion stops equaliser bars and cover scaling; playback itself still advances.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.