# Music player 02

> Simple music player

A shadcn/ui block from the [@elevenlabs-ui](https://ui.elevenlabs.io/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/elevenlabs-ui/music-player-02).

- Page, with a live preview: https://shadcn.exchange/r/elevenlabs-ui/music-player-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/elevenlabs-ui/music-player-02-light-409f982123e01c35.png
- Registry item: https://ui.elevenlabs.io/r/music-player-02.json
- Categories: audio
- Listed: 2026-10-17, source last changed 2026-10-17

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/elevenlabs-ui/music-player-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://ui.elevenlabs.io/r/audio-player.json`, `card`

## Files

### `blocks/music-player-02/page.tsx`

```tsx
"use client"

import {
  AudioPlayerButton,
  AudioPlayerDuration,
  AudioPlayerProgress,
  AudioPlayerProvider,
  AudioPlayerTime,
  exampleTracks,
  useAudioPlayer,
} from "@/components/ui/audio-player"
import { Card } from "@/components/ui/card"

export default function Page() {
  return (
    <AudioPlayerProvider>
      <MusicPlayerDemo />
    </AudioPlayerProvider>
  )
}

const MusicPlayerDemo = () => {
  const player = useAudioPlayer<{ name: string }>()

  const track = exampleTracks[9]

  return (
    <Card className="w-full overflow-hidden p-4">
      <div className="space-y-4">
        <div>
          <h3 className="text-base font-semibold">
            {player.activeItem?.data?.name || track.name}
          </h3>
        </div>
        <div className="flex items-center gap-3">
          <AudioPlayerButton
            variant="outline"
            size="default"
            className="h-10 w-10 shrink-0"
            item={{
              id: track.id,
              src: track.url,
              data: track,
            }}
          />
          <div className="flex flex-1 items-center gap-2">
            <AudioPlayerTime className="text-xs tabular-nums" />
            <AudioPlayerProgress className="flex-1" />
            <AudioPlayerDuration className="text-xs tabular-nums" />
          </div>
        </div>
      </div>
    </Card>
  )
}
```