From waveform to showtime.

1. Load and decode

A bundled demo or local media file begins playing through a browser media element. The audio is decoded for analysis in a Web Worker so the heavier signal-processing pass does not block the renderer. YouTube sources are fetched by the self-hosted bridge and served back with byte-range support for seeking.

2. Find the pulse

The analyser builds a short-time spectrum and a mel-spaced view of its energy. Positive changes across frames create an onset envelope that highlights likely note and drum attacks. Tempo candidates are evaluated against that envelope, then dynamic-programming beat tracking finds a sequence that balances strong onsets with rhythmic regularity.

3. Map the arrangement

Low-frequency strength helps identify likely downbeats. Bar-level timbre and loudness features create a novelty curve, whose peaks suggest section changes. Segments are labelled by their intensity and position, and a strong late chorus can be promoted to the climax.

4. Compile the visual direction

The show director turns musical state into a compact look: palette, movement, brightness, haze, crowd response, screen treatment and one-shot effects. Each visual subsystem reads that look instead of inventing its own musical interpretation, keeping the arena coherent.

5. Render against one clock

During every animation frame, the audio engine reports the current playback time and feature values. The beat clock evaluates that time against the analysed grid, the director updates the look, and the arena renders it. Seeking resets accumulated cue state so old drops cannot fire after a jump.