Introduction

​

What is La Urban Radio Player?

​

Who is it for?

• Radio Station Owners looking to provide a professional streaming experience on their website
• Web Developers who need a customizable, production-ready radio player solution
• Music Enthusiasts wanting to build an engaging streaming platform for their audience
• Content Creators who operate online radio stations and need reliable playback technology

​

Key Features

​

Audio Streaming

• Seamless Playback: Continuous streaming with optimized buffering for both mobile and desktop
• Adaptive Performance: Intelligent device detection with platform-specific optimizations
• CORS-Ready: Configured to handle cross-origin audio streaming
• Volume Control: Smooth volume adjustments with visual feedback and fade effects

<audio id="audio" name="media" preload="none" crossorigin="anonymous">
    Tu navegador no soporta el elemento <code>audio</code>.
</audio>

​

Real-Time Song Information

• Current song title and artist
• Album artwork with smooth transitions
• Elapsed time and total duration
• Upcoming track information

const CONFIG = {
    STREAM_URL: 'https://azura.laurban.cl/listen/laurban/media',
    API_URL: 'https://azura.laurban.cl/api/nowplaying/laurban',
    UPDATE_INTERVAL: 5000, // Updates every 5 seconds
};

​

Synchronized Lyrics Display

• Automatic Fetching: Searches for lyrics when songs change
• Adaptive Delay Compensation:
  • Desktop/Android: 1.5 seconds
  • iOS (Safari): 4.5 seconds for optimal sync
• Silent Mode: No error messages when lyrics aren’t available
• Mid-Song Join: Syncs perfectly even if you start listening halfway through

// Adaptive delay based on device
const LYRICS_CONFIG = {
    STREAM_DELAY: isIOS ? 4.5 : 1.5,
    UPDATE_INTERVAL: 100 // Smooth 100ms updates
};

​

Audio Visualization

• Logo Animation: Reacts to bass kicks and frequency changes
• Frequency Analysis: Detects kicks, bass, mids, and highs
• BPM Detection: Estimates tempo and adjusts animations accordingly
• Mobile Fallback: CSS-based animations when Web Audio API isn’t available

// Frequency band analysis
const subBass = dataArray.slice(0, 6).reduce((a, b) => a + b, 0) / 6;    // 20-60 Hz - Kicks
const bass = dataArray.slice(6, 21).reduce((a, b) => a + b, 0) / 15;     // 60-250 Hz - 808s
const mid = dataArray.slice(41, 161).reduce((a, b) => a + b, 0) / 120;   // 500-2000 Hz - Vocals

​

Smart Caching System

class CacheManager {
    laurbanData = null;
    lastCheck = 0;
    updateInterval = 15000; // 15 seconds for main data
}

• Reduces unnecessary API requests
• Detects meaningful changes (song changes, live state)
• Improves performance and reduces server load

​

Intelligent Logging

class Logger {
    dev(...args) {
        if (this.isDev) {
            this._originalConsole.debug('[DEV]', ...args);
        }
    }
}

​

What Problems Does It Solve?

​

1. Cross-Platform Audio Playback

• iOS Safari compatibility with proper user gesture handling
• Mobile buffering optimizations for cellular connections
• CORS configuration for cross-origin audio sources
• Fallback mechanisms when advanced features aren’t supported

​

2. Real-Time Synchronization

• Virtual time calculation based on server-reported elapsed time
• Automatic drift correction every 5 seconds
• Stream delay compensation for latency
• Recovery from interruptions (phone calls, Siri, etc.)

​

3. User Experience Polish

​

4. Performance Optimization

• Lazy loading of iframe content (chat, song requests)
• GPU-accelerated transforms for smooth animations
• Conditional feature loading based on device capabilities
• Smart polling that only updates when data actually changes

​

Technology Stack

• Vanilla JavaScript: No framework dependencies for maximum performance
• Web Audio API: Advanced audio analysis and visualization
• Media Session API: Native OS-level playback controls
• LRCLIB API: Automatic lyrics fetching and synchronization
• AzuraCast Integration: Radio automation platform compatibility

​

Use Cases

​

Online Radio Station

// Easy configuration for your station
const CONFIG = {
    STREAM_URL: 'https://your-station.com/stream',
    API_URL: 'https://your-azura.com/api/nowplaying/station',
    DEFAULT_TITLE: 'Your Station Name',
    DEFAULT_COVER: 'https://your-station.com/default-cover.jpg'
};

​

Podcast Player

​

DJ Live Streaming

KICK_API_URL: 'https://kick.com/api/v2/channels/yourname/livestream',
KICK_EMBED_URL: 'https://player.kick.com/yourname?muted=true&autoplay=true'

​

Open Source & Customizable

• Easily configurable through centralized config objects
• Well-documented with inline comments and separate docs
• Modular architecture with separate files for lyrics, logging, and caching
• Customizable styling through CSS variables and classes

​

Next Steps