Jason Brain's Tech Blog

Lab Update: The Radio Stream Player Gets Its Own Stage

by Jason Brain

 Hey everyone,

I'm excited to share a significant update from the lab! If you've visited lab.jasonbrain.com before, you might have played around with the embedded Radio Stream Player. What started as a fun, integrated tool has grown and evolved, and today, it's taking a major step forward.

From Integrated Tool to Standalone Project

The Radio Stream Player was initially built as just one component of a larger Single Page Application. While this was great for a quick proof-of-concept, the player's feature set and complexity quickly outgrew its humble beginnings. To give it the attention it deserves, I've spun it out into its own standalone project!

This move allows for more focused development, better maintainability, and its very own roadmap for future features. It now lives in its own repository, which you can check out here: Radio-Stream-Player on GitHub.

The v1.1 Release: A Foundation for the Future

As part of this transition, the player just received its v1.1 release, which was all about building a rock-solid foundation. Here are the highlights:

  • 🧹 Major Code Refactoring: The original monolithic JavaScript file was completely refactored into clean, modern ES modules (player.jsvisualizer.jsstations.js). This makes the code much easier to manage and extend.
  • Accessibility as a Priority: The player is now more accessible than ever, with full screen reader support via aria-label attributes and clear :focus-visible states for keyboard-only navigation.
  • ✨ UI/UX Polish: The pop-out player is now more robust, and smaller touches, like a dynamic tooltip for the visualizer style button, have been added to improve the user experience.

The Best of Both Worlds: Re-integration via iFrame

So, what does this mean for the main lab site? The player is coming back, but in a much cleaner way. It will now be embedded as a self-contained <iframe>.

This is a huge win for modularity. The main lab site doesn't need to know anything about the player's internal workings, and the player can be updated and deployed independently. This change is part of a broader effort to modernize the entire lab, whose own progress you can follow on its dedicated GitHub repository.

What's Next?

With a solid foundation in place, the v1.2 roadmap for the Radio Stream Player is focused on exciting new features like allowing users to add their own custom stations and a system for marking favorites.

This has been a rewarding process of taking a small feature, recognizing its potential, and giving it the space to grow into a mature project. Thanks for following along!

Comments