Online Radio Station 📻

Hello, world! 🚀 Today I'm excited to share my latest project: a Online Radio Streaming App. My goal was to create a platform that connects listeners with their favorite stations through a premium, native-feeling interface.

The Vision 💡

I wanted to modernize the traditional radio experience by creating an app that feels like a native iOS tool 🍏. Key focus areas included instant playback, visual feedback, and a clean station directory.

• Instant Streaming: Zero-latency playback for live radio streams.
• Visual Waves: An animated visualizer that brings the audio to life 🌊.
• Clean Navigation: Organized categories for Balkan, Folk, and Pop hits.

The Tech Stack 🛠️

To ensure the fastest loading times for live streams, I used HTML5 Audio optimized for high-bitrate streaming and Vanilla JS to manage the station transitions smoothly.

Design Highlights 🎨

The Station Directory is the heart of the app. I used large 56px icons to make each station stand out 🖼️. The UI is built to be "thumb-friendly," using Glassmorphism for the control bar to give it that modern frosted glass look.

🧩 Code Snippet: Live Stream Fetching

The app pulls a live list of stations from a centralized stations.json file, allowing for real-time updates:

async function loadStations() {
    try {
        const res = await fetch('stations.json');
        const data = await res.json();
        renderStations('all');
    } catch (e) {
        console.error("Connection error:", e);
    }
}

The Live Vibe 🌊

To show users that the stream is active, I integrated a CSS wave animation that triggers during playback:

@keyframes wave-animation {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

Conclusion 🏁

Building this Online Radio was about more than just code—it was about creating an atmosphere. By focusing on clean lines and smooth streaming, I've built a tool that brings the world's music to your pocket. 🎧