From 2c94b6ac698bd65cf3b79e4d2a94a1b47791a356 Mon Sep 17 00:00:00 2001
From: Adrian Florescu <florescuadyz@yahoo.com>
Date: Tue, 7 Jul 2026 19:13:55 +0300
Subject: [PATCH 1/2] Add sound visualizer driven by the real audio signal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five iOS-lockscreen-style bars under the poster that move on whatever the
app actually emits: the radio stream, the loading tone or the error tone.

- The signal is tapped via captureStream() + AnalyserNode: unlike the
  reverted createMediaElementSource approach (69a58f2), playback is NOT
  rerouted through the AudioContext, so the iOS media session and
  background playback stay untouched.
- All three <audio> elements feed one analyser; per-band peak
  normalization (AGC) keeps loudness-compressed radio moving on the beat.
- The state machine stays the source of truth: applyFx drives data-viz
  through the new setVisualizer dep (vizModeFor classifier).
- Declarative CSS fallback animation when no signal is readable:
  Safari/iOS + Firefox (no captureStream), data-no-cors stations,
  AudioContext not yet unlocked, reduced motion.
- Streams now load with crossorigin=anonymous (all stations send CORS,
  verified) except National FM, marked data-no-cors — it plays opaque.
- e2e: stream mocks now send CORS headers; user-level visualizer tests
  (bars still in silence, moving whenever something is audible).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 e2e/radio.spec.js        |  81 +++++++++++++++++++-
 src/css/input.css        |  80 ++++++++++++++++++++
 src/index.html           |  18 ++++-
 src/js/dom.ts            |   1 +
 src/js/main.ts           |  12 ++-
 src/js/radioCore.test.ts |  32 ++++++--
 src/js/radioCore.ts      |   3 +-
 src/js/radioMachine.ts   |  10 +++
 src/js/visualizer.ts     | 154 +++++++++++++++++++++++++++++++++++++++
 9 files changed, 377 insertions(+), 14 deletions(-)
 create mode 100644 src/js/visualizer.ts

diff --git a/e2e/radio.spec.js b/e2e/radio.spec.js
index 999541f..3014441 100644
--- a/e2e/radio.spec.js
+++ b/e2e/radio.spec.js
@@ -3,6 +3,9 @@ import { test, expect } from '@playwright/test';
 const STREAM_URL_RE = /live\.kissfm|europafm|digifm|magicfm|virginradio|srr\.ro|profm|rockfm|guerrillaradio|nationalfm|dancefm|radiovibefm|radioprob|vanillaradio|radiofrance|\/accs3\/fip\/test-tone-\d+\.ts/;
 const SOUND_URL_RE = /\/sounds\/(?:loading-low|error-low)\.mp3(?:\?.*)?$/;
 const SOUND_CACHE_NAME = 'radio-sounds-v2';
+// The player loads streams in CORS mode (crossorigin, for the visualizer),
+// so mocked stream responses must carry the CORS header too.
+const CORS_HEADERS = { 'Access-Control-Allow-Origin': '*' };
 const HLS_TEST_SEGMENT = Buffer.from(
   'R0AREABC8CUAAcEAAP8B/wAB/IAUSBIBBkZGbXBlZwlTZXJ2aWNlMDF3fEPK//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9HQAAQAACwDQABwQAAAAHwACqxBLL//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0dQABAAArASAAHBAADhAPAAD+EA8AC2m8DZ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////R0EAMAdQAAB7DH4AAAABwADpgIAFIQAH2GH/8VCAA9/83gIATGF2YzYyLjI4LjEwMgBCIAjBGDj/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FHAQAxeAD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////1CAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHEdAABEAALANAAHBAAAAAfAAKrEEsv//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////R1AAEQACsBIAAcEAAOEA8AAP4QDwALabwNn///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9HQQAyB1AAALxa/gAAAAHAANiAgAUhAAndm//xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb0cBADOJAP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwcR0AREQBC8CUAAcEAAP8B/wAB/IAUSBIBBkZGbXBlZwlTZXJ2aWNlMDF3fEPK//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9HQAASAACwDQABwQAAAAHwACqxBLL//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0dQABIAArASAAHBAADhAPAAD+EA8AC2m8DZ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////R0EANAdQAAD9qX4AAAABwADYgIAFIQAL4tX/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb9HAQA1iQD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHEdAABMAALANAAHBAAAAAfAAKrEEsv//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////R1AAEwACsBIAAcEAAOEA8AAP4QDwALabwNn///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9HQQA2J1AAAT73fgD//////////////////////////////////////////wAAAcAAioCABSEADegN//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHP/xUIABv/whEARgjBz/8VCAAb/8IRAEYIwc//FQgAG//CEQBGCMHA==',
   'base64',
@@ -16,6 +19,7 @@ async function mockStreams(page) {
       await route.fulfill({
         status: 200,
         contentType: 'application/vnd.apple.mpegurl',
+        headers: CORS_HEADERS,
         body: [
           '#EXTM3U',
           '#EXT-X-VERSION:3',
@@ -37,6 +41,7 @@ async function mockStreams(page) {
       await route.fulfill({
         status: 200,
         contentType: 'video/mp2t',
+        headers: CORS_HEADERS,
         body: HLS_TEST_SEGMENT,
       });
       return;
@@ -45,6 +50,7 @@ async function mockStreams(page) {
     await route.fulfill({
       status: 200,
       contentType: 'audio/mpeg',
+      headers: CORS_HEADERS,
       path: 'src/public/sounds/test-tone.mp3',
     });
   });
@@ -65,6 +71,7 @@ async function mockStreamsDelayed(page, delayMs) {
     await route.fulfill({
       status: 200,
       contentType: 'audio/mpeg',
+      headers: CORS_HEADERS,
       path: 'src/public/sounds/test-tone.mp3',
     });
   });
@@ -96,9 +103,31 @@ function ui(page) {
     stationOptions: page.getByRole('listbox', { name: 'Posturi de radio' }).getByRole('option'),
     loadingMsg:     page.getByText(/Se încarcă/),
     errorMsg:       page.getByText(/Eroare la încărcarea/),
+    visualizer:     page.getByRole('img', { name: 'Vizualizator sunet' }),
   };
 }
 
+// --- Visualizer motion ---
+// A headless test can't watch an animation, but it can do what a user does:
+// look twice. Two screenshots of the visualizer that differ = the bars move.
+async function expectVisualizerMoving(viz) {
+  const before = await viz.screenshot();
+  await expect
+    .poll(async () => (await viz.screenshot()).equals(before), {
+      message: 'visualizer bars should be moving',
+      timeout: 5000,
+    })
+    .toBe(false);
+}
+
+async function expectVisualizerStill(page, viz) {
+  await page.waitForTimeout(600); // let the mode-change transition settle
+  const before = await viz.screenshot();
+  await page.waitForTimeout(400);
+  const after = await viz.screenshot();
+  expect(after.equals(before), 'visualizer bars should be still').toBe(true);
+}
+
 // Synchronization only (not an assertion): wait until the app finished its
 // sound preload so later steps aren't racing page init.
 async function waitForSoundBlobs(page) {
@@ -295,6 +324,7 @@ test.describe('Radio Player E2E', () => {
         await route.fulfill({
           status: 200,
           contentType: 'application/vnd.apple.mpegurl',
+        headers: CORS_HEADERS,
           body: [
             '#EXTM3U',
             '#EXT-X-VERSION:3',
@@ -312,10 +342,10 @@ test.describe('Radio Player E2E', () => {
         return;
       }
       if (url.includes('/accs3/fip/test-tone-')) {
-        await route.fulfill({ status: 200, contentType: 'video/mp2t', body: HLS_TEST_SEGMENT });
+        await route.fulfill({ status: 200, contentType: 'video/mp2t', headers: CORS_HEADERS, body: HLS_TEST_SEGMENT });
         return;
       }
-      await route.fulfill({ status: 200, contentType: 'audio/mpeg', path: 'src/public/sounds/test-tone.mp3' });
+      await route.fulfill({ status: 200, contentType: 'audio/mpeg', headers: CORS_HEADERS, path: 'src/public/sounds/test-tone.mp3' });
     });
 
     await page.goto('/');
@@ -556,6 +586,50 @@ test.describe('Radio Player E2E', () => {
     await expect(c.loadingMsg).toContainText('Kiss FM');
   });
 
+  // --- Sound visualizer ---
+  // The visualizer mirrors the always-audible promise visually: whenever a
+  // sound plays (stream, loading tone, error tone) the bars move; in silence
+  // (idle/paused) they stand still.
+
+  test('visualizer is still while idle and moves while playing', async ({ page }) => {
+    const c = ui(page);
+    await mockStreams(page);
+    await page.goto('/');
+
+    await expect(c.visualizer).toBeVisible();
+    await expectVisualizerStill(page, c.visualizer);
+
+    await c.playButton.click();
+    await expect(c.pauseButton).toBeVisible({ timeout: 8000 });
+    await expectVisualizerMoving(c.visualizer);
+
+    // Pausing goes back to silence — the bars stop
+    await c.pauseButton.click();
+    await expect(c.playButton).toBeVisible();
+    await expectVisualizerStill(page, c.visualizer);
+  });
+
+  test('visualizer moves while the loading sound plays', async ({ page }) => {
+    const c = ui(page);
+    await mockStreamsHang(page);
+    await page.goto('/');
+
+    await c.playButton.click();
+    await expect(c.loadingMsg).toBeVisible({ timeout: 3000 });
+    await expectVisualizerMoving(c.visualizer);
+  });
+
+  test('visualizer moves while the error sound plays', async ({ page }) => {
+    const c = ui(page);
+    await page.goto('/');
+    await waitForSoundBlobs(page);
+    await page.context().setOffline(true);
+
+    await c.nextButton.click();
+    await expect(c.errorMsg).toBeVisible({ timeout: 3000 });
+    await expectVisualizerMoving(c.visualizer);
+  });
+
   // --- Accessibility ---
 
   test('all control buttons have aria-labels', async ({ page }) => {
@@ -723,6 +797,7 @@ test.describe('Offline — cached resources', () => {
         await route.fulfill({
           status: 200,
           contentType: 'audio/mpeg',
+          headers: CORS_HEADERS,
           path: 'src/public/sounds/test-tone.mp3',
         });
       },
@@ -845,7 +920,7 @@ test.describe('Offline mid-playback — always audible', () => {
         await route.abort('internetdisconnected');
         return;
       }
-      await route.fulfill({ status: 200, contentType: 'audio/mpeg', path: 'src/public/sounds/test-tone.mp3' });
+      await route.fulfill({ status: 200, contentType: 'audio/mpeg', headers: CORS_HEADERS, path: 'src/public/sounds/test-tone.mp3' });
     });
 
     await page.goto('/');
diff --git a/src/css/input.css b/src/css/input.css
index de9967b..fb42264 100644
--- a/src/css/input.css
+++ b/src/css/input.css
@@ -38,6 +38,86 @@
   }
 }
 
+/* --- Sound visualizer -------------------------------------------------
+   Five bars under #visualizer. The state machine sets data-viz (which sound
+   is audible); visualizer.ts adds .viz-live while the REAL audio signal
+   drives the bars (captureStream + analyser, 60fps inline transforms).
+   The keyframe animations below are the declarative fallback for when no
+   signal is readable — no captureStream support (Safari/iOS, Firefox),
+   data-no-cors stations, AudioContext not yet unlocked. */
+@layer components {
+  .viz-bar {
+    width: 5px;
+    height: 20px;
+    margin: 0 3px;
+    border-radius: 999px;
+    background-color: var(--color-Red);
+    transform: scaleY(0.12);
+    transform-origin: bottom;
+    transition: background-color 250ms ease, opacity 250ms ease;
+  }
+
+  /* Mode changes ease smoothly — except live bars, which move at 60fps */
+  #visualizer:not(.viz-live) .viz-bar {
+    transition: transform 250ms ease, background-color 250ms ease, opacity 250ms ease;
+  }
+
+  /* Silence (idle/paused): short, dim, still */
+  [data-viz="off"] .viz-bar {
+    opacity: 0.35;
+  }
+
+  /* Fallback: radio stream — lively, desynchronized bounce (music-like) */
+  [data-viz="playing"]:not(.viz-live) .viz-bar {
+    animation: viz-play 1s ease-in-out infinite;
+  }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(1) { animation-duration: 0.9s;  animation-delay: -0.3s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(2) { animation-duration: 0.7s;  animation-delay: -0.8s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(3) { animation-duration: 1.15s; animation-delay: -0.1s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(4) { animation-duration: 0.8s;  animation-delay: -0.5s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5) { animation-duration: 1.05s; animation-delay: -0.65s; }
+
+  /* Loading tone: brown like the loading message */
+  [data-viz="loading"] .viz-bar {
+    background-color: var(--color-Brown);
+  }
+  [data-viz="loading"]:not(.viz-live) .viz-bar {
+    animation: viz-load 1.6s ease-in-out infinite;
+  }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(2) { animation-delay: 0.15s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(3) { animation-delay: 0.3s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(4) { animation-delay: 0.45s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5) { animation-delay: 0.6s; }
+
+  /* Error tone: red like the error message; fallback pulses all bars together */
+  [data-viz="error"]:not(.viz-live) .viz-bar {
+    animation: viz-error 0.55s ease-in-out infinite;
+  }
+
+  @keyframes viz-play {
+    0%, 100% { transform: scaleY(0.25); }
+    30%      { transform: scaleY(1); }
+    55%      { transform: scaleY(0.45); }
+    80%      { transform: scaleY(0.8); }
+  }
+  @keyframes viz-load {
+    0%, 100% { transform: scaleY(0.15); }
+    50%      { transform: scaleY(0.55); }
+  }
+  @keyframes viz-error {
+    0%, 100% { transform: scaleY(0.9); }
+    50%      { transform: scaleY(0.35); }
+  }
+
+  /* Reduced motion: no animation — audible modes show as steady bars */
+  @media (prefers-reduced-motion: reduce) {
+    .viz-bar { animation: none !important; }
+    [data-viz="playing"] .viz-bar,
+    [data-viz="loading"] .viz-bar,
+    [data-viz="error"] .viz-bar { transform: scaleY(0.6); }
+  }
+}
+
 @layer base {
   :where(
     a,
diff --git a/src/index.html b/src/index.html
index fb70334..47a2e7d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -134,10 +134,22 @@ <h1 class="uppercase text-sm text-Brown mt-6">Radio Player Romania
       </button>
 
 
+      <!-- Sound visualizer: mirrors whatever is audible right now (radio
+           stream, loading tone or error tone) — still while the app is silent.
+           Driven by the state machine (data-viz), animated purely in CSS. -->
+      <div id="visualizer" data-viz="off" role="img" aria-label="Vizualizator sunet"
+        class="relative z-10 mx-auto mt-5 flex h-5 items-end justify-center">
+        <span class="viz-bar"></span>
+        <span class="viz-bar"></span>
+        <span class="viz-bar"></span>
+        <span class="viz-bar"></span>
+        <span class="viz-bar"></span>
+      </div>
+
       <!-- PlayerControls -->
       <!-- Button with move down a bit on press-->
 
-      <div class="flex items-center justify-center mt-[35px] p-[2px] relative z-10">
+      <div class="flex items-center justify-center mt-[15px] p-[2px] relative z-10">
         <button id="prevButton" aria-label="Postul anterior"
           class="stroke-Red hover:stroke-Brown active:stroke-Brown w-1/3 flex justify-center bg-gradient-to-b hover:from-transparent hover:to-Red/10 active:from-transparent active:to-Red/15 py-[35px] rounded-bl-3xl">
           <svg class="h-20 max-w-[20%]" viewBox="0 0 65 107" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -214,7 +226,9 @@ <h1 class="uppercase text-sm text-Brown mt-6">Radio Player Romania
     <option value="https://urbanfm.ro:8777/live">Urban FM</option>
     <option value="https://live.rockfm.ro/rockfm.aacp">Rock FM</option>
     <option value="https://live.guerrillaradio.ro:8443/guerrilla.aac">Radio Guerrilla</option>
-    <option value="https://asculta.nationalfm.ro:9102/nfm2">National FM</option>
+    <!-- data-no-cors: serverul nu trimite Access-Control-Allow-Origin, deci
+         se încarcă opac (fără crossorigin) — altfel nu ar porni deloc. -->
+    <option value="https://asculta.nationalfm.ro:9102/nfm2" data-no-cors>National FM</option>
     <option value="https://edge126.rcs-rds.ro/profm/dancefm.mp3?1741969012508">Dance FM</option>
     <option value="https://live.radiovibefm.eu/8052/stream">Vibe FM</option>
     <option value="https://stream4.srr.ro:8443/romania-cultural">Radio România Cultural</option>
diff --git a/src/js/dom.ts b/src/js/dom.ts
index 1a4a099..7cca27e 100644
--- a/src/js/dom.ts
+++ b/src/js/dom.ts
@@ -17,6 +17,7 @@ export const loadingNoise = el<HTMLAudioElement>('loadingNoise');
 export const errorNoise = el<HTMLAudioElement>('errorNoise');
 export const loadingMsg = el<HTMLElement>('loadingMsg');
 export const errorMsg = el<HTMLElement>('errorMsg');
+export const visualizer = el<HTMLElement>('visualizer');
 
 export const prevButton = el<HTMLButtonElement>('prevButton');
 export const playButton = el<HTMLButtonElement>('playButton');
diff --git a/src/js/main.ts b/src/js/main.ts
index 83d59a4..23553e1 100644
--- a/src/js/main.ts
+++ b/src/js/main.ts
@@ -8,6 +8,7 @@ import {
   radioSelect, player, loadingNoise, errorNoise, loadingMsg, errorMsg,
   prevButton, playButton, pauseButton, stopButton, nextButton, logoButton,
 } from './dom';
+import { setVisualizerMode, warmUpVisualizer } from './visualizer';
 import { LABELS } from './labels';
 import { precacheStatusImages } from './cloudinary';
 import { getStoredStationIndex, saveLastIndex } from './storage';
@@ -67,6 +68,7 @@ function warmUpFeedbackSounds() {
   preloadAudioBlobs();
   loadingNoiseInstance.warmUp();
   errorNoiseInstance.warmUp();
+  warmUpVisualizer();
 }
 
 // --- Playback control buttons ---
@@ -110,7 +112,14 @@ const core = createRadioCore({
   setSelectedIndex: (i) => { radioSelect.selectedIndex = i; },
   playerPlay:       () => player.play(),
   playerPause:      () => player.pause(),
-  playerSetSrc:     (url) => { player.src = url; },
+  playerSetSrc:     (url) => {
+    // CORS-mode loads keep the visualizer's captureStream un-muted; stations
+    // that send no CORS headers (data-no-cors) load the classic opaque way —
+    // they still play, their bars just use the CSS fallback animation.
+    const station = Array.from(radioSelect.options).find(o => o.value === url);
+    player.crossOrigin = station?.dataset.noCors !== undefined ? null : 'anonymous';
+    player.src = url;
+  },
   playerLoad:       () => player.load(),
   playerCurrentTime: () => player.currentTime,
   loadingSound:     loadingNoiseInstance,
@@ -118,6 +127,7 @@ const core = createRadioCore({
   showButton,
   setLoadingMsg:    (v) => loadingMsg.classList.toggle('invisible', !v),
   setErrorMsg:      (v) => errorMsg.classList.toggle('invisible', !v),
+  setVisualizer:    setVisualizerMode,
   updateMediaSession: (s) => {
     updateMediaSession(s);
     maybeReloadForPendingServiceWorkerUpdate(s);
diff --git a/src/js/radioCore.test.ts b/src/js/radioCore.test.ts
index 30b793a..7651533 100644
--- a/src/js/radioCore.test.ts
+++ b/src/js/radioCore.test.ts
@@ -6,6 +6,7 @@ import {
   isErrorLike,
   isFeedbackAudible,
   playbackStateFor,
+  vizModeFor,
   LOADING_TIMEOUT_MS,
   RETRY_DELAY_MS,
   RECOVERY_DELAY_MS,
@@ -29,6 +30,7 @@ function makeDeps(overrides: Partial<RadioDeps> = {}) {
     errorSound: [] as string[],
     loadingMsg: [] as boolean[],
     errorMsg: [] as boolean[],
+    visualizer: [] as string[],
     mediaSession: [] as string[],
     playerPlay: [] as string[],
     playerPause: [] as string[],
@@ -74,6 +76,7 @@ function makeDeps(overrides: Partial<RadioDeps> = {}) {
     showButton: (which: string) => calls.showButton.push(which),
     setLoadingMsg: (v: boolean) => calls.loadingMsg.push(v),
     setErrorMsg: (v: boolean) => calls.errorMsg.push(v),
+    setVisualizer: (m: string) => calls.visualizer.push(m),
     updateMediaSession: (s: string) => calls.mediaSession.push(s),
     saveLastIndex: (i: number) => calls.savedIndex.push(i),
     setTimeout: vi.fn((fn: () => void, ms: number) => {
@@ -169,6 +172,7 @@ describe('side-effects per state', () => {
     expect(calls.showButton.at(-1)).toBe('play');
     expect(calls.loadingMsg.at(-1)).toBe(false);
     expect(calls.errorMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('off');
   });
 
   it('loading: stop button, loading sound, loading message', () => {
@@ -181,6 +185,7 @@ describe('side-effects per state', () => {
     expect(calls.loadingSound).toContain('play');
     expect(calls.loadingMsg.at(-1)).toBe(true);
     expect(calls.errorMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('loading');
   });
 
   it('playing: pause button, sounds stopped, no messages', async () => {
@@ -196,6 +201,7 @@ describe('side-effects per state', () => {
     expect(calls.errorSound.at(-1)).toBe('stop');
     expect(calls.loadingMsg.at(-1)).toBe(false);
     expect(calls.errorMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('playing');
   });
 
   it('paused: play button, sounds stopped', async () => {
@@ -209,6 +215,7 @@ describe('side-effects per state', () => {
     expect(core.getState()).toBe('paused');
     expect(calls.showButton.at(-1)).toBe('play');
     expect(calls.loadingMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('off');
   });
 
   it('retrying: stop button, loading sound keeps playing', async () => {
@@ -224,6 +231,7 @@ describe('side-effects per state', () => {
     // loading sound was NOT stopped — last loading action is 'play' from loading state
     expect(calls.loadingSound.at(-1)).toBe('play');
     expect(calls.errorMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('loading');
   });
 
   it('error: stop button, error sound, error message', async () => {
@@ -242,6 +250,7 @@ describe('side-effects per state', () => {
     expect(calls.errorSound.at(-1)).toBe('play');
     expect(calls.errorMsg.at(-1)).toBe(true);
     expect(calls.loadingMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('error');
   });
 
   it('stopRadio → idle: play button, all sounds stopped', () => {
@@ -257,6 +266,7 @@ describe('side-effects per state', () => {
     expect(calls.errorSound.at(-1)).toBe('stop');
     expect(calls.loadingMsg.at(-1)).toBe(false);
     expect(calls.errorMsg.at(-1)).toBe(false);
+    expect(calls.visualizer.at(-1)).toBe('off');
   });
 });
 
@@ -1478,20 +1488,28 @@ describe('state classification predicates', () => {
   it('classifies every state exactly as STATE_FX presents it', () => {
     const table: Record<RadioState, {
       loadingLike: boolean; errorLike: boolean; playback: 'playing' | 'paused' | 'none';
+      viz: 'playing' | 'loading' | 'error' | 'off';
     }> = {
-      idle:       { loadingLike: false, errorLike: false, playback: 'none' },
-      loading:    { loadingLike: true,  errorLike: false, playback: 'playing' },
-      playing:    { loadingLike: false, errorLike: false, playback: 'playing' },
-      paused:     { loadingLike: false, errorLike: false, playback: 'paused' },
-      retrying:   { loadingLike: true,  errorLike: false, playback: 'playing' },
-      error:      { loadingLike: false, errorLike: true,  playback: 'playing' },
-      recovering: { loadingLike: false, errorLike: true,  playback: 'playing' },
+      idle:       { loadingLike: false, errorLike: false, playback: 'none',    viz: 'off' },
+      loading:    { loadingLike: true,  errorLike: false, playback: 'playing', viz: 'loading' },
+      playing:    { loadingLike: false, errorLike: false, playback: 'playing', viz: 'playing' },
+      paused:     { loadingLike: false, errorLike: false, playback: 'paused',  viz: 'off' },
+      retrying:   { loadingLike: true,  errorLike: false, playback: 'playing', viz: 'loading' },
+      error:      { loadingLike: false, errorLike: true,  playback: 'playing', viz: 'error' },
+      recovering: { loadingLike: false, errorLike: true,  playback: 'playing', viz: 'error' },
     };
     for (const [state, expected] of Object.entries(table) as Array<[RadioState, typeof table[RadioState]]>) {
       expect(isLoadingLike(state), `isLoadingLike(${state})`).toBe(expected.loadingLike);
       expect(isErrorLike(state), `isErrorLike(${state})`).toBe(expected.errorLike);
       expect(isFeedbackAudible(state), `isFeedbackAudible(${state})`).toBe(expected.loadingLike || expected.errorLike);
       expect(playbackStateFor(state), `playbackStateFor(${state})`).toBe(expected.playback);
+      expect(vizModeFor(state), `vizModeFor(${state})`).toBe(expected.viz);
+    }
+    // The visualizer invariant mirrors "always audible": bars move exactly
+    // when something plays, never in silence.
+    for (const state of Object.keys(table) as RadioState[]) {
+      expect(vizModeFor(state) !== 'off', `viz moves in ${state}`)
+        .toBe(playbackStateFor(state) === 'playing');
     }
   });
 });
diff --git a/src/js/radioCore.ts b/src/js/radioCore.ts
index 52c9e39..580a233 100644
--- a/src/js/radioCore.ts
+++ b/src/js/radioCore.ts
@@ -24,12 +24,13 @@ type ActorOptions = NonNullable<Parameters<typeof createActor>[1]>;
 
 // Shared domain types & timing constants live with the machine; re-exported
 // here so the rest of the app keeps a single import surface.
-export type { RadioState, FeedbackSound, RadioDeps } from './radioMachine';
+export type { RadioState, FeedbackSound, RadioDeps, VizMode } from './radioMachine';
 export {
   isLoadingLike,
   isErrorLike,
   isFeedbackAudible,
   playbackStateFor,
+  vizModeFor,
 } from './radioMachine';
 export {
   MAX_RETRIES,
diff --git a/src/js/radioMachine.ts b/src/js/radioMachine.ts
index b4176b5..ab2e89f 100644
--- a/src/js/radioMachine.ts
+++ b/src/js/radioMachine.ts
@@ -62,6 +62,7 @@ export interface RadioDeps {
   showButton(which: PlaybackButton): void;
   setLoadingMsg(visible: boolean): void;
   setErrorMsg(visible: boolean): void;
+  setVisualizer(mode: VizMode): void;
   updateMediaSession(state: RadioState): void;
   saveLastIndex(index: number): void;
   setInterval(fn: () => void, ms: number): TimerId;
@@ -116,6 +117,14 @@ export const isFeedbackAudible = (s: RadioState): boolean =>
 export const playbackStateFor = (s: RadioState): 'playing' | 'paused' | 'none' =>
   s === 'playing' || isFeedbackAudible(s) ? 'playing' : s === 'paused' ? 'paused' : 'none';
 
+export type VizMode = 'playing' | 'loading' | 'error' | 'off';
+
+/** Which sound the visualizer should move to. Every audible state maps to a
+ *  moving mode ('playing' = stream, otherwise the feedback tone); the bars
+ *  are 'off' exactly when the app is silent (idle/paused). */
+export const vizModeFor = (s: RadioState): VizMode =>
+  s === 'playing' ? 'playing' : isLoadingLike(s) ? 'loading' : isErrorLike(s) ? 'error' : 'off';
+
 const STATE_FX: Record<RadioState, StateFx> = {
   idle:       { button: 'play',  loading: 'stop',  error: 'stop',  loadingMsg: false, errorMsg: false },
   loading:    { button: 'stop',  loading: 'play',  error: 'stop',  loadingMsg: true,  errorMsg: false },
@@ -287,6 +296,7 @@ export function createRadioMachine(deps: RadioDeps) {
         if (fx.error === 'stop') deps.errorSound.stop();
         deps.setLoadingMsg(fx.loadingMsg);
         deps.setErrorMsg(fx.errorMsg);
+        deps.setVisualizer(vizModeFor(params.state));
         deps.updateMediaSession(params.state);
       },
 
diff --git a/src/js/visualizer.ts b/src/js/visualizer.ts
new file mode 100644
index 0000000..f553990
--- /dev/null
+++ b/src/js/visualizer.ts
@@ -0,0 +1,154 @@
+/**
+ * Sound visualizer — five bars that move on the ACTUAL audio signal.
+ *
+ * The signal is read through element.captureStream() + AnalyserNode. Unlike
+ * createMediaElementSource (the Web Audio approach reverted in 69a58f2),
+ * capturing does NOT reroute playback through the AudioContext — the <audio>
+ * elements keep playing natively, so the iOS media session and background
+ * playback stay untouched. The analyser only watches a copy of the signal.
+ *
+ * All three app sounds (stream, loading tone, error tone) feed one analyser:
+ * whatever is audible is what the bars show, no per-source switching.
+ *
+ * Where the real signal is unavailable the bars fall back to the declarative
+ * CSS animation (input.css, gated by :not(.viz-live)):
+ *   - browsers without captureStream (Safari/iOS, Firefox);
+ *   - stations that don't send CORS headers (opaque data captures as
+ *     silence — marked data-no-cors on their <option>);
+ *   - before the first user gesture (AudioContext still suspended).
+ * The live/CSS switch is a short zero-signal watchdog, same spirit as the
+ * playback watchdog in radioMachine.
+ */
+
+import { visualizer, player, loadingNoise, errorNoise } from './dom';
+import type { VizMode } from './radioCore';
+
+const BAR_SCALE_MIN = 0.12;
+// ~0.75s of exact digital silence at 60fps ⇒ no usable signal, use CSS
+const SILENT_FRAMES_TO_FALLBACK = 45;
+// While silent, periodically re-capture: a src swap ends the captured track
+const RECONNECT_EVERY_FRAMES = 60;
+
+// One frequency band per bar, bass → highs (bin ranges for fftSize 512
+// at 44.1/48kHz ≈ 86–94Hz per bin), roughly log-spaced like an equalizer.
+const BANDS: ReadonlyArray<readonly [number, number]> = [
+  [0, 2], [3, 7], [8, 20], [21, 55], [56, 140],
+];
+// Radio streams are loudness-compressed: absolute levels sit near the top and
+// barely move. Each band is therefore normalized against its own recent peak
+// (a slowly decaying AGC), so the bars ride the beat, not the loudness war.
+const PEAK_DECAY = 0.995; // per frame ≈ halves in ~2.3s
+// Keep quiet-but-real sounds visible (the low loading tone reads ~0.02-0.06)
+// while exact digital silence still shows as resting bars.
+const PEAK_FLOOR = 0.02;
+const bandPeaks = BANDS.map(() => PEAK_FLOOR);
+
+const elements: HTMLMediaElement[] = [player, loadingNoise, errorNoise];
+const bars = [...visualizer.querySelectorAll<HTMLElement>('.viz-bar')];
+
+let ctx: AudioContext | null = null;
+let analyser: AnalyserNode | null = null;
+let freqData: Uint8Array<ArrayBuffer> | null = null;
+const sources = new Map<HTMLMediaElement, MediaStreamAudioSourceNode>();
+
+let rafId: number | null = null;
+let silentFrames = 0;
+
+const isSupported = () =>
+  typeof AudioContext !== 'undefined' &&
+  typeof (HTMLMediaElement.prototype as { captureStream?: unknown }).captureStream === 'function';
+
+const prefersReducedMotion = () =>
+  typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+const captureStreamOf = (el: HTMLMediaElement): MediaStream =>
+  (el as HTMLMediaElement & { captureStream(): MediaStream }).captureStream();
+
+/** (Re)tap one element. A new capture is needed after src changes: the old
+ *  captured track ends and would read as permanent silence. */
+function connect(el: HTMLMediaElement) {
+  if (!ctx || !analyser) return;
+  const stream = captureStreamOf(el);
+  if (stream.getAudioTracks().length === 0) return; // nothing to tap yet
+  sources.get(el)?.disconnect();
+  const node = ctx.createMediaStreamSource(stream);
+  node.connect(analyser);
+  sources.set(el, node);
+}
+
+function connectAll() {
+  for (const el of elements) connect(el);
+}
+
+/** Real data drives the bars ⇔ .viz-live; otherwise CSS animations do. */
+function setLive(live: boolean) {
+  if (visualizer.classList.contains('viz-live') === live) return;
+  visualizer.classList.toggle('viz-live', live);
+  if (!live) for (const bar of bars) bar.style.transform = '';
+}
+
+function tick() {
+  rafId = requestAnimationFrame(tick);
+  if (!analyser || !freqData) return;
+  analyser.getByteFrequencyData(freqData);
+
+  let total = 0;
+  const scales: number[] = [];
+  BANDS.forEach(([lo, hi], i) => {
+    let sum = 0;
+    for (let bin = lo; bin <= hi; bin++) sum += freqData![bin];
+    const value = sum / ((hi - lo + 1) * 255);
+    total += value;
+    bandPeaks[i] = Math.max(value, bandPeaks[i] * PEAK_DECAY, PEAK_FLOOR);
+    const norm = Math.min(1, value / bandPeaks[i]) ** 1.5; // punchier beats
+    scales.push(BAR_SCALE_MIN + norm * (1 - BAR_SCALE_MIN));
+  });
+
+  if (total === 0) {
+    silentFrames++;
+    if (silentFrames % RECONNECT_EVERY_FRAMES === 30) connectAll();
+    if (silentFrames >= SILENT_FRAMES_TO_FALLBACK) setLive(false);
+    return;
+  }
+
+  silentFrames = 0;
+  setLive(true);
+  bars.forEach((bar, i) => { bar.style.transform = `scaleY(${scales[i].toFixed(3)})`; });
+}
+
+function stopLoop() {
+  if (rafId !== null) cancelAnimationFrame(rafId);
+  rafId = null;
+  silentFrames = 0;
+  setLive(false);
+}
+
+/** Called from user gestures — the only place an AudioContext may start. */
+export function warmUpVisualizer() {
+  if (!isSupported() || prefersReducedMotion()) return;
+  if (!ctx) {
+    ctx = new AudioContext();
+    analyser = ctx.createAnalyser();
+    analyser.fftSize = 512;
+    // Snappy enough to show the beat, smooth enough not to flicker; the wide
+    // dB window keeps compressed radio audio from clipping at the top.
+    analyser.smoothingTimeConstant = 0.6;
+    analyser.minDecibels = -70;
+    analyser.maxDecibels = -10;
+    freqData = new Uint8Array(analyser.frequencyBinCount);
+  }
+  if (ctx.state === 'suspended') void ctx.resume().catch(() => { /* stays CSS */ });
+  connectAll();
+}
+
+/** The state machine's declarative visualizer effect (applyFx). */
+export function setVisualizerMode(mode: VizMode) {
+  visualizer.dataset.viz = mode;
+  if (mode === 'off') {
+    stopLoop();
+    return;
+  }
+  if (!ctx || prefersReducedMotion()) return; // CSS animation handles it
+  connectAll(); // fresh capture: station/tone src may have just changed
+  if (rafId === null) tick();
+}

From 18b0be3c8abe742394e01f7108c5c1fdd115d3a1 Mon Sep 17 00:00:00 2001
From: Adrian Florescu <florescuadyz@yahoo.com>
Date: Tue, 7 Jul 2026 19:23:34 +0300
Subject: [PATCH 2/2] Widen the visualizer: 48 bars across the card, above the
 poster

More frequency resolution so the motion visibly tracks the music: one
log-spaced band per bar (computed, at least one bin each), bars generated
by visualizer.ts instead of hand-written spans. The strip now spans the
full main card width between the logo and the poster; the CSS fallback
rhythm patterns repeat across the row via :nth-child(5n+k).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/css/input.css    | 38 ++++++++++++++++++++------------------
 src/index.html       | 20 +++++++-------------
 src/js/visualizer.ts | 34 +++++++++++++++++++++++++++-------
 3 files changed, 54 insertions(+), 38 deletions(-)

diff --git a/src/css/input.css b/src/css/input.css
index fb42264..3b3d654 100644
--- a/src/css/input.css
+++ b/src/css/input.css
@@ -39,17 +39,19 @@
 }
 
 /* --- Sound visualizer -------------------------------------------------
-   Five bars under #visualizer. The state machine sets data-viz (which sound
-   is audible); visualizer.ts adds .viz-live while the REAL audio signal
-   drives the bars (captureStream + analyser, 60fps inline transforms).
-   The keyframe animations below are the declarative fallback for when no
-   signal is readable — no captureStream support (Safari/iOS, Firefox),
-   data-no-cors stations, AudioContext not yet unlocked. */
+   A full-width row of bars under #visualizer (spans generated by
+   visualizer.ts). The state machine sets data-viz (which sound is audible);
+   visualizer.ts adds .viz-live while the REAL audio signal drives the bars
+   (captureStream + analyser, 60fps inline transforms). The keyframe
+   animations below are the declarative fallback for when no signal is
+   readable — no captureStream support (Safari/iOS, Firefox), data-no-cors
+   stations, AudioContext not yet unlocked. The 5-bar rhythm patterns repeat
+   across the row via :nth-child(5n+k). */
 @layer components {
   .viz-bar {
-    width: 5px;
-    height: 20px;
-    margin: 0 3px;
+    flex: 1 1 0%;
+    min-width: 2px;
+    height: 100%;
     border-radius: 999px;
     background-color: var(--color-Red);
     transform: scaleY(0.12);
@@ -71,11 +73,11 @@
   [data-viz="playing"]:not(.viz-live) .viz-bar {
     animation: viz-play 1s ease-in-out infinite;
   }
-  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(1) { animation-duration: 0.9s;  animation-delay: -0.3s; }
-  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(2) { animation-duration: 0.7s;  animation-delay: -0.8s; }
-  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(3) { animation-duration: 1.15s; animation-delay: -0.1s; }
-  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(4) { animation-duration: 0.8s;  animation-delay: -0.5s; }
-  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5) { animation-duration: 1.05s; animation-delay: -0.65s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5n+1) { animation-duration: 0.9s;  animation-delay: -0.3s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5n+2) { animation-duration: 0.7s;  animation-delay: -0.8s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5n+3) { animation-duration: 1.15s; animation-delay: -0.1s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5n+4) { animation-duration: 0.8s;  animation-delay: -0.5s; }
+  [data-viz="playing"]:not(.viz-live) .viz-bar:nth-child(5n)   { animation-duration: 1.05s; animation-delay: -0.65s; }
 
   /* Loading tone: brown like the loading message */
   [data-viz="loading"] .viz-bar {
@@ -84,10 +86,10 @@
   [data-viz="loading"]:not(.viz-live) .viz-bar {
     animation: viz-load 1.6s ease-in-out infinite;
   }
-  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(2) { animation-delay: 0.15s; }
-  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(3) { animation-delay: 0.3s; }
-  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(4) { animation-delay: 0.45s; }
-  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5) { animation-delay: 0.6s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5n+2) { animation-delay: 0.15s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5n+3) { animation-delay: 0.3s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5n+4) { animation-delay: 0.45s; }
+  [data-viz="loading"]:not(.viz-live) .viz-bar:nth-child(5n)   { animation-delay: 0.6s; }
 
   /* Error tone: red like the error message; fallback pulses all bars together */
   [data-viz="error"]:not(.viz-live) .viz-bar {
diff --git a/src/index.html b/src/index.html
index 47a2e7d..f791b5a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -85,6 +85,12 @@ <h1 class="uppercase text-sm text-Brown mt-6">Radio Player Romania
     <!-- Gradient overlay -->
     <div class="absolute top-0 left-0 w-[104%] h-[100%] -m-[2%] bg-gradient-to-b from-Bg to-transparent"></div>
 
+    <!-- Sound visualizer: mirrors whatever is audible right now (radio
+         stream, loading tone or error tone) — still while the app is silent.
+         The state machine drives data-viz; visualizer.ts fills in the bars
+         and moves them on the real audio signal (CSS animation as fallback). -->
+    <div id="visualizer" data-viz="off" role="img" aria-label="Vizualizator sunet"
+      class="relative z-10 mb-2 flex h-8 w-full items-end justify-center gap-[2px] px-6"></div>
 
     <div>
 
@@ -134,22 +140,10 @@ <h1 class="uppercase text-sm text-Brown mt-6">Radio Player Romania
       </button>
 
 
-      <!-- Sound visualizer: mirrors whatever is audible right now (radio
-           stream, loading tone or error tone) — still while the app is silent.
-           Driven by the state machine (data-viz), animated purely in CSS. -->
-      <div id="visualizer" data-viz="off" role="img" aria-label="Vizualizator sunet"
-        class="relative z-10 mx-auto mt-5 flex h-5 items-end justify-center">
-        <span class="viz-bar"></span>
-        <span class="viz-bar"></span>
-        <span class="viz-bar"></span>
-        <span class="viz-bar"></span>
-        <span class="viz-bar"></span>
-      </div>
-
       <!-- PlayerControls -->
       <!-- Button with move down a bit on press-->
 
-      <div class="flex items-center justify-center mt-[15px] p-[2px] relative z-10">
+      <div class="flex items-center justify-center mt-[35px] p-[2px] relative z-10">
         <button id="prevButton" aria-label="Postul anterior"
           class="stroke-Red hover:stroke-Brown active:stroke-Brown w-1/3 flex justify-center bg-gradient-to-b hover:from-transparent hover:to-Red/10 active:from-transparent active:to-Red/15 py-[35px] rounded-bl-3xl">
           <svg class="h-20 max-w-[20%]" viewBox="0 0 65 107" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/js/visualizer.ts b/src/js/visualizer.ts
index f553990..4b2fab8 100644
--- a/src/js/visualizer.ts
+++ b/src/js/visualizer.ts
@@ -1,5 +1,5 @@
 /**
- * Sound visualizer — five bars that move on the ACTUAL audio signal.
+ * Sound visualizer — a row of bars that move on the ACTUAL audio signal.
  *
  * The signal is read through element.captureStream() + AnalyserNode. Unlike
  * createMediaElementSource (the Web Audio approach reverted in 69a58f2),
@@ -29,11 +29,23 @@ const SILENT_FRAMES_TO_FALLBACK = 45;
 // While silent, periodically re-capture: a src swap ends the captured track
 const RECONNECT_EVERY_FRAMES = 60;
 
-// One frequency band per bar, bass → highs (bin ranges for fftSize 512
-// at 44.1/48kHz ≈ 86–94Hz per bin), roughly log-spaced like an equalizer.
-const BANDS: ReadonlyArray<readonly [number, number]> = [
-  [0, 2], [3, 7], [8, 20], [21, 55], [56, 140],
-];
+const BAR_COUNT = 48;
+
+// One frequency band per bar, bass → highs, log-spaced like an equalizer.
+// fftSize 512 → 256 bins ≈ 86–94Hz each; radio content dies out above
+// ~16kHz, so the bars spread over bins [0, 170] and every band gets at
+// least one bin.
+const MAX_BIN = 170;
+const BANDS: ReadonlyArray<readonly [number, number]> = (() => {
+  const bands: Array<readonly [number, number]> = [];
+  let lo = 0;
+  for (let i = 0; i < BAR_COUNT; i++) {
+    const hi = Math.max(lo, Math.round(MAX_BIN ** ((i + 1) / BAR_COUNT)) - 1);
+    bands.push([lo, hi]);
+    lo = hi + 1;
+  }
+  return bands;
+})();
 // Radio streams are loudness-compressed: absolute levels sit near the top and
 // barely move. Each band is therefore normalized against its own recent peak
 // (a slowly decaying AGC), so the bars ride the beat, not the loudness war.
@@ -44,7 +56,15 @@ const PEAK_FLOOR = 0.02;
 const bandPeaks = BANDS.map(() => PEAK_FLOOR);
 
 const elements: HTMLMediaElement[] = [player, loadingNoise, errorNoise];
-const bars = [...visualizer.querySelectorAll<HTMLElement>('.viz-bar')];
+
+// The bars are generated, not hand-written markup — their count must match
+// BANDS, and 48 spans in index.html would drift.
+const bars: HTMLElement[] = Array.from({ length: BAR_COUNT }, () => {
+  const bar = document.createElement('span');
+  bar.className = 'viz-bar';
+  return bar;
+});
+visualizer.replaceChildren(...bars);
 
 let ctx: AudioContext | null = null;
 let analyser: AnalyserNode | null = null;