Skip to main content

Stream Urban Music with Style

La Urban Radio Player delivers 24/7 streaming with synchronized lyrics, intelligent caching, and audio-reactive visuals. Built for both desktop and mobile with adaptive buffering and device-specific optimizations.

Get StartedExplore Features
La Urban Radio Player

Get Started in Minutes

Integrate La Urban Radio Player into your web application with minimal setup

1

Include the Core Files

Add the player HTML structure and JavaScript modules to your page:
<!-- Core modules -->
<script src="js/logger.js"></script>
<script src="js/cache-manager.js"></script>
<script src="js/lyrics.js"></script>
<script src="js/index.js"></script>
The logger must be loaded first as other modules depend on it
2

Initialize the Audio Player

The player initializes automatically when the page loads. To interact programmatically:
// Access the global audio element
const audio = document.getElementById('audio');

// Play/pause control
audio.play();
audio.pause();

// Volume control
audio.volume = 0.5; // 0.0 to 1.0
3

Load Synchronized Lyrics

Use the LyricsManager to display synchronized lyrics:
// Initialize the lyrics manager
const lyricsManager = new LyricsManager();
lyricsManager.init(audio);

// Load lyrics with timestamps
lyricsManager.loadLyrics([
  { time: 0.5, text: "First line of lyrics" },
  { time: 3.5, text: "Second line appears here" },
  { time: 6.5, text: "Lyrics sync automatically" }
]);
The lyrics system automatically adjusts sync delays based on device:
  • iOS devices: 4.5s delay (Safari has aggressive buffering)
  • Desktop/Android: 1.5s delay
This compensates for stream latency and ensures perfect synchronization.
4

Customize and Deploy

Modify the player styles in css/index.css and configure your stream URL. The player supports:
  • Custom color themes (day/night modes)
  • Audio visualization effects
  • Mobile touch controls
  • Smart caching for metadata
Check out the Configuration guide for stream setup details

Core Features

Everything you need for a professional streaming radio experience

Audio Streaming

Custom HTML5 player with volume control, mute, and playback state management. Optimized for low-latency streaming.

Synchronized Lyrics

Display time-synced lyrics with adaptive device delays. Supports LRC format and virtual time for live streams.

Smart Caching

Intelligent metadata caching with change detection. Reduces API calls while keeping song info fresh.

Environment Logging

Context-aware logging system that shows detailed debug info in development and stays silent in production.

Key Modules

Explore the JavaScript modules that power La Urban Radio Player

LyricsManager

Manage synchronized lyrics with time offsets and virtual playback

CacheManager

Handle metadata caching and change detection

Logger

Environment-aware logging with multiple severity levels

Mobile Optimized

Touch Controls

Volume popup for mobile devices, optimized touch targets, and gesture-friendly interface design.

Adaptive Buffering

iOS-specific delay compensation, Safari buffer handling, and device-aware stream synchronization.

Ready to Start Streaming?

Integrate La Urban Radio Player into your project and deliver a premium audio experience to your users

Get Started Now