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:
+5
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user