From 7820f0096774f64a782c3a18fbf0be798b8b05bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20S=C3=A1nchez?= <drumstock@protonmail.com>
Date: Tue, 28 Apr 2026 22:32:02 +0200
Subject: [PATCH] feat: add Web Audio API sound system with global click and
 notification sounds

- Implement centralized audio manager using Web Audio API
  - Zero-latency playback via pre-decoded AudioBuffers
  - Hardware-accelerated, mobile-friendly architecture
  - Real-time master volume control via GainNode
- Add global click sound on all interactive buttons
- Add notification sound for new inbox messages
- Add audio settings: master volume, SFX toggle, music toggle
- Include Kenney interface sounds (CC0) for click and notification
- Add contributor guide at docs/ADDING_AUDIO.md
---
 docs/ADDING_AUDIO.md                       | 196 +++++++++++++++++++
 public/sounds/click.ogg                    | Bin 0 -> 7814 bytes
 public/sounds/notification.ogg             | Bin 0 -> 8233 bytes
 src/App.tsx                                |  11 ++
 src/components/GlobalClickSound.tsx        |  56 ++++++
 src/components/GlobalNotificationSound.tsx |  37 ++++
 src/lib/audioManager.ts                    | 214 +++++++++++++++++++++
 src/pages/Settings.tsx                     |  73 +++++++
 src/store/settingsStore.test.ts            |   3 +
 src/store/settingsStore.ts                 |   6 +
 10 files changed, 596 insertions(+)
 create mode 100644 docs/ADDING_AUDIO.md
 create mode 100644 public/sounds/click.ogg
 create mode 100644 public/sounds/notification.ogg
 create mode 100644 src/components/GlobalClickSound.tsx
 create mode 100644 src/components/GlobalNotificationSound.tsx
 create mode 100644 src/lib/audioManager.ts

diff --git a/docs/ADDING_AUDIO.md b/docs/ADDING_AUDIO.md
new file mode 100644
index 000000000..5e467ecb8
--- /dev/null
+++ b/docs/ADDING_AUDIO.md
@@ -0,0 +1,196 @@
+# Adding Audio to OLManager
+
+This guide explains how to add new sound effects or music to Open League Manager.
+
+## Audio System Architecture
+
+OLManager uses the **Web Audio API** (not HTMLAudioElement) for all audio playback. This provides:
+
+- **Zero-latency playback** — audio buffers are decoded once and reused
+- **Hardware acceleration** — especially important on Android/mobile
+- **Real-time volume control** — master volume applied via a single `GainNode`
+- **No memory leaks** — each sound spawns a lightweight `AudioBufferSourceNode`, not a full DOM element
+
+## File Locations
+
+| Location | Purpose |
+|----------|---------|
+| `public/sounds/` | Raw audio files (OGG, WAV, MP3) served as static assets |
+| `src/lib/audioManager.ts` | Core audio engine — decoding, playback, volume |
+| `src/components/GlobalClickSound.tsx` | Global click sound on all buttons |
+| `src/components/GlobalNotificationSound.tsx` | Notification sound for new inbox messages |
+| `src/App.tsx` | Pre-loads critical sounds on app startup |
+
+## Supported Formats
+
+| Format | Recommended | Notes |
+|--------|-------------|-------|
+| **OGG** | ✅ Yes | Best compression, fully open, patent-free |
+| **WAV** | ✅ Yes | Uncompressed, instant decode, larger files |
+| **MP3** | ⚠️ Okay | Patent-encumbered, slightly slower decode |
+
+> **License requirement**: All audio assets must be compatible with GPL-3.0. Preferred sources: CC0, CC-BY, CC-BY-SA, or public domain. See [Audio Licensing](#audio-licensing) below.
+
+## How to Add a New Sound Effect
+
+### 1. Add the audio file
+
+Copy your audio file into `public/sounds/`:
+
+```bash
+cp my-sound.ogg public/sounds/my-sound.ogg
+```
+
+### 2. Pre-load it
+
+In `src/App.tsx`, add a `preloadAudio()` call so the sound is decoded before it's needed:
+
+```tsx
+import { preloadAudio } from "./lib/audioManager";
+
+useEffect(() => {
+  preloadAudio("/sounds/click.ogg");
+  preloadAudio("/sounds/notification.ogg");
+  preloadAudio("/sounds/my-sound.ogg");  // ← add this
+}, []);
+```
+
+> Pre-loading is **optional but strongly recommended**. Without it, the first playback may be silent while the browser decodes the file.
+
+### 3. Play the sound from your component
+
+```tsx
+import { playAudio } from "../lib/audioManager";
+
+function MyComponent() {
+  const handleAction = () => {
+    playAudio("/sounds/my-sound.ogg", { volume: 0.5 });
+    // ... rest of your logic
+  };
+
+  return <button onClick={handleAction}>Do Thing</button>;
+}
+```
+
+### PlayOptions
+
+```ts
+playAudio("/sounds/file.ogg", {
+  volume: 0.5,   // 0–1, multiplied by the user's master volume
+  loop: false,   // set true for background music
+  isMusic: false // set true to respect the "Music" toggle in settings
+});
+```
+
+### Return value
+
+`playAudio()` returns a `ManagedAudioNode | null`:
+
+```ts
+const handle = playAudio("/sounds/loop.ogg", { loop: true });
+
+// Later, stop it:
+handle?.stop();
+```
+
+## How to Add Background Music
+
+Music uses the same API but with `loop: true` and `isMusic: true`:
+
+```tsx
+import { playAudio, stopAudio } from "../lib/audioManager";
+
+const musicRef = useRef<ManagedAudioNode | null>(null);
+
+useEffect(() => {
+  musicRef.current = playAudio("/sounds/menu-music.ogg", {
+    loop: true,
+    isMusic: true,
+    volume: 0.3,
+  });
+
+  return () => {
+    stopAudio(musicRef.current);
+  };
+}, []);
+```
+
+Music with `isMusic: true` automatically respects the user's **Music** toggle in Settings.
+
+## Global Sound Effects (Built-in)
+
+Two global sound components are already wired into `App.tsx`:
+
+| Component | Trigger | Sound file |
+|-----------|---------|------------|
+| `GlobalClickSound` | Any `<button>` click | `public/sounds/click.ogg` |
+| `GlobalNotificationSound` | New inbox message | `public/sounds/notification.ogg` |
+
+To disable sound on a specific button, add `data-no-sound`:
+
+```tsx
+<button data-no-sound>This button is silent</button>
+```
+
+## Audio Settings
+
+The following settings are persisted in `AppSettings` (`src/store/settingsStore.ts`):
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `master_volume` | `number` (0–1) | `0.5` | Global volume multiplier |
+| `sound_effects_enabled` | `boolean` | `true` | Master switch for SFX |
+| `music_enabled` | `boolean` | `true` | Master switch for music |
+
+When `master_volume` changes, `updateMasterVolume()` in `audioManager.ts` updates the Web Audio `GainNode` in real time.
+
+## Audio Licensing
+
+**All audio assets must be GPL-3.0 compatible.**
+
+### Recommended licenses
+
+| License | Compatible? | Attribution required? |
+|---------|-------------|----------------------|
+| **CC0** | ✅ Yes | No |
+| **CC-BY 4.0** | ✅ Yes | Yes (in `AUDIO_PROVENANCE.md` or similar) |
+| **CC-BY-SA 4.0** | ✅ Yes | Yes + ShareAlike |
+| **Public Domain** | ✅ Yes | No |
+| **CC-BY-NC** | ❌ No | — |
+| **Proprietary / All Rights Reserved** | ❌ No | — |
+
+### Recommended sources
+
+- **Kenney.nl** — `public/sounds/click.ogg` and `notification.ogg` come from here (CC0)
+- **OpenGameArt.org** — Filter by CC0 / CC-BY / CC-BY-SA / OGA-BY
+- **Freesound.org** — Filter by CC0 or CC-BY
+- **Incompetech** (Kevin MacLeod) — CC-BY music
+
+### Attribution
+
+If you add audio that requires attribution, add an entry to `docs/AUDIO_PROVENANCE.md` (create the file if it doesn't exist):
+
+```markdown
+## CC-BY 3.0
+
+- `"Battle Theme"` by Kevin MacLeod (incompetech.com)
+  - Licensed under CC BY 3.0
+  - File: `public/sounds/battle-theme.ogg`
+```
+
+## Performance Tips
+
+1. **Keep files small** — OGG at 44.1kHz mono is usually < 10KB for a 0.2s click sound
+2. **Always pre-load** — Call `preloadAudio()` in `App.tsx` for any sound used in the first 5 seconds
+3. **Don't over-use `new Audio()`** — The Web Audio API already handles this via `AudioBufferSourceNode`; you never need to create `new Audio()` manually
+4. **Test on Android** — Web Audio API behaves slightly differently on mobile WebViews; verify with `npm run tauri android dev` if possible
+
+## Troubleshooting
+
+| Symptom | Likely cause | Fix |
+|---------|-------------|-----|
+| Sound doesn't play at all | Buffer not pre-loaded | Add `preloadAudio()` in `App.tsx` |
+| Sound plays once then never again | Using a single `HTMLAudioElement` | Use `playAudio()` which creates fresh `AudioBufferSourceNode`s |
+| Volume slider has no effect | Not calling `updateMasterVolume()` | Call it when `master_volume` changes |
+| Sound only plays after first click | AudioContext suspended | `resumeContextIfNeeded()` is called automatically inside `playAudio()` |
+| No sound on Android | Autoplay policy | First user interaction (click/tap) will unlock the context automatically |
diff --git a/public/sounds/click.ogg b/public/sounds/click.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..799e3277c0c8826589216ec5518801293e13d5d7
GIT binary patch
literal 7814
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

literal 0
HcmV?d00001

diff --git a/public/sounds/notification.ogg b/public/sounds/notification.ogg
new file mode 100644
index 0000000000000000000000000000000000000000..bbb8b2edc2ce3858cad6daf4d484619fbb900abc
GIT binary patch
literal 8233
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
T34g^Ubag)Tff%TrwPpG*D^4u#

literal 0
HcmV?d00001

diff --git a/src/App.tsx b/src/App.tsx
index 9f45fd8f2..247162710 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,8 +1,11 @@
 import { useEffect, lazy, Suspense } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { useSettingsStore } from "./store/settingsStore";
+import { preloadAudio } from "./lib/audioManager";
 import i18n from "./i18n";
 import "./App.css";
+import GlobalNotificationSound from "./components/GlobalNotificationSound";
+import GlobalClickSound from "./components/GlobalClickSound";
 
 const MainMenu = lazy(() => import("./pages/MainMenu"));
 const TeamSelection = lazy(() => import("./pages/TeamSelection"));
@@ -33,6 +36,12 @@ function App() {
     if (!loaded) loadSettings();
   }, [loaded, loadSettings]);
 
+  // Pre-load critical UI sounds so playback is instant (no load latency)
+  useEffect(() => {
+    preloadAudio("/sounds/click.ogg");
+    preloadAudio("/sounds/notification.ogg");
+  }, []);
+
   useEffect(() => {
     const size = SCALE_MAP[settings.ui_scale] || "16px";
     document.documentElement.style.fontSize = size;
@@ -107,6 +116,8 @@ function App() {
 
   return (
     <BrowserRouter>
+      <GlobalNotificationSound />
+      <GlobalClickSound />
       <Suspense fallback={<LazyFallback />}>
         <Routes>
           <Route path="/" element={<MainMenu />} />
diff --git a/src/components/GlobalClickSound.tsx b/src/components/GlobalClickSound.tsx
new file mode 100644
index 000000000..a821df33e
--- /dev/null
+++ b/src/components/GlobalClickSound.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useRef } from "react";
+import { playAudio, preloadAudio } from "../lib/audioManager";
+
+const CLICK_SOUND_PATH = "/sounds/click.ogg";
+
+/**
+ * Global click sound effect for all interactive buttons.
+ *
+ * Attaches a document-level click listener in capture phase and plays a
+ * subtle sound whenever a `<button>` or `[role="button"]` element is
+ * clicked.
+ */
+export default function GlobalClickSound(): null {
+  const lastPlayRef = useRef<number>(0);
+
+  useEffect(() => {
+    preloadAudio(CLICK_SOUND_PATH);
+  }, []);
+
+  useEffect(() => {
+    function isInteractiveButton(target: EventTarget | null): boolean {
+      if (!(target instanceof Element)) return false;
+
+      if (target.closest("[data-no-sound]")) return false;
+
+      if (target instanceof HTMLInputElement && target.type === "range") {
+        return false;
+      }
+      if (target.closest('input[type="range"]')) return false;
+
+      const button = target.closest("button, [role='button']");
+      if (!button) return false;
+
+      if (button instanceof HTMLButtonElement && button.disabled) {
+        return false;
+      }
+
+      return true;
+    }
+
+    const handleClick = (event: MouseEvent) => {
+      if (!isInteractiveButton(event.target)) return;
+
+      const now = Date.now();
+      if (now - lastPlayRef.current < 30) return;
+      lastPlayRef.current = now;
+
+      playAudio(CLICK_SOUND_PATH, { volume: 0.25 });
+    };
+
+    document.addEventListener("click", handleClick, true);
+    return () => document.removeEventListener("click", handleClick, true);
+  }, []);
+
+  return null;
+}
diff --git a/src/components/GlobalNotificationSound.tsx b/src/components/GlobalNotificationSound.tsx
new file mode 100644
index 000000000..f20b822ab
--- /dev/null
+++ b/src/components/GlobalNotificationSound.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import { useGameStore } from "../store/gameStore";
+import { playAudio, preloadAudio } from "../lib/audioManager";
+
+const NOTIFICATION_SOUND_PATH = "/sounds/notification.ogg";
+
+/**
+ * Global sound manager for inbox notifications.
+ * Plays a sound whenever a new message arrives, regardless of which page
+ * the user is currently viewing (Dashboard, Match, Settings, etc.).
+ */
+export default function GlobalNotificationSound(): null {
+  const gameState = useGameStore((s) => s.gameState);
+  const previousMessageCountRef = useRef<number>(0);
+
+  useEffect(() => {
+    preloadAudio(NOTIFICATION_SOUND_PATH);
+  }, []);
+
+  useEffect(() => {
+    if (!gameState) {
+      previousMessageCountRef.current = 0;
+      return;
+    }
+
+    const currentCount = gameState.messages.length;
+    const previousCount = previousMessageCountRef.current;
+
+    if (previousCount > 0 && currentCount > previousCount) {
+      playAudio(NOTIFICATION_SOUND_PATH, { volume: 0.5 });
+    }
+
+    previousMessageCountRef.current = currentCount;
+  }, [gameState?.messages.length]);
+
+  return null;
+}
diff --git a/src/lib/audioManager.ts b/src/lib/audioManager.ts
new file mode 100644
index 000000000..04f909bba
--- /dev/null
+++ b/src/lib/audioManager.ts
@@ -0,0 +1,214 @@
+/**
+ * Centralized audio manager for OLManager using the Web Audio API.
+ *
+ * This provides zero-latency, hardware-accelerated audio playback that
+ * is far more reliable on mobile / Android than HTMLAudioElement.
+ *
+ * Architecture:
+ * - One shared AudioContext (lazy-created on first user interaction).
+ * - One master GainNode for global volume.
+ * - AudioBuffers are decoded once and reused forever.
+ * - Each play() spawns a fresh AudioBufferSourceNode (required by the spec).
+ */
+import { useSettingsStore } from "../store/settingsStore";
+
+/** Decoded audio data, keyed by file path. */
+const AUDIO_BUFFERS = new Map<string, AudioBuffer>();
+
+/** In-flight fetch promises so we don't double-request the same file. */
+const FETCH_PROMISES = new Map<string, Promise<void>>();
+
+/** Master gain that every sound routes through. */
+let masterGain: GainNode | null = null;
+
+/** Shared AudioContext. Lazy-created because browsers require a user
+ *  gesture before the context can leave the "suspended" state. */
+let audioCtx: AudioContext | null = null;
+
+function getAudioContext(): AudioContext {
+  if (audioCtx) return audioCtx;
+
+  const AC = (window as any).AudioContext || (window as any).webkitAudioContext;
+  const ctx = new AC();
+  audioCtx = ctx;
+
+  const gain = ctx.createGain();
+  gain.connect(ctx.destination);
+
+  // Start with the saved master volume
+  const settings = useSettingsStore.getState().settings;
+  gain.gain.value = settings.master_volume;
+
+  masterGain = gain;
+  return ctx;
+}
+
+function getMasterGain(): GainNode {
+  getAudioContext();
+  return masterGain!;
+}
+
+function getPrefersReducedMotion(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+/**
+ * Ensure the AudioContext is running. Browsers suspend it until the
+ * first user interaction, so we call this before every play().
+ */
+async function resumeContextIfNeeded(): Promise<void> {
+  const ctx = getAudioContext();
+  if (ctx.state === "suspended") {
+    try {
+      await ctx.resume();
+    } catch {
+      // Ignore – playback will simply be silent until the user interacts.
+    }
+  }
+}
+
+export interface PlayOptions {
+  /** Volume of this specific sound, 0–1. Final volume = master * local. */
+  volume?: number;
+  /** Force loop (useful for music). Default false. */
+  loop?: boolean;
+  /** If true, the sound is treated as music and obeys `music_enabled`. */
+  isMusic?: boolean;
+}
+
+export interface ManagedAudioNode {
+  /** Stop the sound immediately. */
+  stop(): void;
+  /** Underlying Web Audio source node (advanced use). */
+  source: AudioBufferSourceNode;
+}
+
+/**
+ * Pre-load an audio file via fetch + decode so it's ready for instant
+ * playback. Safe to call multiple times for the same src.
+ */
+export function preloadAudio(src: string): Promise<void> {
+  // Already decoded?
+  if (AUDIO_BUFFERS.has(src)) return Promise.resolve();
+
+  // Already fetching?
+  const existing = FETCH_PROMISES.get(src);
+  if (existing) return existing;
+
+  const promise = (async () => {
+    try {
+      const response = await fetch(src);
+      if (!response.ok) {
+        console.warn("[AudioManager] Failed to fetch:", src, response.status);
+        return;
+      }
+      const arrayBuffer = await response.arrayBuffer();
+      const ctx = getAudioContext();
+      const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
+      AUDIO_BUFFERS.set(src, audioBuffer);
+    } catch (err) {
+      console.warn("[AudioManager] Preload failed:", src, err);
+    } finally {
+      FETCH_PROMISES.delete(src);
+    }
+  })();
+
+  FETCH_PROMISES.set(src, promise);
+  return promise;
+}
+
+/**
+ * Play a one-shot sound effect or start music.
+ *
+ * @returns A lightweight handle with a `stop()` method, or `null` if
+ *          playback was blocked by settings / accessibility.
+ */
+export function playAudio(
+  src: string,
+  options: PlayOptions = {},
+): ManagedAudioNode | null {
+  const { volume = 1, loop = false, isMusic = false } = options;
+
+  const settings = useSettingsStore.getState().settings;
+
+  // Respect user toggles
+  if (isMusic && !settings.music_enabled) return null;
+  if (!isMusic && !settings.sound_effects_enabled) return null;
+
+  // Respect accessibility
+  if (getPrefersReducedMotion()) return null;
+
+  const buffer = AUDIO_BUFFERS.get(src);
+  if (!buffer) {
+    // Buffer not ready yet – silently skip. The caller should have
+    // pre-loaded it; we don't block here.
+    console.warn("[AudioManager] Buffer not ready, skipping:", src);
+    return null;
+  }
+
+  resumeContextIfNeeded();
+
+  const ctx = getAudioContext();
+  const master = getMasterGain();
+
+  // Per-sound gain so we can control individual volume
+  const soundGain = ctx.createGain();
+  soundGain.gain.value = Math.max(0, Math.min(1, volume));
+
+  const source = ctx.createBufferSource();
+  source.buffer = buffer;
+  source.loop = loop;
+
+  // Chain: source → soundGain → masterGain → destination
+  source.connect(soundGain);
+  soundGain.connect(master);
+
+  source.start(0);
+
+  const handle: ManagedAudioNode = {
+    stop() {
+      try {
+        source.stop();
+      } catch {
+        // Already stopped – ignore.
+      }
+      try {
+        source.disconnect();
+        soundGain.disconnect();
+      } catch {
+        // Ignore double-disconnect.
+      }
+    },
+    source,
+  };
+
+  // Clean up nodes automatically when the sound finishes
+  source.onended = () => {
+    try {
+      source.disconnect();
+      soundGain.disconnect();
+    } catch {
+      // ignore
+    }
+  };
+
+  return handle;
+}
+
+/**
+ * Stop a previously returned audio handle.
+ */
+export function stopAudio(audio: ManagedAudioNode | null): void {
+  if (!audio) return;
+  audio.stop();
+}
+
+/**
+ * Update the master volume in real time.
+ */
+export function updateMasterVolume(): void {
+  if (!masterGain) return;
+  const settings = useSettingsStore.getState().settings;
+  masterGain.gain.value = settings.master_volume;
+}
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index f271294d1..8d57f19d7 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -3,6 +3,7 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { invoke } from "@tauri-apps/api/core";
 import { useTranslation } from "react-i18next";
 import { useSettingsStore, AppSettings } from "../store/settingsStore";
+import { updateMasterVolume } from "../lib/audioManager";
 import { useTheme } from "../context/ThemeContext";
 import { ThemeToggle, Select } from "../components/ui";
 import { SUPPORTED_LANGUAGES } from "../i18n";
@@ -20,6 +21,9 @@ import {
   Type,
   Maximize,
   Minimize,
+  Volume2,
+  VolumeX,
+  Volume1,
 } from "lucide-react";
 
 const CURRENCY_OPTIONS = [
@@ -97,6 +101,11 @@ export default function Settings() {
     if (partial.language) {
       i18n.changeLanguage(partial.language);
     }
+
+    // Sync master volume with Web Audio API in real time
+    if (partial.master_volume !== undefined) {
+      updateMasterVolume();
+    }
   };
 
   const handleClearSaves = async () => {
@@ -345,6 +354,70 @@ export default function Settings() {
           </SettingRow>
         </Section>
 
+        {/* ─── Audio ─── */}
+        <Section
+          title={t("settings.audio", "Audio")}
+          icon={<Volume2 className="w-5 h-5" />}
+        >
+          <SettingRow
+            label={t("settings.masterVolume", "Master Volume")}
+            description={t(
+              "settings.masterVolumeDesc",
+              "Global volume for all sounds and music",
+            )}
+          >
+            <div className="flex items-center gap-3 w-48">
+              {settings.master_volume === 0 ? (
+                <VolumeX className="w-4 h-4 text-gray-400" />
+              ) : settings.master_volume < 0.5 ? (
+                <Volume1 className="w-4 h-4 text-gray-400" />
+              ) : (
+                <Volume2 className="w-4 h-4 text-gray-400" />
+              )}
+              <input
+                type="range"
+                min={0}
+                max={1}
+                step={0.05}
+                value={settings.master_volume}
+                onChange={(e) =>
+                  handleUpdate({ master_volume: parseFloat(e.target.value) })
+                }
+                className="flex-1 h-1.5 bg-gray-200 dark:bg-navy-600 rounded-full appearance-none cursor-pointer accent-primary-500"
+              />
+              <span className="text-xs font-heading font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-8 text-right">
+                {Math.round(settings.master_volume * 100)}%
+              </span>
+            </div>
+          </SettingRow>
+
+          <SettingRow
+            label={t("settings.soundEffects", "Sound Effects")}
+            description={t(
+              "settings.soundEffectsDesc",
+              "Notification sounds, UI clicks, and other game sounds",
+            )}
+          >
+            <Toggle
+              checked={settings.sound_effects_enabled}
+              onChange={(v) => handleUpdate({ sound_effects_enabled: v })}
+            />
+          </SettingRow>
+
+          <SettingRow
+            label={t("settings.music", "Music")}
+            description={t(
+              "settings.musicDesc",
+              "Background music during menus and gameplay",
+            )}
+          >
+            <Toggle
+              checked={settings.music_enabled}
+              onChange={(v) => handleUpdate({ music_enabled: v })}
+            />
+          </SettingRow>
+        </Section>
+
         {/* ─── Saves & Data ─── */}
         <Section
           title={t("settings.savesData")}
diff --git a/src/store/settingsStore.test.ts b/src/store/settingsStore.test.ts
index 033f2c2ab..9502bde2f 100644
--- a/src/store/settingsStore.test.ts
+++ b/src/store/settingsStore.test.ts
@@ -17,6 +17,9 @@ const DEFAULT_SETTINGS = {
   confirm_advance: false,
   ui_scale: "normal",
   high_contrast: false,
+  master_volume: 0.5,
+  sound_effects_enabled: true,
+  music_enabled: true,
   lol_hybrid_open_trade_confidence_high: 0.6,
   lol_hybrid_disengage_confidence_low: 0.32,
 } as const;
diff --git a/src/store/settingsStore.ts b/src/store/settingsStore.ts
index c166e99c3..51983284b 100644
--- a/src/store/settingsStore.ts
+++ b/src/store/settingsStore.ts
@@ -12,6 +12,9 @@ export interface AppSettings {
   confirm_advance: boolean;
   ui_scale: "xsmall" | "small" | "normal" | "large" | "xlarge";
   high_contrast: boolean;
+  master_volume: number;
+  sound_effects_enabled: boolean;
+  music_enabled: boolean;
   lol_hybrid_open_trade_confidence_high: number;
   lol_hybrid_disengage_confidence_low: number;
 }
@@ -27,6 +30,9 @@ const DEFAULT_SETTINGS: AppSettings = {
   confirm_advance: false,
   ui_scale: "normal",
   high_contrast: false,
+  master_volume: 0.5,
+  sound_effects_enabled: true,
+  music_enabled: true,
   lol_hybrid_open_trade_confidence_high: 0.6,
   lol_hybrid_disengage_confidence_low: 0.32,
 };