fix(audio): off/on Audio + Video toggles; fix Safari autoplay + GPU video-off

Operator-driven live-UI revision:
- Video + Audio are now Dev-Mode-style on/off toggles (Audio on = soundtrack);
  white-noise deferred (removed from the live control; pure machinery kept).
- FIX video-off not blanking: the <video>/<canvas> are GPU-composited and could
  paint above the auto-z #black on a real GPU — give #black z-index + its own
  layer AND hide the video layers (opacity 0) on video-off.
- FIX no soundtrack on Safari/iOS: Safari unlocks <audio> only when play() runs
  INSIDE the user gesture; the start gesture now primes both A/B elements
  synchronously, so the async crossfades are allowed to play.
- Toggles wired on 'change' (matches the Dev Mode switch).
- player/audio.py AUDIO_SOURCES -> {off, soundtrack}; tests + E2E updated.
- Verified in headless Chromium AND WebKit: audio plays, video-off blanks both
  layers, zero JS errors. 288 tests + 3 Playwright E2E pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
BenStullsBets
2026-06-26 12:55:50 -07:00
parent aa76cd1c9f
commit 2722949805
16 changed files with 146 additions and 106 deletions
@@ -1,8 +1,18 @@
# Audio + Video — separated Visual & Audio controls — design
**Status:** proposed → in implementation (plan `docs/superpowers/plans/2026-06-26-audio-video-separated-controls.md`, session 0020)
**Status:** proposed → built (sessions 0020 build + 0021 revision)
**Date:** 2026-06-26
**Session:** 0020 (audio)
**Session:** 0020 (audio) · 0021 (live-UI revision)
> **v1 build revision (session 0021, operator-driven):** the live **Audio** control
> ships as a simple **off / soundtrack** toggle (styled like the Dev Mode switch),
> and **Video** is the matching on/off toggle. **White-noise is deferred** with music
> (the orthogonal Visual × Audio model and the synthesized-pink-noise machinery
> remain in the codebase for when it's wanted). Two real-browser bugs were fixed in
> this revision: video-off now blanks GPU-composited layers (z-index + explicit layer
> hide), and the soundtrack now plays on Safari/iOS (audio elements unlocked
> synchronously inside the start gesture). Sections below describe the fuller
> off/soundtrack/white-noise design; v1 live = off/soundtrack.
**Extends / reframes:** [`2026-06-26-networked-control-surface-design.md`](./2026-06-26-networked-control-surface-design.md)
§3 (control inventory) and §5 (server contract) — its bundled **Content** selector
is split into two orthogonal controls. Everything else in that spec (server-of-truth
@@ -75,7 +75,7 @@ inventory is exactly what the sim exposes today:
| Control | Sim today | Physical form (later) |
|---|---|---|
| **Visual** | toggle (show video on/off) | 2-position switch |
| **Audio** | 3-way `<select>` (off / soundtrack / white noise; ·music deferred) | rotary selector switch (3 pos) |
| **Audio** | on/off toggle (on = per-altitude soundtrack; ·white-noise & music deferred) | 2-position switch (rotary selector when more sources land) |
| **Altitude** | endless circular dial — walks the 5 scales (cosmos→abyss), wraps | rotary encoder (endless, detented) |
| **Left** (analytical) | slider 04 | knob/pot, 5 detents |
| **Right** (dreamlike) | slider 04 | knob/pot, 5 detents |