feat(0.4.0): now-playing indicator — dancing bars + Web Audio visualizer

Two-layer "this is playing right now" visual:

(1) CSS dancing bars — four tiny vertical bars next to the "Now Playing"
    label, staggered `@keyframes` pulse while audio plays. Pure CSS, no
    JS dependency, tints to the user's WP admin colour scheme via
    var(--wp-admin-theme-color). Driven by a single `.is-playing` class
    on `.radio-player` toggled from the existing play/pause/error
    handlers. Always works.

(2) Web Audio frequency visualizer (progressive upgrade) — on first play,
    builds AudioContext + AnalyserNode + canvas drawing pipeline. When
    the analyser starts returning real (non-zero) data, hides the bars
    and shows the canvas with live frequency bars. Falls back to bars
    if AudioContext is unavailable, createMediaElementSource throws, or
    the analyser returns all-zeros for >2s (CORS silently blocking).
    State machine on player._vizState: no-webaudio / init-failed /
    cors-blocked / ok.

`<audio>` element gained `crossorigin="anonymous"` so Web Audio can read
the stream data (SomaFM serves the CORS headers).

Files: radio.php (version), inc/admin-page.php + inc/dashboard-widget.php
(.radio-player__indicator with .radio-player__bars + canvas; crossorigin
on audio), assets/css/radio.css (indicator, bars, radio-bars-dance
keyframes, canvas size), assets/js/radio.js (tryVisualizer,
startVizLoop, stopVizLoop; play/pause/error handlers wire the loop and
toggle is-playing), inc/about.php (history entry).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

assets/js/radio.js

@@ -145,6 +145,116 @@
         if (trackEl) { trackEl.hidden = true; trackEl.textContent = ''; }
     }
 
+    /** Web Audio frequency visualizer — progressive upgrade over the CSS
+     *  dancing bars. Tries once per player surface; if CORS or browser
+     *  support blocks it, silently leaves the CSS bars in place.
+     *
+     *  State machine on player._vizState:
+     *    undefined       → not yet tried
+     *    'no-webaudio'   → browser lacks AudioContext
+     *    'init-failed'   → createMediaElementSource threw (e.g. already wired)
+     *    'cors-blocked'  → analyser returned all-zeros for >2s → CORS silently failed
+     *    'ok'            → live frequency data flowing → canvas visible, bars hidden
+     */
+    function tryVisualizer(player, audio) {
+        if (player._vizState) { return; }
+        var AudioCtx = window.AudioContext || window.webkitAudioContext;
+        if (!AudioCtx) { player._vizState = 'no-webaudio'; return; }
+        var canvas = player.querySelector('[data-radio-viz]');
+        if (!canvas) { player._vizState = 'no-canvas'; return; }
+
+        var ctx, srcNode, analyser;
+        try {
+            ctx      = new AudioCtx();
+            srcNode  = ctx.createMediaElementSource(audio);
+            analyser = ctx.createAnalyser();
+            analyser.fftSize = 64; // → 32 frequency bins, plenty for a 60px-wide canvas
+            srcNode.connect(analyser);
+            analyser.connect(ctx.destination); // KEEP audio audible
+        } catch (e) {
+            if (window.console && console.warn) { console.warn('Radio viz: init failed —', e.message || e); }
+            player._vizState = 'init-failed';
+            return;
+        }
+        if (ctx.state === 'suspended') { ctx.resume(); }
+
+        // Match the canvas backing-store to its CSS size × DPR for crispness.
+        var dpr = window.devicePixelRatio || 1;
+        canvas.width  = Math.max(1, canvas.offsetWidth  * dpr);
+        canvas.height = Math.max(1, canvas.offsetHeight * dpr);
+        var c2d   = canvas.getContext('2d');
+        var data  = new Uint8Array(analyser.frequencyBinCount);
+        var bars  = player.querySelector('.radio-player__bars');
+
+        // Stash on the player so play/pause/error handlers can drive it.
+        player._viz = {
+            ctx:      ctx,
+            analyser: analyser,
+            canvas:   canvas,
+            c2d:      c2d,
+            data:     data,
+            bars:     bars,
+            hasData:  false,
+            firstAt:  0,
+            raf:      null
+        };
+        player._vizState = 'ok'; // optimistic; flipped to 'cors-blocked' if data stays zero
+    }
+
+    function startVizLoop(player, audio) {
+        if (player._vizState !== 'ok' || !player._viz) { return; }
+        var v = player._viz;
+        if (v.raf) { return; } // already running
+        if (v.ctx.state === 'suspended') { v.ctx.resume(); }
+        v.firstAt = Date.now();
+        var color = (getComputedStyle(player).getPropertyValue('--wp-admin-theme-color') || '#2271b1').trim() || '#2271b1';
+
+        function draw() {
+            if (audio.paused) { v.raf = null; return; }
+            v.analyser.getByteFrequencyData(v.data);
+
+            // Detect whether we're getting real audio (non-zero data). Without
+            // proper CORS the analyser returns all-zeros silently.
+            if (!v.hasData) {
+                for (var j = 0; j < v.data.length; j++) {
+                    if (v.data[j] > 0) { v.hasData = true; break; }
+                }
+                if (!v.hasData && Date.now() - v.firstAt > 2000) {
+                    // Two seconds of silence from the analyser = CORS blocked.
+                    // Fall back to the CSS bars and stop trying.
+                    player._vizState = 'cors-blocked';
+                    v.canvas.hidden = true;
+                    if (v.bars) { v.bars.hidden = false; }
+                    v.raf = null;
+                    return;
+                }
+            }
+            if (v.hasData) {
+                // First frame with data → swap from CSS bars to canvas.
+                if (v.bars && !v.bars.hidden) {
+                    v.bars.hidden = true;
+                    v.canvas.hidden = false;
+                }
+                v.c2d.clearRect(0, 0, v.canvas.width, v.canvas.height);
+                v.c2d.fillStyle = color;
+                var bw = v.canvas.width / v.data.length;
+                for (var i = 0; i < v.data.length; i++) {
+                    var h = (v.data[i] / 255) * v.canvas.height;
+                    v.c2d.fillRect(i * bw, v.canvas.height - h, Math.max(1, bw - 1), h);
+                }
+            }
+            v.raf = requestAnimationFrame(draw);
+        }
+        v.raf = requestAnimationFrame(draw);
+    }
+
+    function stopVizLoop(player) {
+        if (player._viz && player._viz.raf) {
+            cancelAnimationFrame(player._viz.raf);
+            player._viz.raf = null;
+        }
+    }
+
     /** Mute toggle. Remembers the volume at mute-time so unmute restores it. */
     function bindMute(player, audio, volumeIn, volPctEl) {
         var muteBtn = player.querySelector('[data-radio-mute]');
@@ -213,15 +323,22 @@
 
         audio.addEventListener('play',  function () {
             setPlayIcon(playBtn, true);
+            player.classList.add('is-playing'); // CSS dancing-bars animation
+            tryVisualizer(player, audio);       // idempotent — only initialises once
+            startVizLoop(player, audio);        // no-op unless viz state is 'ok'
             startTrackPolling(player, findStation(stationSel.value));
         });
         audio.addEventListener('pause', function () {
             setPlayIcon(playBtn, false);
+            player.classList.remove('is-playing');
+            stopVizLoop(player);
             stopTrackPolling(player);
         });
         audio.addEventListener('error', function () {
             showError(player, cfg.strings.error || 'Stream error.');
             setPlayIcon(playBtn, false);
+            player.classList.remove('is-playing');
+            stopVizLoop(player);
             stopTrackPolling(player);
         });
         audio.addEventListener('canplay', function () { showError(player, null); });