Radio Stream Player (Legacy Version)

Important

This repository is now in Legacy/Maintenance mode. Development has migrated to the feature-rich Radio-Stream-Player-PHP which includes user accounts, a database-driven station directory, and a full PHP backend.

This version (v1.x) remains available as a minimalist, zero-backend, standalone HTML/JS experiment. It is perfect for users who want a simple, portable player without the need for a server or database.

A sleek, modern, and feature-rich web-based radio stream player built with vanilla JavaScript and the Web Audio API. It provides a great listening experience with dynamic audio visualizations.

🔴 Live Demo (Legacy) | 🚀 New PHP Version

The legacy demo is securely hosted at http://radio1.djay.ca/! It utilizes a custom Cloudflare Worker proxy (api.djay.ca) to seamlessly tunnel legacy HTTP radio streams and extract real-time track metadata without triggering browser security warnings.

✨ Features

• Multiple Stations: Comes pre-loaded with a selection of high-quality electronic music radio streams.
• Radio Browser Directory: Integrated public API to natively search and add tens of thousands of community-driven radio stations.
• Custom Stations: Add your own radio stream URLs. Manage your private collection and "Favorites" in a dedicated UI.
• Dynamic Audio Visualization: Real-time VU meters powered by the Web Audio API.
• Multiple VU Meter Styles: Cycle through six different visualizer styles:
  • Classic (Vertical Bars)
  • LED (Segmented Display)
  • Circular (Radial Progress)
  • Waveform (Oscilloscope)
  • Spectrum (Frequency Bars)
  • Retro (Analog Needle)
  • Neon (Glowing Bars)
• Light & Dark Themes: Automatically detects the user's system preference and allows manual toggling.
• Personalization: Customize the player with your own background images or choose from curated presets.
• Favorites System: Save your top stations for quick access.
• Backend Streaming Proxy: Natively bypasses "Mixed Content" warnings by routing insecure HTTP radio streams through a secure Cloudflare Worker.
• Live Metadata Extraction: Displays real-time "Now Playing" track and artist information fetched directly from the streams.
• Media Integration: Displays station info on your OS lock screen and supports hardware media keys (Play/Pause/Next/Prev).
• Pop-out Player: Open the player in a separate, compact window for easy multitasking.
• Accessible: Built with accessibility in mind, featuring screen reader support and full keyboard navigation.
• Responsive Design: Looks and works great on both desktop and mobile devices.
• Session-Aware: Remembers your selected theme across browser sessions using localStorage. Volume and station are maintained within the current session, including when using the pop-out player.

🛠️ Technologies Used

• HTML5: For the structure of the player.
• CSS3: For styling, including custom properties for theming and responsive design.
• Vanilla JavaScript (ES6+): For all player logic, interactivity, and a robust Pub/Sub State Manager to ensure perfect UI synchronization.
• Web Audio API: For audio processing and creating the dynamic visualizations.

🔌 Powered By

• Cloudflare Workers: Enables our secure backend streaming proxy and ICY metadata extraction.
• Radio Browser API: Provides the massive, community-driven database of global radio stations available natively in the app directory.

⌨️ Keyboard Shortcuts

The player is designed to be fully accessible and keyboard-friendly:

• Spacebar / Play/Pause Media Key: Toggle Play/Pause.
• Next Track Media Key: Skips to the next station in the current list.
• Previous Track Media Key: Skips to the previous station in the current list.
• Tab: Standard browser focus navigation through all UI elements.

🚀 Getting Started

This project is designed to be run directly in a web browser. No build step is required.

1. Clone the repository:

   git clone https://github.com/BrainAV/Radio-Stream-Player.git

2. Navigate to the project directory:

   cd Radio-Stream-Player

3. Open the index.html file in your favorite web browser.

Due to browser security policies (CORS) regarding audio streaming, you might need to run it from a local web server for all features to work correctly. A simple way to do this is using Python:

# For Python 3
python -m http.server

# For Python 2
python -m SimpleHTTPServer

Then, navigate to http://localhost:8000 in your browser.