Music Player

1"use client";
2 
3import React, { useRef, useState, useEffect } from "react";
4import { cn } from "@/lib/utils";
5import { motion } from "framer-motion";
6 
7export interface MusicPlayerProps extends React.HTMLAttributes<HTMLDivElement> {
8  /** The source URL of the audio file or YouTube video */
9  src: string;
10  /** The URL of the album cover image */
11  coverArt: string;
12  /** Whether to auto-play the audio when loaded */
13  autoPlay?: boolean;
14}
15 
16export function MusicPlayer({
17  className,
18  src,
19  coverArt,
20  autoPlay = false,
21  ...props
22}: MusicPlayerProps) {
23  const [isPlaying, setIsPlaying] = useState(autoPlay);
24  const audioRef = useRef<HTMLAudioElement | null>(null);
25  const iframeRef = useRef<HTMLIFrameElement | null>(null);
26 
27  // Extract YouTube ID if it's a YouTube URL
28  const getYoutubeId = (url: string) => {
29    const match = url.match(
30      /(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))([^&?]+)/
31    );
32    return match ? match[1] : null;
33  };
34  
35  const youtubeId = src ? getYoutubeId(src) : null;
36 
37  useEffect(() => {
38    if (isPlaying) {
39      if (youtubeId && iframeRef.current?.contentWindow) {
40        iframeRef.current.contentWindow.postMessage(
41          JSON.stringify({ event: "command", func: "playVideo", args: [] }),
42          "*"
43        );
44      } else {
45        audioRef.current?.play().catch(() => setIsPlaying(false));
46      }
47    } else {
48      if (youtubeId && iframeRef.current?.contentWindow) {
49        iframeRef.current.contentWindow.postMessage(
50          JSON.stringify({ event: "command", func: "pauseVideo", args: [] }),
51          "*"
52        );
53      } else {
54        audioRef.current?.pause();
55      }
56    }
57  }, [isPlaying, youtubeId]);
58 
59  const togglePlay = () => {
60    setIsPlaying(!isPlaying);
61  };
62 
63  return (
64    <div
65      className={cn("relative inline-flex flex-col items-center", className)}
66      {...props}
67    >
68      {youtubeId ? (
69        <iframe
70          ref={iframeRef}
71          className="hidden"
72          src={`https://www.youtube.com/embed/${youtubeId}?enablejsapi=1&autoplay=${
73            autoPlay ? 1 : 0
74          }&controls=0`}
75          allow="autoplay"
76        />
77      ) : (
78        <audio
79          ref={audioRef}
80          src={src}
81          onEnded={() => setIsPlaying(false)}
82          className="hidden"
83        />
84      )}
85 
86      <div
87        className="relative cursor-pointer select-none h-64 w-64 md:h-80 md:w-80"
88        onClick={togglePlay}
89        title={isPlaying ? "Pause" : "Play"}
90// … truncated