feat(web): react wave and ambient visuals to live audio

apps/web/src/player/player.ts

@@ -279,6 +279,7 @@ export class Player {
       void this.load(true, this.state.positionMs);
       return;
     }
+    if (this.audioContext?.state === 'suspended') void this.audioContext.resume().catch(() => undefined);
     // play() в старых браузерах и jsdom может вернуть undefined вместо промиса.
     void Promise.resolve(this.audio.play()).catch(() => this.update({ playing: false }));
   }
@@ -405,6 +406,7 @@ export class Player {
     void this.refillWave();
     if (autoplay) {
       try {
+        if (this.audioContext?.state === 'suspended') await this.audioContext.resume();
         await this.audio.play();
       } catch {
         // Автозапуск заблокирован браузером — ждём нажатия «Слушать».
@@ -454,6 +456,38 @@ export class Player {
   /** Громкость пользователя × выравнивание к −14 LUFS. GainNode, если браузер его даёт. */
   private gain: GainNode | null = null;
   private wired = false;
+  private analyser: AnalyserNode | null = null;
+  private audioContext: AudioContext | null = null;
+  private spectrum = new Uint8Array(512);
+  private audioFrame = { bass: 0, mid: 0, treble: 0 };
+  private sampledAt = -Infinity;
+
+  /** Shared spectrum snapshot; animation consumers never trigger React renders. */
+  readAudio = () => {
+    const now = performance.now();
+    if (now - this.sampledAt < 12) return this.audioFrame;
+    this.sampledAt = now;
+    const active = this.state.playing && !this.state.loading && !this.state.muted;
+    const analyser = this.analyser;
+    if (!active || !analyser) {
+      this.audioFrame.bass = this.audioFrame.mid = this.audioFrame.treble = 0;
+      return this.audioFrame;
+    }
+    analyser.getByteFrequencyData(this.spectrum);
+    const band = (low: number, high: number) => {
+      const hz = analyser.context.sampleRate / analyser.fftSize;
+      const start = Math.max(1, Math.ceil(low / hz));
+      const end = Math.min(this.spectrum.length, Math.ceil(high / hz));
+      let sum = 0;
+      for (let i = start; i < end; i++) sum += (this.spectrum[i]! / 255) ** 2;
+      return Math.sqrt(sum / Math.max(1, end - start));
+    };
+    this.audioFrame.bass = band(40, 220);
+    this.audioFrame.mid = band(220, 2500);
+    this.audioFrame.treble = band(2500, 10000);
+    return this.audioFrame;
+  };
+
 
   private applyLoudness(mix = 1) {
     const track = this.state.track;
@@ -462,10 +496,22 @@ export class Player {
     if (!this.wired && typeof AudioContext !== 'undefined') {
       try {
         const ctx = new AudioContext();
+        this.audioContext = ctx;
         const src = ctx.createMediaElementSource(this.audio);
         this.gain = ctx.createGain();
         src.connect(this.gain);
         this.gain.connect(ctx.destination);
+        this.analyser = ctx.createAnalyser();
+        this.analyser.fftSize = 1024;
+        this.analyser.smoothingTimeConstant = 0.55;
+        this.gain.connect(this.analyser);
+        // The overlap is already audible through its own output; analyse it only.
+        try {
+          const overlapSource = ctx.createMediaElementSource(this.overlap);
+          overlapSource.connect(ctx.destination);
+          overlapSource.connect(this.analyser);
+        } catch { /* Crossfade analysis is optional. */ }
+
         this.audio.volume = 1;
         this.wired = true;
       } catch {