fixed audio effects issue

frontend/src/hooks/useAudioEffects.ts

@@ -83,6 +83,10 @@ export function useAudioEffects({
   const wasHoveredRef = useRef(false);
   const wasActiveRef = useRef(false);
 
+  // Track if initial state sync is complete (skip audio on first render)
+  // User can't hover during mount, so any true state is stale
+  const didInitRef = useRef(false);
+
   // Track which URLs we've already fetched to prevent duplicate fetches
   const lastFetchedHoverUrlRef = useRef<string | null>(null);
   const lastFetchedClickUrlRef = useRef<string | null>(null);
@@ -238,6 +242,14 @@ export function useAudioEffects({
 
   // Play hover audio when hover starts (plays to completion, not interrupted)
   useEffect(() => {
+    // Skip audio on initial render - sync state only
+    // User can't hover during mount, so any true state is stale
+    if (!didInitRef.current) {
+      didInitRef.current = true;
+      wasHoveredRef.current = isHovered;
+      return;
+    }
+
     if (
       isHovered &&
       !wasHoveredRef.current &&
@@ -257,6 +269,13 @@ export function useAudioEffects({
 
   // Play click audio when active state begins
   useEffect(() => {
+    // Skip audio on initial render - sync state only
+    // Note: didInitRef is already set by hover effect due to effect ordering
+    if (!didInitRef.current) {
+      wasActiveRef.current = isActive;
+      return;
+    }
+
     if (
       isActive &&
       !wasActiveRef.current &&
@@ -293,11 +312,12 @@ export function useAudioEffects({
     }
   }, []);
 
-  // Reset audio on key change (e.g., page navigation)
+  // Reset audio on key change (e.g., page navigation or element change)
   useEffect(() => {
     stopAll();
     wasHoveredRef.current = false;
     wasActiveRef.current = false;
+    didInitRef.current = false; // Reset for new element
   }, [resetKey, stopAll]);
 
   return { playClickAudio, stopAll };