diff --git a/web/index.html b/web/index.html
index 234156d..3a67db2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,6 +2,41 @@
 <html lang="en">
 
 <body style="margin: 0px;">
+  <script>
+    // --- Web Audio autoplay unlock -----------------------------------------
+    // Browsers (Chrome, Safari, mobile Firefox) create every AudioContext in a
+    // "suspended" state and refuse to start it until the user interacts with
+    // the page. Bevy -> rodio -> cpal build their AudioContext at startup, long
+    // before any gesture, so it stays suspended and no sound is ever produced
+    // ("AudioContext was prevented from starting automatically" in the console).
+    //
+    // We wrap the AudioContext constructor to remember every context that gets
+    // created, then resume them all on the first real user gesture. This must
+    // run BEFORE the wasm module loads so the wrapper is in place when cpal
+    // constructs its context.
+    (function () {
+      const Native = window.AudioContext || window.webkitAudioContext;
+      if (!Native) return;
+      const live = new Set();
+      function Wrapped(...args) {
+        const ctx = new Native(...args);
+        live.add(ctx);
+        return ctx;
+      }
+      Wrapped.prototype = Native.prototype;
+      window.AudioContext = Wrapped;
+      window.webkitAudioContext = Wrapped;
+
+      function resumeAll() {
+        for (const ctx of live) {
+          if (ctx.state === 'suspended') ctx.resume().catch(() => {});
+        }
+      }
+      for (const ev of ['pointerdown', 'mousedown', 'keydown', 'touchstart']) {
+        window.addEventListener(ev, resumeAll, { capture: true, passive: true });
+      }
+    })();
+  </script>
   <script type="module">
     import init from './bin.js'
 
