Fixed audio disabling so it remains quiet

client/src/RoomView.tsx

@@ -225,6 +225,7 @@ const RoomView = (props: RoomProps) => {
 
   useEffect(() => {
     if (state === "volcano") {
+      if (audio) {
         if (!audioEffects.volcano) {
           audioEffects.volcano = loadAudio("volcano-eruption.mp3");
           audioEffects.volcano.volume = volume * volume;
@@ -234,6 +235,18 @@ const RoomView = (props: RoomProps) => {
             audioEffects.volcano.play().catch((e) => console.error("Audio play failed:", e));
           }
         }
+      } else {
+        // Audio disabled -> stop any currently playing volcano effect
+        if (audioEffects.volcano) {
+          try {
+            audioEffects.volcano.pause();
+            audioEffects.volcano.currentTime = 0;
+          } catch (e) {
+            /* ignore */
+          }
+          audioEffects.volcano.hasPlayed = false;
+        }
+      }
     } else {
       if (audioEffects.volcano) {
         audioEffects.volcano.hasPlayed = false;
@@ -242,6 +255,9 @@ const RoomView = (props: RoomProps) => {
   }, [state, volume]);
 
   useEffect(() => {
+    // When audio is enabled we may create/play effects; when disabled ensure
+    // any existing effects are stopped and reset.
+    if (audio) {
       if (turn && turn.color === color && state !== "room") {
         if (!audioEffects.yourTurn) {
           audioEffects.yourTurn = loadAudio("its-your-turn.mp3");
@@ -289,11 +305,33 @@ const RoomView = (props: RoomProps) => {
           audioEffects.knights.hasPlayed = false;
         }
       }
+    } else {
+      // audio disabled: stop any currently playing effects and reset their state
+      const stopIfPlaying = (ae?: AudioEffect) => {
+        if (!ae) return;
+        try {
+          ae.pause();
+          ae.currentTime = 0;
+        } catch (e) {
+          /* ignore */
+        }
+        ae.hasPlayed = false;
+      };
+      stopIfPlaying(audioEffects.yourTurn);
+      stopIfPlaying(audioEffects.robber);
+      stopIfPlaying(audioEffects.knights);
+    }
   }, [state, turn, color, volume]);
 
   useEffect(() => {
     for (const key in audioEffects) {
-      audioEffects[key].volume = volume * volume;
+      if (audioEffects[key]) {
+        try {
+          audioEffects[key]!.volume = volume * volume;
+        } catch (e) {
+          /* ignore */
+        }
+      }
     }
   }, [volume]);