Resume AudioContext on user interaction to fix Chrome audio

Chrome and other browsers block AudioContext from starting until a user
gesture occurs on the page. This caused no sound when navigating directly
to a ROM page. Fix by listening for keydown/mousedown/touchstart events
and calling audioCtx.resume() on the first interaction.

Fixes #368

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bfirsh

src/cpu.js

@@ -346,8 +346,7 @@ class CPU {
         // zero page, then add Y. Page-crossing dummy read as in case 8.
         let zpAddr = this.loadDirect(opaddr + 2);
         addr =
-          this.loadDirect(zpAddr) |
-          (this.loadDirect((zpAddr + 1) & 0xff) << 8);
+          this.loadDirect(zpAddr) | (this.loadDirect((zpAddr + 1) & 0xff) << 8);
         baseHigh = (addr >> 8) & 0xff;
         if ((addr & 0xff00) !== ((addr + this.REG_Y) & 0xff00)) {
           this.load((addr & 0xff00) | ((addr + this.REG_Y) & 0xff));

src/nes.js

@@ -129,7 +129,12 @@ class NES {
         // Must go dot-by-dot near VBlank set (scanline 0, dot 1), VBlank
         // clear (scanline 20, dot 1), sprite 0 hit, or scanline boundaries.
         if (
-          !(ppu.scanline === 0 && ppu.vblankPending && ppu.curX <= 1 && finalCurX > 1) &&
+          !(
+            ppu.scanline === 0 &&
+            ppu.vblankPending &&
+            ppu.curX <= 1 &&
+            finalCurX > 1
+          ) &&
           !(ppu.scanline === 20 && ppu.curX <= 1 && finalCurX > 1) &&
           finalCurX < 341 &&
           (ppu.spr0HitX < ppu.curX || ppu.spr0HitX >= finalCurX)

web/src/Speakers.js

@@ -28,9 +28,34 @@ export default class Speakers {
     this.scriptNode = this.audioCtx.createScriptProcessor(1024, 0, 2);
     this.scriptNode.onaudioprocess = this.onaudioprocess;
     this.scriptNode.connect(this.audioCtx.destination);
+
+    // Chrome and other browsers require a user gesture before AudioContext can
+    // start. If suspended, resume on the first user interaction.
+    // See https://github.com/bfirsh/jsnes/issues/368
+    if (this.audioCtx.state === "suspended") {
+      this._resumeOnInteraction = () => {
+        if (this.audioCtx) {
+          this.audioCtx.resume();
+        }
+        this._removeResumeListeners();
+      };
+      document.addEventListener("keydown", this._resumeOnInteraction);
+      document.addEventListener("mousedown", this._resumeOnInteraction);
+      document.addEventListener("touchstart", this._resumeOnInteraction);
+    }
+  }
+
+  _removeResumeListeners() {
+    if (this._resumeOnInteraction) {
+      document.removeEventListener("keydown", this._resumeOnInteraction);
+      document.removeEventListener("mousedown", this._resumeOnInteraction);
+      document.removeEventListener("touchstart", this._resumeOnInteraction);
+      this._resumeOnInteraction = null;
+    }
   }
 
   stop() {
+    this._removeResumeListeners();
     if (this.scriptNode) {
       this.scriptNode.disconnect(this.audioCtx.destination);
       this.scriptNode.onaudioprocess = null;