coda

Paused

Commit

474be08

1 Parent(s): 5eef7f2

Make the hero spectrum dance with the actual audio (Web Audio AnalyserNode)

The 48 hero EQ bars used to freeze the moment the finished track played - the
CSS only energized them off the play button's label. Now they react to the real
audio: when any CODA player starts we tap its element with a MediaElementSource
+ AnalyserNode and paint each bar from getByteFrequencyData() every frame.

- Wrap HTMLMediaElement.play/pause so we capture WaveSurfer's DETACHED <audio>
element (no DOM parent, so querySelector/closest/capture listeners miss it);
the wrap runs in the click stack so the AudioContext resumes under a gesture.
- Mirrored mapping: center bars track the lows, edges the highs, scaled within
each bar's existing height so the centered silhouette is preserved.
- On pause/stop the bars glide back to idle and hand control to the CSS breathing
animation; reduced-motion and wiring failures fall back to the CSS-only look.

Also folds in the working-tree intro/head fixes: the 2016 story is baked on with
an inline onclick close fallback, and head=HEAD_SCRIPT moves to launch() so the
front-end JS module actually injects on the Space (Gradio 6.16.0 ignores head=
on gr.Blocks()).

Files changed (1) hide show

app.py +206 -16

app.py CHANGED Viewed

@@ -1013,6 +1013,21 @@ footer{ display:none !important; }
   #coda-eq.coda-eq-playing span{ animation:none !important; transform:none !important; }
 }
 /* ===== FEATURE B — SEAM REVEAL (gold-accented, part of the MASTER reveal) ===== */
 #coda-seam-overlay{
   position:absolute; inset:0; pointer-events:none; z-index:4; display:none;
@@ -1359,14 +1374,24 @@ AMBIENT = ("<div class='coda-aurora'></div>"
            "<div class='coda-glow'></div>"
            f"<div class='coda-particles'>{_parts}</div>")
-# Feature C — cinematic onboarding overlay. Server-rendered, position:fixed,
-# opacity:0/pointer-events:none by default (so a no-JS visitor goes straight to
-# the tool and is never locked out). The CODA_INIT_JS controller relocates it to
-# <body>, plays the 4-beat Track0000 story, and hard-removes it on dismiss.
 INTRO_OVERLAY = (
-    "<div id='coda-intro-overlay' role='dialog' aria-modal='true' "
-    "aria-label='CODA — the story'>"
-    "<div id='coda-intro-skip' role='button' tabindex='0'>Skip</div>"
     "<div id='coda-intro-card'>"
     "<div class='coda-intro-beat b1'><p class='coda-intro-year'>2016</p></div>"
     "<div class='coda-intro-beat b2'><p class='coda-intro-line'>A song, recorded "
@@ -1376,7 +1401,7 @@ INTRO_OVERLAY = (
     "<div id='coda-intro-eq'>" + ("<span></span>" * 12) + "</div></div>"
     "<div class='coda-intro-beat b4'>"
     "<p class='coda-intro-fin'>Ten years later, it gets finished.</p>"
-    "<button id='coda-intro-enter' type='button'>Enter CODA</button>"
     "</div></div></div>")
 # the only JS, and purely cosmetic: a soft light that follows the cursor. Runs
@@ -1473,6 +1498,11 @@ CODA_INIT_JS = """
       },
       pauseOthers: function (keep) {
         try {
           var all = doc.querySelectorAll('.coda-player audio, .coda-drop audio');
           for (var i = 0; i < all.length; i++) {
             if (all[i] !== keep && !all[i].paused) { try { all[i].pause(); } catch (e) {} }
@@ -1517,6 +1547,159 @@ CODA_INIT_JS = """
       W.heroSync = sync;
     }
     /* ===== FEATURE B — BEFORE/AFTER SEAM REVEAL =====
      * The before/after split (YOUR PART | CODA + the join marker) is now rendered
      * SERVER-SIDE as a self-contained ribbon (see _seam_html in app.py) with the
@@ -1578,6 +1761,9 @@ CODA_INIT_JS = """
           host.addEventListener('transitionend', finish, { once: true });
           setTimeout(finish, 750);
         }
         if (enter) enter.addEventListener('click', dismiss);
         if (skip) skip.addEventListener('click', dismiss);
         host.addEventListener('click', function (ev) { if (ev.target === host) dismiss(); });
@@ -1661,7 +1847,7 @@ HEAD_SCRIPT = (
     "</script>"
 )
-with gr.Blocks(title="CODA", head=HEAD_SCRIPT) as app:
     # cinematic onboarding overlay (position:fixed; the JS relocates it to <body>
     # and never lets it block the tool). First child so it can never affect layout.
     gr.HTML(INTRO_OVERLAY)
@@ -1796,14 +1982,18 @@ with gr.Blocks(title="CODA", head=HEAD_SCRIPT) as app:
 if __name__ == "__main__":
-    # Gradio 6 moved theme/css to launch(); pass them here (and they remain on
-    # Blocks above) so the dark DAW theme applies however the Space serves it.
     # queue: one heavy job at a time (single GPU), others wait rather than
     # contend. show_error surfaces a real error in the UI instead of a silently
-    # stuck spinner — the failure mode we just chased on the deployed Space.
-    # allowed_paths: on HF Spaces, Gradio 6 refuses to serve the bundled demo
-    # clip (gradio_api/file=…/examples/… → 403) unless its directory is
-    # explicitly allowed, which broke the "Try the demo" button on the Space.
     app.queue(default_concurrency_limit=1, max_size=10).launch(
-        theme=THEME, css=CSS, show_error=True,
         allowed_paths=[os.path.join(os.path.dirname(__file__), "examples")])

   #coda-eq.coda-eq-playing span{ animation:none !important; transform:none !important; }
 }
+/* ===== FEATURE A (LIVE) — real audio-reactive bars =====
+   When a Web Audio AnalyserNode is driving the field, the JS adds .coda-eq-live
+   and writes each bar's scaleY inline from getByteFrequencyData(). A *running*
+   CSS animation would override those inline transforms, so we kill it here. This
+   rule sits AFTER .coda-eq-playing so its equal-specificity !important wins by
+   source order. On stop the JS removes the class and the CSS breathing resumes. */
+#coda-eq.coda-eq-live span{
+  animation: none !important;
+  transition: transform .06s linear, box-shadow .2s ease;
+  box-shadow: 0 0 16px rgba(111,224,245,.7), 0 0 6px rgba(169,139,255,.55);
+}
+@media (prefers-reduced-motion: reduce){
+  #coda-eq.coda-eq-live span{ transition:none !important; }
+}
 /* ===== FEATURE B — SEAM REVEAL (gold-accented, part of the MASTER reveal) ===== */
 #coda-seam-overlay{
   position:absolute; inset:0; pointer-events:none; z-index:4; display:none;
            "<div class='coda-glow'></div>"
            f"<div class='coda-particles'>{_parts}</div>")
+# Feature C — cinematic onboarding overlay. Tony wants the 2016 story to play on
+# EVERY page load. It is rendered with `coda-intro-on` BAKED IN, so the CSS beats
+# start immediately on load WITHOUT waiting on (or even needing) JS — bulletproof
+# against the head-injection issue that made it vanish on the Space. The
+# CODA_INIT_JS controller (when present) relocates it to <body>, locks scroll,
+# wires Esc / auto-advance / replay, and hard-removes it on dismiss. Skip / Enter
+# carry an INLINE onclick fallback so the overlay is always dismissable even if
+# the JS module never loads (no lock-out).
+_INTRO_CLOSE = (
+    "(window.__codaCloseIntro||function(){"
+    "var o=document.getElementById('coda-intro-overlay');"
+    "if(o){o.style.opacity=0;o.style.pointerEvents='none';"
+    "setTimeout(function(){if(o)o.remove();},620);}"
+    "document.body.classList.remove('coda-intro-lock');})()")
 INTRO_OVERLAY = (
+    "<div id='coda-intro-overlay' class='coda-intro-on' role='dialog' "
+    "aria-modal='true' aria-label='CODA — the story'>"
+    f'<div id="coda-intro-skip" role="button" tabindex="0" onclick="{_INTRO_CLOSE}">Skip</div>'
     "<div id='coda-intro-card'>"
     "<div class='coda-intro-beat b1'><p class='coda-intro-year'>2016</p></div>"
     "<div class='coda-intro-beat b2'><p class='coda-intro-line'>A song, recorded "
     "<div id='coda-intro-eq'>" + ("<span></span>" * 12) + "</div></div>"
     "<div class='coda-intro-beat b4'>"
     "<p class='coda-intro-fin'>Ten years later, it gets finished.</p>"
+    f'<button id="coda-intro-enter" type="button" onclick="{_INTRO_CLOSE}">Enter CODA</button>'
     "</div></div></div>")
 # the only JS, and purely cosmetic: a soft light that follows the cursor. Runs
       },
       pauseOthers: function (keep) {
         try {
+          /* the registered set covers WaveSurfer's DETACHED <audio> (which
+           * querySelector can't reach); the query covers any in-DOM player. */
+          this.playing.forEach(function (p) {
+            if (p !== keep && !p.paused) { try { p.pause(); } catch (e) {} }
+          });
           var all = doc.querySelectorAll('.coda-player audio, .coda-drop audio');
           for (var i = 0; i < all.length; i++) {
             if (all[i] !== keep && !all[i].paused) { try { all[i].pause(); } catch (e) {} }
       W.heroSync = sync;
     }
+    /* ===== FEATURE A (LIVE) — AUDIO-REACTIVE HERO via Web Audio AnalyserNode =====
+     * The CSS class above is the floor; THIS is the real thing Tony asked for.
+     * When any CODA player starts, we tap its element with a MediaElementSource +
+     * AnalyserNode (AUDIO.wire) and paint the 48 hero bars from getByteFrequency-
+     * Data() every animation frame, so they dance with the actual music.
+     *
+     * The hard part: Gradio's WaveSurfer plays through a DETACHED <audio> element
+     * (no DOM parent), so querySelector/closest/capture-phase listeners can't see
+     * it. We solve that by wrapping HTMLMediaElement.prototype.play/pause — that
+     * wrap fires with `this` = the real element the instant WaveSurfer plays it,
+     * and runs inside the click call-stack so ensureCtx() can resume the
+     * AudioContext under a valid user gesture (browsers require that).
+     *
+     * Bars are mirrored: center tracks the lows (bass pumps the middle), edges the
+     * highs — a classic spectrum that keeps the hero's centered silhouette (the
+     * per-bar inline height already encodes that shape; we only scale within it).
+     * On pause/stop the bars decay smoothly to idle and control hands back to the
+     * CSS breathing animation. If wiring ever fails (cross-origin taint, or a
+     * WebAudio-backend Gradio build), we never add .coda-eq-live and the
+     * CSS-energized look stays as a graceful fallback — nothing regresses. */
+    if (!W.liveFFT) {
+      W.liveFFT = true;
+      var EQ = (W.eq = W.eq || {});
+      EQ.idle = 0.16;
+      EQ.bars = function () {
+        var eq = doc.getElementById('coda-eq');
+        return eq ? eq.querySelectorAll('span') : [];
+      };
+      /* bar i (0..n-1) -> a frequency bin. Distance from center picks the band
+       * (center=low, edge=high), perceptually spread so the lows aren't crammed. */
+      EQ.band = function (data, i, n, bins) {
+        var half = n / 2;
+        var d = Math.abs(i + 0.5 - half) / half;          /* 0 center .. ~1 edge */
+        var t = Math.pow(d, 1.35);
+        var top = Math.max(4, Math.floor(bins * 0.80));   /* top bins are ~empty */
+        var idx = 1 + Math.round(t * (top - 2));
+        var a = data[idx];
+        var b = data[idx + 1 < top ? idx + 1 : idx];
+        return (a + b) / 510;                             /* /255/2 -> 0..1 */
+      };
+      EQ.paint = function (data, bins) {
+        var spans = EQ.bars(), n = spans.length;
+        if (!n) return;
+        if (!EQ.state || EQ.state.length !== n) {
+          EQ.state = new Float32Array(n); EQ.state.fill(EQ.idle);
+        }
+        for (var i = 0; i < n; i++) {
+          var amp = EQ.band(data, i, n, bins);
+          var target = clamp(0.12 + amp * 1.18, 0.04, 1.14);
+          var prev = EQ.state[i];
+          var k = target > prev ? 0.55 : 0.20;            /* snappy attack, soft release */
+          var v = prev + (target - prev) * k;
+          EQ.state[i] = v;
+          spans[i].style.transform = 'scaleY(' + v.toFixed(3) + ')';
+        }
+      };
+      EQ.loop = function () {
+        EQ.raf = requestAnimationFrame(EQ.loop);
+        var el = AUDIO.findActive();
+        if (!el) {                                        /* small grace before settling */
+          EQ.miss = (EQ.miss || 0) + 1;
+          if (EQ.miss > 6) EQ.stop();
+          return;
+        }
+        EQ.miss = 0;
+        var g = AUDIO.graphs.get(el);
+        if (!g || !g.analyser) return;
+        g.analyser.getByteFrequencyData(g.data);
+        EQ.paint(g.data, g.analyser.frequencyBinCount);
+      };
+      EQ.start = function () {
+        var eq = doc.getElementById('coda-eq');
+        if (!eq || REDUCED) return;
+        eq.classList.add('coda-eq-live');
+        EQ.miss = 0;
+        if (EQ.settleRaf) { cancelAnimationFrame(EQ.settleRaf); EQ.settleRaf = 0; }
+        if (!EQ.raf) EQ.loop();
+      };
+      EQ.stop = function () {
+        if (EQ.raf) { cancelAnimationFrame(EQ.raf); EQ.raf = 0; }
+        var spans = EQ.bars(), n = spans.length;
+        var eq = doc.getElementById('coda-eq');
+        if (!n) { if (eq) eq.classList.remove('coda-eq-live'); return; }
+        if (!EQ.state || EQ.state.length !== n) {
+          EQ.state = new Float32Array(n); EQ.state.fill(EQ.idle);
+        }
+        /* glide the bars down to idle, THEN hand back to the CSS breathing anim */
+        function decay() {
+          var moving = false;
+          for (var i = 0; i < n; i++) {
+            EQ.state[i] += (EQ.idle - EQ.state[i]) * 0.22;
+            if (Math.abs(EQ.state[i] - EQ.idle) > 0.012) moving = true;
+            spans[i].style.transform = 'scaleY(' + EQ.state[i].toFixed(3) + ')';
+          }
+          if (moving && !AUDIO.findActive()) {
+            EQ.settleRaf = requestAnimationFrame(decay);
+          } else {
+            EQ.settleRaf = 0;
+            if (eq) eq.classList.remove('coda-eq-live');
+            for (var j = 0; j < n; j++) spans[j].style.transform = '';  /* CSS resumes */
+          }
+        }
+        decay();
+      };
+      AUDIO.register = function (el) {
+        if (!el || el.tagName !== 'AUDIO') return;
+        var g = this.wire(el);          /* MediaElementSource + analyser (idempotent) */
+        if (!g) return;                 /* taint / WebAudio backend -> CSS fallback */
+        this.playing.add(el);
+        this.pauseOthers(el);
+        EQ.start();
+      };
+      AUDIO.unregister = function (el) {
+        if (!el) return;
+        this.playing['delete'](el);
+        if (!this.findActive()) EQ.stop();
+      };
+      /* 1) Wrap play/pause on the prototype: catches WaveSurfer's DETACHED element
+       *    (its play() runs in the click stack, so ensureCtx can resume the ctx).
+       *    Guarded so re-fired app.load / HEAD_SCRIPT polls never double-wrap. */
+      try {
+        var MP = window.HTMLMediaElement && HTMLMediaElement.prototype;
+        if (MP && !MP.__codaPatched) {
+          MP.__codaPatched = true;
+          var _play = MP.play, _pause = MP.pause;
+          MP.play = function () {
+            try { AUDIO.register(this); } catch (e) {}
+            return _play.apply(this, arguments);
+          };
+          MP.pause = function () {
+            try { AUDIO.unregister(this); } catch (e) {}
+            return _pause.apply(this, arguments);
+          };
+        }
+      } catch (e) {}
+      /* 2) Belt-and-suspenders for any IN-DOM <audio> (media events don't bubble,
+       *    but capture still reaches them). 'ended' settles the field back to idle. */
+      try {
+        doc.addEventListener('play',  function (e) { try { AUDIO.register(e.target); }   catch (x) {} }, true);
+        doc.addEventListener('pause', function (e) { try { AUDIO.unregister(e.target); } catch (x) {} }, true);
+        doc.addEventListener('ended', function (e) { try { AUDIO.unregister(e.target); } catch (x) {} }, true);
+      } catch (e) {}
+    }
     /* ===== FEATURE B — BEFORE/AFTER SEAM REVEAL =====
      * The before/after split (YOUR PART | CODA + the join marker) is now rendered
      * SERVER-SIDE as a self-contained ribbon (see _seam_html in app.py) with the
           host.addEventListener('transitionend', finish, { once: true });
           setTimeout(finish, 750);
         }
+        /* expose the graceful close so the overlay's inline onclick fallback
+           routes through it when the JS module is present (else it self-closes) */
+        try { window.__codaCloseIntro = dismiss; } catch (e) {}
         if (enter) enter.addEventListener('click', dismiss);
         if (skip) skip.addEventListener('click', dismiss);
         host.addEventListener('click', function (ev) { if (ev.target === host) dismiss(); });
     "</script>"
 )
+with gr.Blocks(title="CODA") as app:
     # cinematic onboarding overlay (position:fixed; the JS relocates it to <body>
     # and never lets it block the tool). First child so it can never affect layout.
     gr.HTML(INTRO_OVERLAY)
 if __name__ == "__main__":
+    # Gradio 6 moved theme/css/head to launch(). On the deployed Space (Gradio
+    # 6.16.0) head= on gr.Blocks() is SILENTLY IGNORED, so the whole front-end
+    # JS module (cursor glow + Feature A audio-reactive hero + Feature C intro)
+    # never got injected — which is why the 2016 intro "disappeared" on the
+    # Space. Passing head=HEAD_SCRIPT to launch() is the supported path and
+    # injects it on 6.16.0+. (HEAD_SCRIPT itself is idempotent, so even if a
+    # newer Gradio also honored Blocks(head=) the double-run would be harmless.)
     # queue: one heavy job at a time (single GPU), others wait rather than
     # contend. show_error surfaces a real error in the UI instead of a silently
+    # stuck spinner. allowed_paths: on HF Spaces, Gradio 6 refuses to serve the
+    # bundled demo clip (gradio_api/file=…/examples/… → 403) unless its
+    # directory is explicitly allowed, which broke "Try the demo" on the Space.
     app.queue(default_concurrency_limit=1, max_size=10).launch(
+        theme=THEME, css=CSS, head=HEAD_SCRIPT, show_error=True,
         allowed_paths=[os.path.join(os.path.dirname(__file__), "examples")])