Add a café-jazz lobby bed that plays at startup and when idle

A looping background track (frontend/lobby.mp3, LFS-tracked, served at /static/lobby.mp3) starts on the user's first gesture (browsers gate audio autoplay) and plays whenever the player is idle - no tape loaded, or paused. It fades out under a playing tape and back in when the tape stops, driven from the one play/pause chokepoint syncPlayState() -> updateLobby(). Track: Alex Morgan, 'Peaceful Cafe Jazz' (Pixabay, royalty-free). Also adds *.mp3 to Git LFS.

Co-Authored-By: Claude Opus 4.8 <[email protected]>

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text

frontend/lobby.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7f5abc44caa2c025a3ac37e2c35086e64e24a9a7db209f11ef27a565021b0de2
+size 4245504

frontend/ui.js

@@ -99,6 +99,57 @@ export function initUI({
   // so tapes are private and a reload starts the shelf empty. Newest first.
   const sessionTapes = [];
 
+  // --- lobby music ------------------------------------------------------------
+  // A café-jazz bed that plays at startup and whenever the player is idle (no
+  // tape loaded, or paused), and ducks out under a playing tape. Browsers block
+  // audio autoplay until the user interacts, so it's primed on the first gesture;
+  // after that it just follows the player state via syncPlayState() -> updateLobby().
+  // Track: Alex Morgan — "Peaceful Cafe Jazz" (Pixabay, royalty-free).
+  const LOBBY_VOL = 0.4;
+  const lobby = new Audio("/static/lobby.mp3");
+  lobby.loop = true;
+  lobby.preload = "auto";
+  lobby.volume = 0;
+  lobby.id = "lobby-audio";
+  document.body.appendChild(lobby);
+  let lobbyFade = null;
+  function fadeLobby(target, durSec = 0.7) {
+    if (lobbyFade) clearInterval(lobbyFade);
+    const from = lobby.volume;
+    const steps = Math.max(1, Math.round(durSec * 30));
+    let i = 0;
+    lobbyFade = setInterval(() => {
+      i += 1;
+      lobby.volume = Math.max(0, Math.min(1, from + (target - from) * (i / steps)));
+      if (i >= steps) {
+        clearInterval(lobbyFade);
+        lobbyFade = null;
+        if (target === 0) lobby.pause();
+      }
+    }, 1000 / 30);
+  }
+  // Play the bed only while nothing else is — fade it out under a live tape.
+  function updateLobby() {
+    const tapePlaying = !!active.src && !active.paused;
+    if (tapePlaying) {
+      if (!lobby.paused) fadeLobby(0);
+    } else {
+      if (lobby.paused) {
+        lobby.volume = 0;
+        lobby.play().catch(() => {}); // gated on a user gesture (primed below)
+      }
+      fadeLobby(LOBBY_VOL);
+    }
+  }
+  // Autoplay needs a user gesture; kick the bed off on the first one.
+  function primeLobby() {
+    window.removeEventListener("pointerdown", primeLobby);
+    window.removeEventListener("keydown", primeLobby);
+    updateLobby();
+  }
+  window.addEventListener("pointerdown", primeLobby);
+  window.addEventListener("keydown", primeLobby);
+
   function setStage(stage) {
     controlsRow.classList.toggle("hidden", stage !== "prompt");
     generating.classList.toggle("hidden", stage !== "generating");
@@ -433,6 +484,7 @@ export function initUI({
     cassette.classList.toggle("playing", playing);
     deck.classList.toggle("playing", playing);
     syncCards();
+    updateLobby(); // duck the café-jazz bed under a playing tape, restore it when idle
   }
 
   function updateProgress() {