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>
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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); });
|
||||
|
||||
Reference in New Issue
Block a user