Changes

src/contexts/AudioAnalyzerContext.tsx

@@ -16,8 +16,9 @@ export const AudioAnalyzerProvider = ({ children }: { children: ReactNode }) =>
   const analyzerRef = useRef<AnalyserNode | null>(null);
   const sourceMapRef = useRef<Map<HTMLAudioElement, MediaElementAudioSourceNode>>(new Map());
   const [isReady, setIsReady] = useState(false);
+  const [, forceUpdate] = useState(0);
 
-  // Initialize audio context lazily on first user interaction
+  // Initialize audio context - call immediately but handle suspended state
   const initAudioContext = useCallback(() => {
     if (audioContextRef.current) return audioContextRef.current;
 
@@ -33,6 +34,7 @@ export const AudioAnalyzerProvider = ({ children }: { children: ReactNode }) =>
       analyzerRef.current = analyzer;
 
       setIsReady(true);
+      forceUpdate(n => n + 1); // Force re-render to update context value
       return ctx;
     } catch (e) {
       console.error('Failed to create AudioContext:', e);
@@ -40,6 +42,11 @@ export const AudioAnalyzerProvider = ({ children }: { children: ReactNode }) =>
     }
   }, []);
 
+  // Initialize immediately on mount
+  useEffect(() => {
+    initAudioContext();
+  }, [initAudioContext]);
+
   // Connect an audio element to the analyzer
   const connectAudioElement = useCallback((element: HTMLAudioElement) => {
     const ctx = initAudioContext();