feedBack/static
byrongamatos 4bf4ec064a refactor(app): give the <audio> element a module of its own (R3a)
static/js/audio-el.js — one exported const. app.js's diff is 5 lines.
This is a HINGE, not a carve: nothing shrinks, but almost everything left in
app.js is blocked behind it.

WHY. `audio` is `document.getElementById('audio')` with 162 references in app.js
and 173 outside any one cluster. Every remaining cluster measured — settings,
app-updates, count-in (208 fns), exit-confirm (212), library-render (220) — lists
`audio` among its inbound symbols, because they all touch playback and playback
reaches for the element directly. A module that needs it cannot import app.js to
get it (that closes a cycle and fails import-x/no-cycle), so today the only way to
carve any of them would be a host seam — the exact thing #878 had to build and
#880 had to tear out.

WHY IT'S SAFE. `audio` is a `const` and is NEVER reassigned anywhere in core, so a
read-only import binding is exactly right and no state container is needed. The
162 call sites are untouched — the binding keeps its name, it is just imported
instead of declared. (Contrast the reassigned scalars — isPlaying, _avOffsetMs —
which CANNOT be shared this way: an imported binding cannot be written to. Those
still need containers, and that is the next problem, not this one.)

TIMING. app.js is <script type="module">, so it evaluates after the HTML is parsed
and its imports evaluate just before its body — the same moment app.js used to run
this exact lookup. If the element had not been in the document, `audio` would be
null and app.js's top-level `audio.addEventListener(...)` calls would throw and
kill the module. They don't.

VERIFIED WITH REAL PLAYBACK, not a boot check. A/B against origin/main in two
browsers: app alive with zero page errors (which is itself the proof the import
resolved), #audio is an AUDIO element, togglePlay/seekBy live, and playSong() on a
real library song sets audio.src and the element reports a duration — IDENTICAL on
both sides.

pytest 2396, node 1038/1038, ESLint 0 (no-cycle clean), tailwind clean, Codex 0.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-11 19:46:10 +02:00
..
assets/venue/themes/small-club Clean release snapshot 2026-06-16 18:47:13 +02:00
capabilities refactor(ui): defer every classic script, keep boot() on DOMContentLoaded (R3a) (#872) 2026-07-11 16:57:04 +02:00
js refactor(app): give the <audio> element a module of its own (R3a) 2026-07-11 19:46:10 +02:00
lottie rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
svg Clean release snapshot 2026-06-16 18:47:13 +02:00
v3 refactor(ui): load app.js as an ES module (R3a) (#876) 2026-07-11 17:38:33 +02:00
vendor feat(highway_3d): hit-feedback juice + Hit-sparks toggle (#618) 2026-06-28 11:53:48 +02:00
_tailwind.src.css Clean release snapshot 2026-06-16 18:47:13 +02:00
app.js refactor(app): give the <audio> element a module of its own (R3a) 2026-07-11 19:46:10 +02:00
audio-mixer.js refactor(ui): defer every classic script, keep boot() on DOMContentLoaded (R3a) (#872) 2026-07-11 16:57:04 +02:00
capabilities.js rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
diagnostics.js rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
highway.js refactor(ui)!: remove the classic v2 shell — v3 is the only UI (R3a) (#871) 2026-07-11 16:33:03 +02:00
lottie-api.js rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
style.css feat(highway): show feedpak author/editor credits on song load (#629) 2026-06-28 22:08:44 +02:00
tailwind.min.css refactor(ui)!: remove the classic v2 shell — v3 is the only UI (R3a) (#871) 2026-07-11 16:33:03 +02:00
tour-engine.css rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00
tour-engine.js rename: slopsmith → feedBack, byron → got-feedBack (#537) 2026-06-23 11:03:01 +02:00