From 9699bcf5498b5fa35a069dc83f5001d6cbc72bbf Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Fri, 24 Jul 2026 14:56:21 -0500 Subject: [PATCH 1/2] Add waveform rendering on playback --- .env.example | 14 ++++++ README.md | 21 +++++++++ assets/css/radio.css | 4 ++ assets/js/player.js | 100 ++++++++++++++++++++++++++++++++++++++++++- config.php | 38 ++++++++++++++++ index.php | 7 ++- 6 files changed, 182 insertions(+), 2 deletions(-) diff --git a/.env.example b/.env.example index 41f1599..c2a9cc8 100644 --- a/.env.example +++ b/.env.example @@ -175,6 +175,20 @@ MEDIASESSION=true # album art as tracks change. DYNAMIC_META=true +# Real-time scrolling waveform (Web Audio), shown after the listener presses +# play. It routes playback through Web Audio, so if your STREAM_URL is on a +# DIFFERENT origin than the site it must send an Access-Control-Allow-Origin +# header — set WAVEFORM_STREAM_CORS=true once it does, or the waveform is +# auto-disabled to avoid silencing the audio. Same-origin streams need nothing. +WAVEFORM_ENABLED=false +WAVEFORM_HEIGHT=72 +# Bar color; blank uses your THEME_ACCENT. +WAVEFORM_COLOR="" +# Seconds of history shown across the width before peaks scroll off. +WAVEFORM_WINDOW_SECONDS=30 +# Set true only if a cross-origin stream sends CORS headers. +WAVEFORM_STREAM_CORS=false + # ----------------------------------------------------------------------------- # Listeners / history diff --git a/README.md b/README.md index 83cdfa7..a3f6c47 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,27 @@ song has several Genius entries. For a live stream the seek bar is replaced by a **LIVE** badge and an elapsed counter, since seeking a live stream isn't meaningful. +### Waveform visualizer + +`WAVEFORM_ENABLED=true` shows a real-time scrolling waveform that builds out as +the stream plays (it appears only after the listener presses play). It uses the +Web Audio API — an `AnalyserNode` fed by the `