From f5feca7dfabe2dcd7830528679c88e0965a93759 Mon Sep 17 00:00:00 2001
From: David Keane <david.keane.1974@gmail.com>
Date: Fri, 29 May 2026 23:42:09 +0100
Subject: [PATCH] =?UTF-8?q?feat(0.4.0):=20now-playing=20indicator=20?=
 =?UTF-8?q?=E2=80=94=20dancing=20bars=20+=20Web=20Audio=20visualizer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 CHANGELOG.md             |  28 ++++++++++
 assets/css/radio.css     |  67 ++++++++++++++++++++++
 assets/js/radio.js       | 117 +++++++++++++++++++++++++++++++++++++++
 inc/about.php            |   6 +-
 inc/admin-page.php       |   6 +-
 inc/dashboard-widget.php |   6 +-
 radio.php                |   4 +-
 7 files changed, 229 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 06767dd..1427a83 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,34 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ---
 
+## [0.4.0] — 2026-05-29 — Now-playing indicator: dancing bars + Web Audio visualizer
+
+A small visual that instantly says *"this is playing right now."* Two layers — a reliable CSS-only indicator that always works, and a progressive Web Audio upgrade that draws actual frequency data when the browser allows.
+
+### Added — dancing bars (always on, CSS only)
+- Four tiny vertical bars next to the "Now Playing" label that pulse with a staggered `@keyframes` animation while the audio is playing, settling to a low static state when paused. Pure CSS — no JS dependency, no audio analysis.
+- Bars use `var(--wp-admin-theme-color)` so they tint to whichever WP admin colour scheme the user has chosen.
+- Driven by a single `.is-playing` class toggled on the `.radio-player` surface from the existing `play` / `pause` / `error` audio handlers.
+
+### Added — Web Audio frequency visualizer (progressive upgrade)
+- On first `play`, `tryVisualizer` builds an `AudioContext` + `AnalyserNode` chain on the `<audio>` element and starts drawing live frequency bars on a `<canvas>` next to "Now Playing."
+- `<audio>` now carries `crossorigin="anonymous"` so the Web Audio analyser can actually read the stream data (SomaFM serves the CORS headers).
+- **Graceful fallback:** if `AudioContext` isn't available, or `createMediaElementSource` throws, or the analyser returns all-zeros for 2 s (CORS silently blocking), the visualizer state flips to `cors-blocked` / `init-failed` / `no-webaudio` and the CSS dancing bars remain — the plugin never loses its indicator.
+- Canvas is sized to its CSS box × `devicePixelRatio` so it stays crisp on retina screens.
+
+### State machine on `player._vizState`
+| Value | Meaning |
+|---|---|
+| _undefined_ | not yet attempted |
+| `no-webaudio` | browser lacks `AudioContext` |
+| `init-failed` | `createMediaElementSource` threw |
+| `cors-blocked` | analyser returned zeros for >2 s |
+| `ok` | live frequency data flowing → canvas shown, bars hidden |
+
+**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (added `.radio-player__indicator` with `.radio-player__bars` + `<canvas data-radio-viz>`, plus `crossorigin="anonymous"` on the `<audio>`), `assets/css/radio.css` (indicator container, bars + `radio-bars-dance` keyframes, canvas size), `assets/js/radio.js` (`tryVisualizer` / `startVizLoop` / `stopVizLoop`, `play/pause/error` handlers toggle `is-playing` class and drive the loop), `inc/about.php` (history entry).
+
+---
+
 ## [0.3.2] — 2026-05-29 — Play-button glyph baseline fix
 
 The dashicon used for the play/pause icon was rendering visibly below the button text baseline — the dashicon font sits the glyph low inside its own box, and even with `inline-flex` centering the result looked like the symbol was on a separate row from the word "Play".
diff --git a/assets/css/radio.css b/assets/css/radio.css
index 7bff6c5..328adac 100644
--- a/assets/css/radio.css
+++ b/assets/css/radio.css
@@ -30,6 +30,73 @@
     margin-right: 4px;
 }
 
+/* ──────────────────────────────────────────────────────────────────
+ * Now-playing indicator — CSS dancing bars (always present) +
+ * optional Web Audio frequency visualizer (canvas, progressive
+ * upgrade). The JS toggles a `.is-playing` class on the parent
+ * `.radio-player` to drive the dance; when the visualizer is
+ * successfully wired, it hides the bars and reveals the canvas.
+ * ─────────────────────────────────────────────────────────────── */
+
+.radio-player__indicator {
+    display: inline-flex;
+    align-items: flex-end;
+    height: 14px;
+    min-width: 18px;
+    margin-right: 6px;
+    vertical-align: middle;
+    overflow: hidden;
+}
+
+.radio-player__bars {
+    display: inline-flex;
+    align-items: flex-end;
+    height: 100%;
+    width: 18px;
+    gap: 2px;
+}
+
+.radio-player__bars span {
+    display: inline-block;
+    width: 2px;
+    height: 100%;
+    background: var(--wp-admin-theme-color, #2271b1);
+    border-radius: 1px;
+    transform-origin: bottom;
+    transform: scaleY(0.25);
+    transition: transform 0.2s ease;
+    opacity: 0.65;
+}
+
+/* When playing, each bar dances with a staggered delay so the row
+   has a lifelike, slightly out-of-phase pulse rather than uniform
+   thumping. ~0.85s loop keeps it lively without being twitchy. */
+.radio-player.is-playing .radio-player__bars span {
+    animation: radio-bars-dance 0.85s ease-in-out infinite;
+    opacity: 1;
+}
+.radio-player.is-playing .radio-player__bars span:nth-child(1) { animation-delay: 0s;   }
+.radio-player.is-playing .radio-player__bars span:nth-child(2) { animation-delay: 0.18s; }
+.radio-player.is-playing .radio-player__bars span:nth-child(3) { animation-delay: 0.36s; }
+.radio-player.is-playing .radio-player__bars span:nth-child(4) { animation-delay: 0.09s; }
+
+@keyframes radio-bars-dance {
+    0%, 100% { transform: scaleY(0.3); }
+    20%      { transform: scaleY(0.9); }
+    40%      { transform: scaleY(0.5); }
+    60%      { transform: scaleY(1);   }
+    80%      { transform: scaleY(0.65); }
+}
+
+/* Web Audio canvas — wider than the CSS bars so the live frequency
+   data has room to breathe. JS swaps display when the visualizer
+   confirms it's receiving real (non-zero) data. */
+.radio-player__viz {
+    display: block;
+    height: 14px;
+    width: 60px;
+}
+
 .radio-player__station-name {
     font-size: 14px;
     font-weight: 600;
diff --git a/assets/js/radio.js b/assets/js/radio.js
index ca7a9cc..d9f4f1b 100644
--- a/assets/js/radio.js
+++ b/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); });
diff --git a/inc/about.php b/inc/about.php
index 989447d..d8830a9 100644
--- a/inc/about.php
+++ b/inc/about.php
@@ -48,7 +48,11 @@ function radio_render_about_page() {
                 <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
                 <ul>
                     <li>
-                        <span class="ver">v0.3.2</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
+                        <span class="ver">v0.4.0</span> &mdash; 29 May 2026 <span class="latest">latest</span><br>
+                        <?php esc_html_e( 'Now-playing visual indicator. Four tiny dancing bars next to "Now Playing" pulse while the audio is playing (pure CSS, always works). On top of that, a Web Audio frequency visualizer tries to draw live frequency bars on a small canvas — if the browser allows it and the stream is CORS-friendly it kicks in automatically; if not, the CSS bars stay and nothing breaks.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.3.2</span> &mdash; 29 May 2026<br>
                         <?php esc_html_e( 'Play-button glyph baseline fix. The dashicon used for play/pause was rendering below the button text. Swapped to a plain Unicode glyph (▶ / ‖) that sits on the text baseline like any other character.', 'radio' ); ?>
                     </li>
                     <li>
diff --git a/inc/admin-page.php b/inc/admin-page.php
index 1c3a930..4909054 100644
--- a/inc/admin-page.php
+++ b/inc/admin-page.php
@@ -41,6 +41,10 @@ function radio_render_main_page() {
                 <div class="radio-player" data-radio-surface="main">
 
                     <div class="radio-player__now">
+                        <span class="radio-player__indicator" aria-hidden="true">
+                            <span class="radio-player__bars"><span></span><span></span><span></span><span></span></span>
+                            <canvas class="radio-player__viz" data-radio-viz hidden></canvas>
+                        </span>
                         <span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
                         <span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
                         <span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
@@ -82,7 +86,7 @@ function radio_render_main_page() {
 
                     <div class="radio-player__error" data-radio-error hidden></div>
 
-                    <audio data-radio-audio preload="none"></audio>
+                    <audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
                 </div>
             </div>
         </div>
diff --git a/inc/dashboard-widget.php b/inc/dashboard-widget.php
index 7e0c02a..0965456 100644
--- a/inc/dashboard-widget.php
+++ b/inc/dashboard-widget.php
@@ -34,6 +34,10 @@ function radio_render_dashboard_widget() {
     <div class="radio-player" data-radio-surface="widget">
 
         <div class="radio-player__now">
+            <span class="radio-player__indicator" aria-hidden="true">
+                <span class="radio-player__bars"><span></span><span></span><span></span><span></span></span>
+                <canvas class="radio-player__viz" data-radio-viz hidden></canvas>
+            </span>
             <span class="radio-player__label"><?php esc_html_e( 'Now Playing', 'radio' ); ?></span>
             <span class="radio-player__station-name" data-radio-name><?php echo esc_html( $station['name'] ); ?></span>
             <span class="radio-player__station-genre" data-radio-genre><?php echo esc_html( $station['genre'] ); ?></span>
@@ -75,7 +79,7 @@ function radio_render_dashboard_widget() {
 
         <div class="radio-player__error" data-radio-error hidden></div>
 
-        <audio data-radio-audio preload="none"></audio>
+        <audio data-radio-audio preload="none" crossorigin="anonymous"></audio>
 
         <p class="radio-player__credit">
             <?php
diff --git a/radio.php b/radio.php
index d80ffff..2992659 100644
--- a/radio.php
+++ b/radio.php
@@ -5,7 +5,7 @@
  * Plugin Name: Radio
  * Plugin URI:  https://icanhelp.ie/radio
  * Description: A small, focused, free radio player for your WordPress admin. 44 SomaFM stations grouped by 10 genres — ambient, electronic, lounge, rock, metal, jazz, world, reggae, holiday, specials. Plays via HTML5 audio; volume + station choice persist per-user.
- * Version:     0.3.2
+ * Version:     0.4.0
  * Requires at least: 5.0
  * Requires PHP: 7.4
  * Author:      David Keane
@@ -20,7 +20,7 @@
 if ( ! defined( 'ABSPATH' ) ) { exit; }
 
 // Plugin coordinates.
-if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.3.2' ); }
+if ( ! defined( 'RADIO_VERSION' ) )   { define( 'RADIO_VERSION',   '0.4.0' ); }
 if ( ! defined( 'RADIO_FILE' ) )      { define( 'RADIO_FILE',      __FILE__ ); }
 if ( ! defined( 'RADIO_PATH' ) )      { define( 'RADIO_PATH',      plugin_dir_path( __FILE__ ) ); }
 if ( ! defined( 'RADIO_URL' ) )       { define( 'RADIO_URL',       plugin_dir_url( __FILE__ ) ); }