Fix CORS

frontend/app/page.tsx

@@ -52,6 +52,7 @@ export default function Home() {
   const [filters, setFilters] = useState<FilterParams>({})
   const [page, setPage] = useState(0)
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
   const [searchQuery, setSearchQuery] = useState("")
   const [isScanning, setIsScanning] = useState(false)
   const [scanStatus, setScanStatus] = useState<string>("")
@@ -233,10 +234,19 @@ export default function Home() {
                       <div className="flex items-center gap-4">
                         {/* Play button */}
                         <button
-                          onClick={() => setCurrentTrack(track)}
+                          onClick={() => {
+                            if (currentTrack?.id === track.id) {
+                              // Toggle play/pause for current track
+                              setIsPlaying(!isPlaying)
+                            } else {
+                              // Switch to new track and start playing
+                              setCurrentTrack(track)
+                              setIsPlaying(true)
+                            }
+                          }}
                           className="flex-shrink-0 w-12 h-12 flex items-center justify-center bg-orange-500 hover:bg-orange-600 rounded-full transition-colors shadow-sm"
                         >
-                          {currentTrack?.id === track.id ? (
+                          {currentTrack?.id === track.id && isPlaying ? (
                             <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                               <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                             </svg>
@@ -347,7 +357,11 @@ export default function Home() {
 
       {/* Fixed Audio Player at bottom */}
       <div className="fixed bottom-0 left-0 right-0 z-50">
-        <AudioPlayer track={currentTrack} />
+        <AudioPlayer
+          track={currentTrack}
+          isPlaying={isPlaying}
+          onPlayingChange={setIsPlaying}
+        />
       </div>
     </div>
   )

frontend/components/AudioPlayer.tsx

@@ -5,10 +5,11 @@ import type { Track } from "@/lib/types"
 
 interface AudioPlayerProps {
   track: Track | null
+  isPlaying: boolean
+  onPlayingChange: (playing: boolean) => void
 }
 
-export default function AudioPlayer({ track }: AudioPlayerProps) {
-  const [isPlaying, setIsPlaying] = useState(false)
+export default function AudioPlayer({ track, isPlaying, onPlayingChange }: AudioPlayerProps) {
   const [currentTime, setCurrentTime] = useState(0)
   const [duration, setDuration] = useState(0)
   const [volume, setVolume] = useState(1)
@@ -22,7 +23,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
   // Load audio and waveform when track changes
   useEffect(() => {
     if (!track) {
-      setIsPlaying(false)
+      onPlayingChange(false)
       setCurrentTime(0)
       setWaveformPeaks([])
       return
@@ -33,13 +34,13 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
 
     if (audioRef.current) {
       audioRef.current.load()
-      // Autoplay when track loads
-      audioRef.current.play().then(() => {
-        setIsPlaying(true)
-      }).catch((error: unknown) => {
-        console.error("Autoplay failed:", error)
-        setIsPlaying(false)
-      })
+      // Autoplay when track loads if isPlaying is true
+      if (isPlaying) {
+        audioRef.current.play().catch((error: unknown) => {
+          console.error("Autoplay failed:", error)
+          onPlayingChange(false)
+        })
+      }
     }
   }, [track?.id])
 
@@ -54,7 +55,7 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
         setDuration(audio.duration)
       }
     }
-    const handleEnded = () => setIsPlaying(false)
+    const handleEnded = () => onPlayingChange(false)
 
     audio.addEventListener("timeupdate", updateTime)
     audio.addEventListener("loadedmetadata", updateDuration)
@@ -91,15 +92,24 @@ export default function AudioPlayer({ track }: AudioPlayerProps) {
     }
   }
 
-  const togglePlay = () => {
-    if (!audioRef.current || !track) return
+  // Sync playing state with audio element
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) return
 
     if (isPlaying) {
-      audioRef.current.pause()
+      audio.play().catch((error: unknown) => {
+        console.error("Play failed:", error)
+        onPlayingChange(false)
+      })
     } else {
-      audioRef.current.play()
+      audio.pause()
     }
-    setIsPlaying(!isPlaying)
+  }, [isPlaying, onPlayingChange])
+
+  const togglePlay = () => {
+    if (!audioRef.current || !track) return
+    onPlayingChange(!isPlaying)
   }
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {