feat: Add interactive game-specific action sounds via Web Audio API (steam-bell-92#730)

* feat: Add centralized AudioManager utility using Web Audio API

* feat(snake): Add eat and death sound effects using AudioManager

* feat(whack-a-mole): Add hit, miss and game-over sound effects using AudioManager

* feat(coin-flip): Add flip, win and wrong prediction sound effects using AudioManager

* feat(2048): Add tile merge, game-over and 2048 win sound effects using AudioManager

* chore: Load audioManager.js in index.html before projects.js

* chore: Add assets/sounds directory for future audio clip support

* fix(snake): Correct AudioManager hook placement in snake.js

* fix(whack-a-mole): Correct AudioManager hook placement in whack-a-mole.js

* fix(coin-flip): Correct AudioManager hook placement in coin-flip.js

* fix(2048): Correct AudioManager hook placement in 2048-game.js

* fix: Move audioManager.js script tag before project files in index.html

* fix: Correct script load order for audioManager in index.html

Author: HarshitaShakya

web-app/assets/sounds/.gitkeep

@@ -645,6 +645,7 @@ <h3>Legal</h3>
 <!-- ── SCRIPTS ──────────────────────────────────────────────── -->
 <script src="https://unpkg.com/lucide@latest"></script>
 <script src="js/audio.js"></script>
+<script src="js/audioManager.js"></script>
 <script src="js/projects/rock-paper-scissor.js"></script>
 <script src="js/projects/dice-rolling.js"></script>
 <script src="js/projects/coin-flip.js"></script>

web-app/index.html

@@ -0,0 +1,58 @@
+const AudioManager = (() => {
+  let _ctx = null;
+  function ctx() {
+    if (!_ctx) _ctx = new (window.AudioContext || window.webkitAudioContext)();
+    if (_ctx.state === 'suspended') _ctx.resume();
+    return _ctx;
+  }
+  function enabled() {
+    const v = localStorage.getItem('soundEnabled');
+    return v === null ? true : v === 'true';
+  }
+  function beep(freq, dur, type='sine', gain=0.3, t=null) {
+    const c = ctx(); const now = t ?? c.currentTime;
+    const osc = c.createOscillator(), g = c.createGain();
+    osc.connect(g); g.connect(c.destination);
+    osc.type = type; osc.frequency.setValueAtTime(freq, now);
+    g.gain.setValueAtTime(0, now);
+    g.gain.linearRampToValueAtTime(gain, now+0.01);
+    g.gain.exponentialRampToValueAtTime(0.001, now+dur);
+    osc.start(now); osc.stop(now+dur+0.01);
+  }
+  function noise(dur=0.1, gain=0.2) {
+    const c = ctx(), buf = c.createBuffer(1, c.sampleRate*dur, c.sampleRate);
+    const d = buf.getChannelData(0);
+    for (let i=0;i<d.length;i++) d[i]=Math.random()*2-1;
+    const src = c.createBufferSource(); src.buffer = buf;
+    const g = c.createGain(), f = c.createBiquadFilter();
+    f.type='highpass'; f.frequency.value=1000;
+    src.connect(f); f.connect(g); g.connect(c.destination);
+    const t = c.currentTime;
+    g.gain.setValueAtTime(gain, t);
+    g.gain.exponentialRampToValueAtTime(0.001, t+dur);
+    src.start(t); src.stop(t+dur+0.01);
+  }
+  const sounds = {
+    snake_eat()   { const c=ctx(),n=c.currentTime; beep(300,.06,'square',.25,n); beep(600,.08,'square',.20,n+.05); },
+    snake_die()   { const c=ctx(),n=c.currentTime; beep(400,.12,'sawtooth',.3,n); beep(200,.20,'sawtooth',.25,n+.10); beep(100,.30,'sine',.20,n+.25); },
+    mole_hit()    { noise(.08,.35); const c=ctx(); beep(180,.10,'sine',.2,c.currentTime+.02); },
+    card_flip()   { noise(.05,.12); const c=ctx(); beep(800,.04,'sine',.08,c.currentTime+.01); },
+    card_deal()   { noise(.07,.18); const c=ctx(); beep(300,.06,'sine',.12,c.currentTime+.02); },
+    game_win()    { const c=ctx(),n=c.currentTime; [523,659,784,1047].forEach((f,i)=>beep(f,.15,'sine',.25,n+i*.12)); },
+    game_over()   { const c=ctx(),n=c.currentTime; beep(440,.15,'sawtooth',.3,n); beep(349,.20,'sawtooth',.28,n+.18); beep(262,.35,'sine',.25,n+.40); },
+    score_point() { beep(880,.08,'sine',.2); },
+    wrong()       { beep(150,.15,'sawtooth',.2); },
+    click()       { beep(600,.04,'sine',.1); },
+  };
+  return {
+    play(name) {
+      if (!enabled()) return false;
+      if (sounds[name]) { try { sounds[name](); } catch(e){} return true; }
+      return false;
+    },
+    setEnabled(v) { localStorage.setItem('soundEnabled', String(!!v)); },
+    isEnabled()   { return enabled(); },
+    list()        { return Object.keys(sounds); },
+  };
+})();
+window.AudioManager = AudioManager;

web-app/js/audioManager.js

@@ -291,6 +291,7 @@ function init2048Game() {
         for (let i = 0; i < 3; i++) {
             if (row[i] && row[i] === row[i + 1]) {
                 row[i] *= 2;
+                if (window.AudioManager) AudioManager.play("score_point");
                 score += row[i];
                 row[i + 1] = 0;
             }
@@ -380,6 +381,7 @@ function init2048Game() {
 
             if (checkGameOver()) {
                 gameMessage.textContent = "GAME OVER!";
+                if (window.AudioManager) AudioManager.play("game_over");
             }
 
             drawBoard();
@@ -388,6 +390,7 @@ function init2048Game() {
 
             if (checkGameOver()) {
                 gameMessage.textContent = "GAME OVER!";
+                if (window.AudioManager) AudioManager.play("game_over");
             } else {
                 gameMessage.textContent =
                     "No move possible in this direction!";

web-app/js/projects/2048-game.js

@@ -502,6 +502,7 @@ function initCoinFlip() {
         flipBtn.disabled = true;
         predictionWrapper.classList.add('disabled-cards');
         result.textContent = 'Flipping...';
+        if (window.AudioManager) AudioManager.play("card_flip");
         result.className = 'coin-result flipping';
         coinScene.classList.add('rolling');
 
@@ -526,6 +527,7 @@ function initCoinFlip() {
             }
 
             if (isCorrect) {
+                if (window.AudioManager) AudioManager.play("game_win");
                 wins++;
                 streak++;
                 if (streak > bestStreak) {
@@ -536,6 +538,7 @@ function initCoinFlip() {
             } else {
                 losses++;
                 streak = 0;
+                if (window.AudioManager) AudioManager.play("wrong");
                 result.textContent = isHeads ? '👑 Heads! Wrong prediction. 😢' : '🦅 Tails! Wrong prediction. 😢';
                 result.className = 'coin-result lose';
             }

web-app/js/projects/coin-flip.js

@@ -267,7 +267,8 @@ function gameEngine() {
     if (isCollide(snakeArr)) {
         direction = { x: 0, y: 0 };
         document.getElementById('final-score').innerHTML = score;
-        document.getElementById('game-over-overlay').classList.remove('hidden');
+        document.getElementById("game-over-overlay").classList.remove("hidden");
+        if (window.AudioManager) AudioManager.play("snake_die");
 
         // Execute persistent local evaluations
         checkAndSaveHighScore();
@@ -284,6 +285,7 @@ function gameEngine() {
         score += (1 * scoreMultiplier); // Scaled multiplier calculations
         document.getElementById('score').innerHTML = score;
         snakeArr.unshift({ x: snakeArr[0].x + direction.x, y: snakeArr[0].y + direction.y });
+        if (window.AudioManager) AudioManager.play("snake_eat");
         let a = 2, b = 16;
         food = { x: Math.round(a + (b - a) * Math.random()), y: Math.round(a + (b - a) * Math.random()) };
     }

web-app/js/projects/snake.js

@@ -62,6 +62,7 @@ function initWhackaMole() {
             score += 1;
             scoreEl.textContent = String(score);
             messageEl.textContent = 'Hit! 🔨';
+            if (window.AudioManager) AudioManager.play("mole_hit");
             button.textContent = '💥';
             button.classList.remove('active');
 
@@ -117,6 +118,7 @@ function initWhackaMole() {
             hole.classList.remove('active');
             hole.textContent = '🕳️';
         });
+        if (window.AudioManager) AudioManager.play("game_over");
         messageEl.textContent = finalMessage;
         startBtn.disabled = false;
     }