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>

CHANGELOG.md

@@ -9,6 +9,90 @@ 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".
+
+### Fixed
+- **Play/pause icon now sits on the text baseline.** Swapped the dashicon (`dashicons-controls-play` / `dashicons-controls-pause`) for a plain Unicode glyph (▶ / ‖) which renders on the text baseline like any other character.
+- Flex container changed from `align-items: center` to `align-items: baseline` for the same reason.
+- `font-variant-emoji: text` set so platforms that might otherwise pick up a colour-emoji variant for ▶ keep it as monochrome text.
+
+**Files changed:** `radio.php` (version), `inc/admin-page.php` + `inc/dashboard-widget.php` (dashicon span → glyph span), `assets/css/radio.css` (drop the dashicon-sizing rule, add `.radio-player__play-glyph` styling, change play-button flex alignment to baseline), `assets/js/radio.js` (`setPlayIcon` now swaps glyph `textContent` instead of dashicon `className`), `inc/about.php` (history entry).
+
+---
+
+## [0.3.1] — 2026-05-29 — My Radio layout polish + drop dark-auto
+
+Quick patch after a real-screen review of the My Radio admin page. v0.3.0 added a lot of features but stretched the player to fill the full admin width and — embarrassingly — introduced a real contrast bug via the dark-auto CSS.
+
+### Fixed
+- **Dropped `@media (prefers-color-scheme: dark)` for `theme=auto`.** WordPress admin has no native dark mode, so when the OS was dark, our dark text rendered on the still-white WP postbox = unreadable. `auto` now behaves as light (matching WP's actual scheme); `dark` is still available as an explicit choice.
+- **`theme=dark` now actually reads.** The player surface goes dark (`#1d2327` background + subtle border + padding) so the light text has somewhere to sit, instead of fighting the white WP postbox.
+- **Player no longer stretches edge-to-edge.** `.radio-wrap { max-width: 880px; }` keeps the player a focused settings-page card.
+- **Intro paragraph one-line on normal widths.** Removed the `max-width: 720px` cap that was forcing the wrap.
+- **Volume slider no longer dominates the row.** Fixed width 220px (`flex: 0 0 auto`) — the percent label now sits next to the slider instead of pinned to the far right edge.
+- **Station dropdown** capped at 360px (was full-width) — typical WP form-control width.
+- **Play button icon** shrunk from 18px to 14px so the ▶ glyph sits on the button-text baseline instead of looking like a separate row.
+
+**Files changed:** `radio.php` (version), `assets/css/radio.css` (wrap width, intro, play icon, volume, station-select, dark-auto block deleted, dark-surface added), `inc/about.php` (history entry).
+
+---
+
+## [0.3.0] — 2026-05-29 — Dark theme + mute + media keys + current-track display
+
+A polish pass that closes the gaps surfaced by a UI review. Two categories: **2nd-look fixes** (things the previous release implied but didn't actually deliver) and **nice-to-haves** (small upgrades that lift the admin-player feel).
+
+### Added — features
+- **Mute toggle on the speaker icon.** The icon next to the volume slider is now a button. Click to mute (icon flips to `dashicons-controls-volumeoff`, tinted red); click again to restore the prior volume. Remembers volume across mute/unmute via `data-prev-volume`.
+- **MediaSession API integration.** OS media keys (F8/F9 on Mac, Bluetooth headphone buttons, lock-screen widget on supported platforms) now play/pause the radio. The currently-playing station name, "SomaFM" as artist, and the genre as album are exposed as `MediaMetadata` so they show on the OS overlays.
+- **Current-track display.** Polls `https://somafm.com/songs/{code}.json` every 30 seconds **while playing only** and shows the track as `♪ Title — Artist` under the station description. Best-effort: silently hidden if the endpoint is unreachable / CORS-blocked, so the plugin keeps working regardless.
+
+### Fixed — 2nd-look
+- **Dark theme is now actually wired through.** v0.2.0 saved the Theme dropdown (auto / light / dark) but had no CSS to render anything other than light. v0.3.0 adds `admin_body_class` filter → `radio-theme-{auto,light,dark}` body class → corresponding dark-palette CSS for the player + about-cards. `auto` follows the OS via `prefers-color-scheme: dark`.
+- **Settings-page volume slider** no longer uses an inline `oninput=""` handler — the listener moved into `assets/js/radio.js` (`bindSettingsSlider`). Cleaner under strict-CSP environments.
+- **Save errors are surfaced.** AJAX state-save failures were previously swallowed silently — the local UI updated but the user had no signal if the server dropped the request. The plugin now shows a brief notice ("Preferences not saved — check your connection.") in the player's error slot for 3.5 s, then auto-clears.
+- **Hardcoded Gitea URL** in the About page replaced with a `RADIO_GITEA_URL` constant defined in `radio.php`. One place to update if the repo ever moves.
+- **Genre badge layout fix.** Was using `margin-left: auto` inside a wrap-enabled flex row, which caused it to land on its own line on narrow widget widths. Now styled as a small inline pill (rounded `rgba(0,0,0,0.06)` background) that flows naturally next to the station name.
+
+### Other
+- Plugin version bumped to **0.3.0**.
+- New localized strings: `mute`, `unmute`, `saveError` (for the JS-driven UI).
+- The mute button has a visible focus ring (`outline: 2px solid var(--wp-admin-theme-color)`) for keyboard navigation.
+- Volume slider input now also exits mute state (sets `audio.muted = false` on drag), so dragging the slider always overrides a prior mute click.
+
+**Files changed:** `radio.php` (version, constant, strings, `admin_body_class` filter), `inc/about.php` (constant for changelog URL), `inc/settings.php` (removed inline `oninput`), `inc/admin-page.php` + `inc/dashboard-widget.php` (speaker icon → mute button, added track slot), `assets/css/radio.css` (genre badge pill, mute button, track display, dark-theme rules incl. `prefers-color-scheme` for `auto`), `assets/js/radio.js` (full rewrite incl. `bindMute`, `bindSettingsSlider`, `startTrackPolling`/`stopTrackPolling`, `updateMediaSession`, save-error surfacing).
+
+---
+
 ## [0.2.0] — 2026-05-26
 
 ### Changed — UI rebuilt to WordPress admin standards

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;
@@ -44,11 +111,31 @@
 }
 
 .radio-player__station-genre {
-    font-size: 11px;
+    font-size: 10px;
-    color: #646970;
+    color: #50575e;
     text-transform: uppercase;
     letter-spacing: 0.04em;
-    margin-left: auto;
+    font-weight: 600;
+    margin-left: 4px;
+    padding: 1px 7px;
+    background: rgba(0, 0, 0, 0.06);
+    border-radius: 10px;
+}
+
+/* Current track (poll SomaFM songs endpoint when playing). Hidden when
+   we have no track info — the slot still exists in the DOM so JS can
+   show/hide without layout shift on first load. */
+.radio-player__track {
+    flex: 1 1 100%;
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: #50575e;
+    font-style: italic;
+}
+.radio-player__track::before {
+    content: '♪ ';
+    opacity: 0.6;
+    margin-right: 2px;
 }
 
 /* Controls — single row, native button + slider */
@@ -60,25 +147,31 @@
 }
 
 .radio-player__play {
-    /* native .button .button-primary styling; just ensure icon aligns */
+    /* native .button .button-primary styling; just ensure glyph aligns */
     display: inline-flex !important;
-    align-items: center;
+    align-items: baseline;
     gap: 6px;
 }
 
-.radio-player__play .dashicons {
+/* Unicode play/pause glyph (not a dashicon — those sit low inside their
-    font-size: 18px;
+   own font box and look like they're below the text baseline). A plain
-    width: 18px;
+   ▶ / ‖ glyph renders on the text baseline like any other character. */
-    height: 18px;
+.radio-player__play-glyph {
+    display: inline-block;
+    font-size: 11px;
     line-height: 1;
+    /* Coerce to text rendering rather than colour-emoji on systems that
+       might otherwise pick up an emoji variant for ▶ / ‖. */
+    font-variant-emoji: text;
+    font-family: "Helvetica Neue", Arial, sans-serif;
 }
 
 .radio-player__volume {
     display: flex;
     align-items: center;
     gap: 8px;
-    flex: 1;
+    flex: 0 0 auto;
-    min-width: 200px;
+    width: 220px;
 }
 
 .radio-player__volume .dashicons {
@@ -88,6 +181,26 @@
     height: 16px;
 }
 
+/* Mute toggle — the speaker icon is a button. No chrome, just the icon,
+   like a YouTube/Spotify mute affordance. Red when muted to make the
+   state obvious. */
+.radio-player__mute {
+    background: none;
+    border: 0;
+    padding: 2px;
+    margin: 0;
+    cursor: pointer;
+    color: #646970;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    border-radius: 2px;
+}
+.radio-player__mute:hover { color: #1d2327; }
+.radio-player__mute:focus { outline: 2px solid var(--wp-admin-theme-color, #2271b1); outline-offset: 1px; }
+.radio-player__mute--muted { color: #b32d2e; }
+.radio-player__mute--muted:hover { color: #8a2424; }
+
 .radio-player__volume input[type="range"] {
     flex: 1;
     margin: 0;
@@ -120,7 +233,7 @@
 
 .radio-player__station-select select {
     width: 100%;
-    max-width: 100%;
+    max-width: 360px;
 }
 
 /* Error notice — uses WP notice styling */
@@ -155,9 +268,15 @@
 }
 
 /* ──────────────────────────────────────────────────────────────────
- * Main admin page — wrap player in a postbox-like card
+ * Main admin page — wrap player in a postbox-like card.
+ * Constrained max-width keeps the player a focused settings-page card
+ * instead of stretching to fill the full admin width.
  * ─────────────────────────────────────────────────────────────── */
 
+.radio-wrap {
+    max-width: 880px;
+}
+
 .radio-wrap .radio-player {
     margin-top: 4px;
 }
@@ -166,7 +285,6 @@
     margin: 0 0 16px;
     color: #50575e;
     font-size: 13px;
-    max-width: 720px;
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -274,3 +392,64 @@
 .radio-about-changelog-link:hover {
     text-decoration: underline;
 }
+
+/* ──────────────────────────────────────────────────────────────────
+ * Dark theme — body.radio-theme-dark forces dark; body.radio-theme-auto
+ * follows the OS via `prefers-color-scheme`. body.radio-theme-light is a
+ * no-op (the existing rules above are light).
+ *
+ * Scope is the player + the about-cards. The WP postbox chrome stays
+ * under WordPress's own admin colour scheme — we only retint surfaces
+ * we own.
+ * ─────────────────────────────────────────────────────────────── */
+
+.radio-theme-dark .radio-player__now {
+    border-bottom-color: #3c434a;
+}
+.radio-theme-dark .radio-player__station-name { color: #f0f0f1; }
+.radio-theme-dark .radio-player__label,
+.radio-theme-dark .radio-player__station-genre,
+.radio-theme-dark .radio-player__volume-pct,
+.radio-theme-dark .radio-player__credit,
+.radio-theme-dark .radio-player__mute,
+.radio-theme-dark .radio-player__station-select label,
+.radio-theme-dark .radio-player__volume .dashicons {
+    color: #a7aaad;
+}
+.radio-theme-dark .radio-player__mute:hover { color: #f0f0f1; }
+.radio-theme-dark .radio-player__mute--muted { color: #ff8b8b; }
+.radio-theme-dark .radio-player__station-desc,
+.radio-theme-dark .radio-player__track,
+.radio-theme-dark .radio-intro {
+    color: #c3c4c7;
+}
+.radio-theme-dark .radio-player__station-genre {
+    background: rgba(255, 255, 255, 0.08);
+}
+.radio-theme-dark .radio-player__error {
+    background: rgba(179, 45, 46, 0.18);
+    color: #ff9b9b;
+}
+.radio-theme-dark .radio-about-card {
+    background: #1d2327;
+    border-color: #3c434a;
+    color: #c3c4c7;
+}
+.radio-theme-dark .radio-about-card h2 {
+    background: #2c3338;
+    color: #f0f0f1;
+    border-bottom-color: #3c434a;
+}
+.radio-theme-dark #radio_dashboard_widget .radio-player__credit {
+    border-top-color: #3c434a;
+}
+
+/* Give the player its own dark surface when theme=dark so the dark text
+   has something to read against — WP postboxes don't follow our dark
+   choice, so without this the light text would sit on white. */
+.radio-theme-dark .radio-player {
+    background: #1d2327;
+    padding: 14px 16px;
+    border-radius: 3px;
+    border: 1px solid #3c434a;
+}

assets/js/radio.js

@@ -6,8 +6,18 @@
  * surface). Persists station + volume changes via AJAX so they survive
  * page reloads.
  *
- * No build step. No dependencies. Plain ES5 + a few ES6 features that
+ * v0.3.0 additions:
- * every browser supporting <audio> already has.
+ *  - Mute toggle on the speaker icon (preserves prior volume).
+ *  - MediaSession API integration — OS media keys (F8 on Mac, headphone
+ *    buttons, lock-screen widget) control the player.
+ *  - SomaFM current-track polling (every 30s while playing). Best-effort:
+ *    silently hidden if the API is unavailable / CORS-blocked.
+ *  - Save errors surface to the user as a transient notice rather than
+ *    being swallowed silently.
+ *  - Settings-page volume slider live-label is wired here (no inline
+ *    `oninput` in settings.php).
+ *
+ * No build step. No dependencies.
  */
 (function () {
     'use strict';
@@ -25,33 +35,47 @@
         return null;
     }
 
-    /** Persist a state patch back to the server. Best-effort: a failed
+    /** Extract the SomaFM short-code from a stream URL.
-     *  save doesn't block the local UI from updating. */
+     *  e.g. https://ice1.somafm.com/groovesalad-128-mp3 → "groovesalad".
-    function saveState(patch) {
+     *  Used for the current-track JSON endpoint. */
+    function getSomaCode(station) {
+        if (!station || !station.url) { return null; }
+        var m = station.url.match(/somafm\.com\/([^/]+?)-\d+-mp3/);
+        return m ? m[1] : null;
+    }
+
+    /** Persist a state patch back to the server. On failure, surface a
+     *  transient notice on the originating player surface (if given) so
+     *  the user knows their preference didn't save. */
+    function saveState(patch, surface) {
         if (!cfg.ajaxUrl || !cfg.nonce) { return; }
         var fd = new FormData();
         fd.append('action', 'radio_save_state');
         fd.append('nonce', cfg.nonce);
-        Object.keys(patch).forEach(function (k) {
+        Object.keys(patch).forEach(function (k) { fd.append(k, patch[k]); });
-            fd.append(k, patch[k]);
-        });
         fetch(cfg.ajaxUrl, {
             method:      'POST',
             credentials: 'same-origin',
             body:        fd
-        }).catch(function () { /* swallow — local UI already updated */ });
+        }).then(function (r) {
+            if (!r.ok) { throw new Error('save failed: HTTP ' + r.status); }
+        }).catch(function (err) {
+            if (window.console && console.warn) { console.warn('Radio:', err); }
+            if (surface) {
+                showError(surface, cfg.strings.saveError || 'Preferences not saved.');
+                setTimeout(function () { showError(surface, null); }, 3500);
+            }
+        });
     }
 
-    /** Update play/pause button icon + label to reflect current audio state. */
+    /** Update play/pause button glyph + label to reflect current audio state.
+     *  v0.3.2: switched from .dashicons to a Unicode glyph so the symbol sits
+     *  on the text baseline instead of below it. */
     function setPlayIcon(btn, playing) {
-        var icon = btn.querySelector('.dashicons');
+        var glyph = btn.querySelector('[data-radio-play-glyph]');
         var label = btn.querySelector('[data-radio-play-label]');
-        if (icon) {
+        if (glyph) { glyph.textContent = playing ? '‖' : '▶'; } // ‖ or ▶
-            icon.className = 'dashicons ' + (playing ? 'dashicons-controls-pause' : 'dashicons-controls-play');
+        if (label) { label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'); }
-        }
-        if (label) {
-            label.textContent = playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play');
-        }
         btn.setAttribute('title', playing ? (cfg.strings.pause || 'Pause') : (cfg.strings.play || 'Play'));
     }
 
@@ -68,6 +92,196 @@
         }
     }
 
+    /** Update the MediaSession metadata + handlers so OS media keys work. */
+    function updateMediaSession(audio, station) {
+        if (!('mediaSession' in navigator) || !station) { return; }
+        try {
+            if (typeof window.MediaMetadata === 'function') {
+                navigator.mediaSession.metadata = new window.MediaMetadata({
+                    title:  station.name,
+                    artist: 'SomaFM',
+                    album:  station.genre || ''
+                });
+            }
+            navigator.mediaSession.setActionHandler('play',  function () { audio.play(); });
+            navigator.mediaSession.setActionHandler('pause', function () { audio.pause(); });
+        } catch (e) { /* ignore — older browsers / locked-down contexts */ }
+    }
+
+    /** SomaFM current-track polling. Best-effort: stays hidden if the API
+     *  is unreachable / CORS-blocked (the plugin keeps working regardless). */
+    function startTrackPolling(player, station) {
+        stopTrackPolling(player);
+        var trackEl = player.querySelector('[data-radio-track]');
+        if (!trackEl) { return; }
+        var code = getSomaCode(station);
+        if (!code) { trackEl.hidden = true; return; }
+        var url = 'https://somafm.com/songs/' + code + '.json';
+
+        function fetchTrack() {
+            fetch(url, { credentials: 'omit', cache: 'no-store' })
+                .then(function (r) { return r.ok ? r.json() : null; })
+                .then(function (data) {
+                    if (!data || !data.songs || !data.songs.length) { trackEl.hidden = true; return; }
+                    var s      = data.songs[0];
+                    var title  = (s.title  || '').trim();
+                    var artist = (s.artist || '').trim();
+                    if (!title && !artist) { trackEl.hidden = true; return; }
+                    trackEl.textContent = artist ? (title + ' — ' + artist) : title;
+                    trackEl.hidden = false;
+                })
+                .catch(function () { trackEl.hidden = true; });
+        }
+        fetchTrack();
+        player._trackTimer = setInterval(fetchTrack, 30000);
+    }
+
+    function stopTrackPolling(player) {
+        if (player._trackTimer) {
+            clearInterval(player._trackTimer);
+            player._trackTimer = null;
+        }
+        var trackEl = player.querySelector('[data-radio-track]');
+        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]');
+        if (!muteBtn) { return; }
+        muteBtn.addEventListener('click', function () {
+            var icon = muteBtn.querySelector('.dashicons');
+            if (audio.muted || audio.volume === 0) {
+                // Unmute → restore stored prior volume (default 0.6 if we never had one)
+                var prev = parseFloat(muteBtn.dataset.prevVolume || '0.6');
+                audio.muted = false;
+                audio.volume = prev;
+                if (volumeIn)  { volumeIn.value = Math.round(prev * 100); }
+                if (volPctEl)  { volPctEl.textContent = Math.round(prev * 100) + '%'; }
+                muteBtn.classList.remove('radio-player__mute--muted');
+                muteBtn.setAttribute('aria-label', cfg.strings.mute || 'Mute');
+                if (icon) { icon.className = 'dashicons dashicons-controls-volumeon'; }
+            } else {
+                // Mute → store current volume, drop to 0
+                muteBtn.dataset.prevVolume = String(audio.volume);
+                audio.muted = true;
+                muteBtn.classList.add('radio-player__mute--muted');
+                muteBtn.setAttribute('aria-label', cfg.strings.unmute || 'Unmute');
+                if (icon) { icon.className = 'dashicons dashicons-controls-volumeoff'; }
+            }
+        });
+    }
+
     /** Wire up one .radio-player surface (widget or main). */
     function bindPlayer(player) {
         var audio      = player.querySelector('[data-radio-audio]');
@@ -85,11 +299,9 @@
         if (station) {
             audio.src    = station.url;
             audio.volume = parseFloat(cfg.state && cfg.state.volume != null ? cfg.state.volume : 0.6);
+            updateMediaSession(audio, station);
         }
-
+        if (volumeIn) { volumeIn.value = Math.round(audio.volume * 100); }
-        if (volumeIn) {
-            volumeIn.value = Math.round(audio.volume * 100);
-        }
 
         playBtn.addEventListener('click', function () {
             showError(player, null);
@@ -98,9 +310,6 @@
                 if (p && p.catch) {
                     p.catch(function (err) {
                         if (err && err.name === 'NotAllowedError') {
-                            // Autoplay was blocked — user has to click play first.
-                            // Since this IS the click handler, this branch is rare;
-                            // log it and surface a polite message.
                             showError(player, cfg.strings.error || 'Click play again to start.');
                         } else {
                             showError(player, cfg.strings.error || 'Stream error.');
@@ -112,9 +321,26 @@
             }
         });
 
-        audio.addEventListener('play',  function () { setPlayIcon(playBtn, true); });
+        audio.addEventListener('play',  function () {
-        audio.addEventListener('pause', function () { setPlayIcon(playBtn, false); });
+            setPlayIcon(playBtn, true);
-        audio.addEventListener('error', function () { showError(player, cfg.strings.error || 'Stream error.'); setPlayIcon(playBtn, false); });
+            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); });
 
         stationSel.addEventListener('change', function () {
@@ -129,9 +355,10 @@
             if (descEl) { descEl.textContent = s.description || ''; }
             var genreEl = player.querySelector('[data-radio-genre]');
             if (genreEl) { genreEl.textContent = s.genre || ''; }
-            // Mirror selection to any OTHER .radio-player surfaces on the page.
+            stopTrackPolling(player);                       // clear last station's track
+            updateMediaSession(audio, s);
             mirrorSelection(player, newId);
-            saveState({ station_id: newId });
+            saveState({ station_id: newId }, player);
             if (wasPlaying) {
                 audio.play().catch(function () { showError(player, cfg.strings.error || 'Stream error.'); });
             }
@@ -141,16 +368,25 @@
             volumeIn.addEventListener('input', function () {
                 var pct = parseInt(volumeIn.value, 10) || 0;
                 var vol = Math.max(0, Math.min(100, pct)) / 100;
+                audio.muted  = false;
                 audio.volume = vol;
                 if (volPctEl) { volPctEl.textContent = pct + '%'; }
+                // Manual volume change exits mute state visibly.
+                var muteBtn = player.querySelector('[data-radio-mute]');
+                if (muteBtn) {
+                    muteBtn.classList.remove('radio-player__mute--muted');
+                    var icon = muteBtn.querySelector('.dashicons');
+                    if (icon) { icon.className = 'dashicons dashicons-controls-volumeon'; }
+                }
                 mirrorVolume(player, pct);
-                // Debounced save — save once 400ms after the user stops dragging.
                 clearTimeout(volumeIn._saveTimer);
                 volumeIn._saveTimer = setTimeout(function () {
-                    saveState({ volume: vol });
+                    saveState({ volume: vol }, player);
                 }, 400);
             });
         }
+
+        bindMute(player, audio, volumeIn, volPctEl);
     }
 
     /** Keep all .radio-player surfaces on the same station. */
@@ -183,16 +419,26 @@
                 var label = other.querySelector('[data-radio-volume-pct]');
                 if (label) { label.textContent = pct + '%'; }
                 var au = other.querySelector('[data-radio-audio]');
-                if (au) { au.volume = pct / 100; }
+                if (au) { au.volume = pct / 100; au.muted = false; }
             }
         });
     }
 
+    /** Wire the Settings page volume slider's live percentage label.
+     *  Replaces the inline `oninput` attribute removed in v0.3.0. */
+    function bindSettingsSlider() {
+        var slider = document.getElementById('default_volume');
+        var label  = document.getElementById('default_volume_label');
+        if (!slider || !label) { return; }
+        slider.addEventListener('input', function () {
+            label.textContent = slider.value + '%';
+        });
+    }
+
     function init() {
         var players = document.querySelectorAll('.radio-player');
-        for (var i = 0; i < players.length; i++) {
+        for (var i = 0; i < players.length; i++) { bindPlayer(players[i]); }
-            bindPlayer(players[i]);
+        bindSettingsSlider();
-        }
     }
 
     if (document.readyState === 'loading') {

inc/about.php

@@ -48,7 +48,23 @@ function radio_render_about_page() {
                 <h2><?php esc_html_e( 'Version history', 'radio' ); ?></h2>
                 <ul>
                     <li>
-                        <span class="ver">v0.2.0</span> &mdash; 26 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>
+                        <span class="ver">v0.3.1</span> &mdash; 29 May 2026<br>
+                        <?php esc_html_e( 'My Radio layout polish + dropped dark-auto. Player no longer stretches edge-to-edge (max-width 880px); volume slider fixed width so the % label sits next to it; station dropdown capped at 360px; play-button icon shrunk to match the button text baseline; intro paragraph now fits one line. Removed the prefers-color-scheme dark-auto behaviour that was unreadable against WordPress\'s still-white postbox; theme=dark is still available as an explicit choice and now gives the player its own dark surface so it actually reads.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.3.0</span> &mdash; 29 May 2026<br>
+                        <?php esc_html_e( 'Dark theme wired through. Mute toggle on the speaker icon. OS media keys (F8 / headphone buttons / lock-screen) play and pause via MediaSession. Current track polled from SomaFM and shown under the station description while playing. Save errors surface as a brief notice instead of being swallowed. Genre badge restyled as an inline pill.', 'radio' ); ?>
+                    </li>
+                    <li>
+                        <span class="ver">v0.2.0</span> &mdash; 26 May 2026<br>
                         <?php esc_html_e( 'UI rebuilt to WordPress admin standards. Postbox container, native Play/Pause button with text label, picks up your admin colour scheme via var(--wp-admin-theme-color), genre badge moved inline, dashboard widget no longer renders a card-inside-a-card. Functionality identical to v0.1.0 — purely visual polish.', 'radio' ); ?>
                     </li>
                     <li>
@@ -57,7 +73,7 @@ function radio_render_about_page() {
                     </li>
                 </ul>
                 <a class="radio-about-changelog-link"
-                   href="https://git.davidtkeane.com/ranger/a-radio/src/branch/main/CHANGELOG.md"
+                   href="<?php echo esc_url( RADIO_GITEA_URL . '/src/branch/main/CHANGELOG.md' ); ?>"
                    target="_blank" rel="noopener">
                     <?php esc_html_e( 'View the full CHANGELOG.md →', 'radio' ); ?>
                 </a>

inc/admin-page.php

@@ -41,20 +41,27 @@ 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>
                         <p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
+                        <p class="radio-player__track" data-radio-track hidden></p>
                     </div>
 
                     <div class="radio-player__controls">
                         <button type="button" class="button button-primary radio-player__play" data-radio-play>
-                            <span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
+                            <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
                             <span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
                         </button>
 
                         <div class="radio-player__volume">
+                            <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
                                 <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                            </button>
                             <input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
                             <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
                         </div>
@@ -79,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>

inc/dashboard-widget.php

@@ -34,20 +34,27 @@ 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>
             <p class="radio-player__station-desc" data-radio-desc><?php echo esc_html( $station['description'] ); ?></p>
+            <p class="radio-player__track" data-radio-track hidden></p>
         </div>
 
         <div class="radio-player__controls">
             <button type="button" class="button button-primary radio-player__play" data-radio-play>
-                <span class="dashicons dashicons-controls-play" aria-hidden="true"></span>
+                <span class="radio-player__play-glyph" data-radio-play-glyph aria-hidden="true">&#9654;</span>
                 <span data-radio-play-label><?php esc_html_e( 'Play', 'radio' ); ?></span>
             </button>
 
             <div class="radio-player__volume">
+                <button type="button" class="radio-player__mute" data-radio-mute aria-label="<?php esc_attr_e( 'Mute', 'radio' ); ?>">
                     <span class="dashicons dashicons-controls-volumeon" aria-hidden="true"></span>
+                </button>
                 <input type="range" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" data-radio-volume aria-label="<?php esc_attr_e( 'Volume', 'radio' ); ?>">
                 <span class="radio-player__volume-pct" data-radio-volume-pct><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
             </div>
@@ -72,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

inc/settings.php

@@ -82,7 +82,7 @@ function radio_render_settings_page() {
                         <label for="default_volume"><?php esc_html_e( 'Default volume', 'radio' ); ?></label>
                     </th>
                     <td>
-                        <input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" oninput="document.getElementById('default_volume_label').textContent = this.value + '%'">
+                        <input type="range" id="default_volume" name="default_volume" min="0" max="100" value="<?php echo esc_attr( (int) round( $state['volume'] * 100 ) ); ?>" aria-describedby="default_volume_label">
                         <span id="default_volume_label"><?php echo esc_html( (int) round( $state['volume'] * 100 ) ); ?>%</span>
                     </td>
                 </tr>

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.2.0
+ * Version:     0.4.0
  * Requires at least: 5.0
  * Requires PHP: 7.4
  * Author:      David Keane
@@ -20,11 +20,12 @@
 if ( ! defined( 'ABSPATH' ) ) { exit; }
 
 // Plugin coordinates.
-if ( ! defined( 'RADIO_VERSION' ) )  { define( 'RADIO_VERSION',  '0.2.0' ); }
+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__ ) ); }
 if ( ! defined( 'RADIO_BASENAME' ) )  { define( 'RADIO_BASENAME',  plugin_basename( __FILE__ ) ); }
+if ( ! defined( 'RADIO_GITEA_URL' ) ) { define( 'RADIO_GITEA_URL', 'https://git.davidtkeane.com/ranger/a-radio' ); }
 
 // Includes — each file owns one concern.
 require_once RADIO_PATH . 'inc/stations.php';         // the 44-station array + genre helpers
@@ -124,6 +125,9 @@ function radio_enqueue_admin_assets( $hook ) {
             'pause'      => __( 'Pause', 'radio' ),
             'loading'    => __( 'Loading…', 'radio' ),
             'error'      => __( 'Stream error — try another station.', 'radio' ),
+            'saveError'  => __( 'Preferences not saved — check your connection.', 'radio' ),
+            'mute'       => __( 'Mute', 'radio' ),
+            'unmute'     => __( 'Unmute', 'radio' ),
             'nowPlaying' => __( 'Now Playing', 'radio' ),
             'volume'     => __( 'Volume', 'radio' ),
             'station'    => __( 'Station', 'radio' ),
@@ -158,6 +162,21 @@ function radio_ajax_save_state() {
     wp_send_json_success( radio_get_state() );
 }
 
+/**
+ * Surface the user's theme choice (auto/light/dark) to CSS as a body
+ * class. `radio-theme-dark` forces dark; `radio-theme-auto` lets the
+ * CSS respect `prefers-color-scheme`; `radio-theme-light` is the
+ * default no-op.
+ */
+add_filter( 'admin_body_class', 'radio_admin_body_class' );
+function radio_admin_body_class( $classes ) {
+    if ( ! is_user_logged_in() ) { return $classes; }
+    $state = radio_get_state();
+    $theme = isset( $state['theme'] ) ? $state['theme'] : 'auto';
+    if ( ! in_array( $theme, array( 'auto', 'light', 'dark' ), true ) ) { $theme = 'auto'; }
+    return $classes . ' radio-theme-' . $theme;
+}
+
 /**
  * Activation hook: ensure the version option is set so the updater can
  * track it.