music-player-02

1"use client"
2 
3import {
4  AudioPlayerButton,
5  AudioPlayerDuration,
6  AudioPlayerProgress,
7  AudioPlayerProvider,
8  AudioPlayerTime,
9  exampleTracks,
10  useAudioPlayer,
11} from "@/components/ui/audio-player"
12import { Card } from "@/components/ui/card"
13 
14export default function Page() {
15  return (
16    <AudioPlayerProvider>
17      <MusicPlayerDemo />
18    </AudioPlayerProvider>
19  )
20}
21 
22const MusicPlayerDemo = () => {
23  const player = useAudioPlayer<{ name: string }>()
24 
25  const track = exampleTracks[9]
26 
27  return (
28    <Card className="w-full overflow-hidden p-4">
29      <div className="space-y-4">
30        <div>
31          <h3 className="text-base font-semibold">
32            {player.activeItem?.data?.name || track.name}
33          </h3>
34        </div>
35        <div className="flex items-center gap-3">
36          <AudioPlayerButton
37            variant="outline"
38            size="default"
39            className="h-10 w-10 shrink-0"
40            item={{
41              id: track.id,
42              src: track.url,
43              data: track,
44            }}
45          />
46          <div className="flex flex-1 items-center gap-2">
47            <AudioPlayerTime className="text-xs tabular-nums" />
48            <AudioPlayerProgress className="flex-1" />
49            <AudioPlayerDuration className="text-xs tabular-nums" />
50          </div>
51        </div>
52      </div>
53    </Card>
54  )
55}