Add librosa beat/mood analysis and an Ambience background driven by it

The background worker now runs a real librosa analyzer (tempo, beat grid,
per-second energy/valence curves) instead of only the null baseline, kept
behind build_analyzer() so a plain checkout without the analysis extra still
runs fine. The web player reads that per-track analysis and drives a new
animated "Ambience" background (bubbles, colour, current) that reacts to the
beat and the mood curve as the track plays, plus a debug overlay for tuning
it. Also adds a one-off script to backfill podcast cover art from iTunes.
This commit is contained in:
2026-09-10 22:42:51 +02:00
parent 8aed3b022b
commit 2e0e6ad199
24 changed files with 2789 additions and 60 deletions

View File

@@ -87,6 +87,9 @@ button {
);
}
/* Still used by the room-control page's own `<Bubbles>` field (`RoomView.tsx`) - the
main player's bubbles moved to `Ambience.tsx`'s canvas, which needs real spawn and
turbulence control that a fixed set of CSS animations cannot give it. */
.bubble {
position: absolute;
bottom: -40px;
@@ -97,6 +100,20 @@ button {
pointer-events: none;
}
.ambience {
display: block;
/* A canvas is a replaced element: without an explicit size here, its CSS layout box
falls back to its own width/height *attributes* - the very thing the resize
handler sets from this box's measured size times devicePixelRatio. On any display
where dpr != 1, that is a feedback loop: each resize multiplies the attribute
(and thus, without this rule, the box) by dpr again, diverging within a few
frames until the canvas exceeds the browser's max size and throws. Pinning the
box to 100% of `.stage` breaks the loop - layout no longer depends on the
attribute at all. */
width: 100%;
height: 100%;
}
.pill {
border: none;
cursor: pointer;