Changes

src/contexts/MusicContext.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useState, useRef, useCallback, useEffect, ReactNode } from 'react';
+import { useAudioAnalyzer } from './AudioAnalyzerContext';
 
 export interface Station {
   stationuuid: string;
@@ -18,7 +19,6 @@ interface MusicContextType {
   currentIndex: number;
   selectedStation: Station | null;
   hasFetched: boolean;
-  audioElement: HTMLAudioElement | null;
   setVolume: (volume: number) => void;
   playStation: (station: Station, index: number) => void;
   togglePlay: () => void;
@@ -40,6 +40,7 @@ export const MusicProvider = ({ children }: { children: ReactNode }) => {
   const [hasFetched, setHasFetched] = useState(false);
   const [failedStations, setFailedStations] = useState<Set<string>>(new Set());
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const { connectAudioElement, disconnectAudioElement } = useAudioAnalyzer();
 
   // Update volume on audio element when volume state changes
   useEffect(() => {
@@ -70,6 +71,7 @@ export const MusicProvider = ({ children }: { children: ReactNode }) => {
 
   const stopCurrentAudio = useCallback(() => {
     if (audioRef.current) {
+      disconnectAudioElement(audioRef.current);
       audioRef.current.pause();
       audioRef.current.src = '';
       audioRef.current.onplay = null;
@@ -80,16 +82,20 @@ export const MusicProvider = ({ children }: { children: ReactNode }) => {
       audioRef.current = null;
     }
     setIsBuffering(false);
-  }, []);
+  }, [disconnectAudioElement]);
 
   const playStation = useCallback((station: Station, index: number) => {
     stopCurrentAudio();
     setIsBuffering(true);
     
     const audio = new Audio(station.url);
+    audio.crossOrigin = 'anonymous';
     audio.volume = volume / 100;
     audioRef.current = audio;
     
+    // Connect to analyzer for visualization
+    connectAudioElement(audio);
+    
     audio.onerror = () => {
       console.error('Failed to play station:', station.name);
       setFailedStations(prev => new Set(prev).add(station.stationuuid));
@@ -128,7 +134,7 @@ export const MusicProvider = ({ children }: { children: ReactNode }) => {
     
     setSelectedStation(station);
     setCurrentIndex(index);
-  }, [volume, stopCurrentAudio]);
+  }, [volume, stopCurrentAudio, connectAudioElement]);
 
   const togglePlay = useCallback(() => {
     if (!audioRef.current || !selectedStation) {
@@ -189,7 +195,6 @@ export const MusicProvider = ({ children }: { children: ReactNode }) => {
         currentIndex,
         selectedStation,
         hasFetched,
-        audioElement: audioRef.current,
         setVolume,
         playStation,
         togglePlay,