reverted audio effects changes - can not bypass browser restrictions

frontend/src/hooks/useAudioEffects.ts

@@ -83,10 +83,6 @@ export function useAudioEffects({
   const wasHoveredRef = useRef(false);
   const wasActiveRef = useRef(false);
 
-  // Delay audio playback after mount/reset to avoid browser autoplay policy
-  // User can't hover during mount, so any true state within 100ms is stale
-  const [canPlay, setCanPlay] = useState(false);
-
   // Track which URLs we've already fetched to prevent duplicate fetches
   const lastFetchedHoverUrlRef = useRef<string | null>(null);
   const lastFetchedClickUrlRef = useRef<string | null>(null);
@@ -99,18 +95,6 @@ export function useAudioEffects({
   const [hoverAudioReady, setHoverAudioReady] = useState(false);
   const [clickAudioReady, setClickAudioReady] = useState(false);
 
-  // Enable audio playback after short delay to skip stale state at mount
-  // Any hover/active state within 100ms of mount is not from real user interaction
-  useEffect(() => {
-    setCanPlay(false);
-    wasHoveredRef.current = isHovered;
-    wasActiveRef.current = isActive;
-    const timer = setTimeout(() => setCanPlay(true), 100);
-    return () => clearTimeout(timer);
-    // Only reset on resetKey change, not on isHovered/isActive changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resetKey]);
-
   // Initialize hover audio element - fetch with credentials for auth
   useEffect(() => {
     if (!hoverAudioUrl) {
@@ -254,9 +238,7 @@ export function useAudioEffects({
 
   // Play hover audio when hover starts (plays to completion, not interrupted)
   useEffect(() => {
-    // Only play if: canPlay is true, hover changed from false→true, audio is ready
     if (
-      canPlay &&
       isHovered &&
       !wasHoveredRef.current &&
       hoverAudioRef.current &&
@@ -271,13 +253,11 @@ export function useAudioEffects({
       });
     }
     wasHoveredRef.current = isHovered;
-  }, [canPlay, isHovered, hoverAudioReady]);
+  }, [isHovered, hoverAudioReady]);
 
   // Play click audio when active state begins
   useEffect(() => {
-    // Only play if: canPlay is true, active changed from false→true, audio is ready
     if (
-      canPlay &&
       isActive &&
       !wasActiveRef.current &&
       clickAudioRef.current &&
@@ -290,7 +270,7 @@ export function useAudioEffects({
       });
     }
     wasActiveRef.current = isActive;
-  }, [canPlay, isActive, clickAudioReady]);
+  }, [isActive, clickAudioReady]);
 
   // Manual click audio trigger
   const playClickAudio = useCallback(() => {
@@ -313,10 +293,11 @@ export function useAudioEffects({
     }
   }, []);
 
-  // Stop audio on key change (e.g., page navigation or element change)
-  // Note: canPlay and refs are reset in the canPlay effect above
+  // Reset audio on key change (e.g., page navigation)
   useEffect(() => {
     stopAll();
+    wasHoveredRef.current = false;
+    wasActiveRef.current = false;
   }, [resetKey, stopAll]);
 
   return { playClickAudio, stopAll };