Jason Brain's Tech Blog

Radio Stream Player v1.2: The "Universal Streaming" Update is Here! 🎵🚀

by Jason Brain

Radio Stream Player v1.2: The "Universal Streaming" Update is Here! 🎵🚀

It feels like just yesterday we released version 1.1, introducing custom visuals, new themes, and the pop-out player. But today, I am incredibly excited to announce the release of Radio Stream Player v1.2! This is arguably our biggest and most important update yet.

If you've ever tried to build an audio player for the modern web, you know the struggle: most legacy internet radio stations still broadcast over insecure http:// streams. But because our application is hosted safely on https://, modern browsers simply block these streams with a dreaded "Mixed Content" error. It was incredibly frustrating... until now.

🛡️ The Magic of the Cloudflare Worker Proxy

To finally solve the Mixed Content problem, we built a custom backend proxy using Cloudflare Workers (api.djay.ca). Instead of your browser trying (and failing) to connect to old HTTP stations directly, our player now silently routes those streams through our blazing-fast worker. The worker fetches the insecure radio stream on our behalf and securely pipes it back to you via HTTPS.

The result? You can now listen to any radio station in the world, securely, without any annoying browser errors!

✨ Live "Now Playing" Track Info

But we didn't stop there. Because our Cloudflare proxy is fetching the stream, we built a secondary /metadata endpoint that actively extracts the live ICY Metadata from the broadcast. What does this mean for you?

  • Scrolling Marquee: The player header now features a sleek "Now Playing" display that shows you the exact track and artist name currently playing. If the track name is super long (looking at you, progressive trance mixes!), it smoothly scrolls across the screen.
  • Lock Screen Integration: We wired this live data directly into the OS Media Session API. Now, when you play a station, the actual track name will appear on your smartphone's lock screen, your smartwatch, and your desktop media controls!

⚙️ Player & UI Refinements

We've also taken the time to polish the rest of the experience based on your feedback:

  • Edit Custom Stations: You no longer have to delete and re-add a custom station to fix a typo. You can now simply hit the new "Edit" button (✎) in the Settings menu to tweak the Name, URL, or Genre of any station you've added.
  • Pop-out Player Parity: The pop-out window has been upgraded! It now fully supports the new Custom Stations, the secure Cloudflare Proxy routing, and it even features the same scrolling metadata marquee as the main player window.
  • New Curated Content: We've expanded our default lineup with fantastic new stations including Hirsch Radio Psytrance, Hirsch Radio Progressive, and A State of Trance (ASOT).

🙌 Open Source & Developer Friendly

We are proudly open-source! Check out our full codebase, star the repository, or contribute to the project over on our GitHub Repository.

Are you a developer looking to host your own version of the player? We've open-sourced our entire Cloudflare Worker script! You can find the worker.js template inside the repository, along with detailed instructions on how to quickly deploy it to your own free Cloudflare account.

🌐 Embed the Player Anywhere (iFrame Support)

Want to add the Radio Stream Player to your own website or blog? It's incredibly easy! Because our player is responsive and completely self-contained, you can seamlessly embed it anywhere using a simple HTML iframe. The player will automatically adapt to fit the space you give it, making it the perfect audio companion for your own site.

<iframe allow="autoplay; encrypted-media" allowfullscreen="" height="600" 
    src="https://radio.djay.ca/" style="border: none;" 
    title="Radio Stream Player" width="100%" >
</iframe>
    

Ready to hear the difference?

Check out the live player right now at radio.djay.ca!

As always, drop a comment below or open an issue on our GitHub if you have any feedback or stations you'd like to see added. Happy listening!



Comments