ranger/rangerhq-radio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
David Keane
2026-05-29 23:42:09 +01:00
parent a56fd7aff7
commit f5feca7dfa
7 changed files with 229 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
inc/about.php
+5 -1
View File
@@ -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>