HTML5 Radio Tuner (powered by ShoutCast API)
Pioneer radio tuner 70s (Photo credit: Barrie Sutcliffe)
Since I wrote about Skeumorphs last month, I thought I’d include this piece I had worked on. This is an older idea I had that I’d done the initial design for but forgot (ahem… procrastinated) to do the coding for back when I had the idea. The general concept was to replicate the look of an old-school needles and knobs analog radio.
I’ve always sought to bring more humanity to the online content experience. If we have to be forced to sit in an office or stare into a screen for most of our waking lives, just to be considered “modern and relevant” and have a chance to compete in this global marketplace, then the experience might as well feel natural and familiar to our interactions with the real world. It might as well be a pleasant co-existence with technology, rather than a mechanical, robotic, in-human and uncomfortable one.
So enough of that esoteric philosophy nonsense and on to the interesting stuff. The concept is that I missed the radio dial on my grandfather’s old analog radio. As a child, I used to play with the knobs and enjoy tuning into many different stations. It was a long-range radio so on a good day in my teenage years, I could even tune into the Howard Stern show broadcast from New York and some of the more edgy french stations from Quebec. Even my grandfather’s gone digital now though, so I figured the fond memory of this technology from the past might as well too.
There were 5 main components to this project:
- The radio – background look only; just used an HTML5/CSS3 border-radius to give it rounded corners
- The knobs – used to control the dial and volume; they use the excellent jQuery KnobKnob plugin created by Martin Angelov.
- The dial – simply displays for old times sakes what “frequency” of a station you are on as you move the tuning needle; since the ShoutCast API assigns unique station ID numbers as opposed to frequencies, I used the stationID mod 109, which is the maximum range of a typical analog FM radio; any stations that worked out to the same value were separated by 0.3 frequencies, in Alphabetical order
- The buttons (categories) – there is simply no way to expose all the 49,000+ ShoutCast stations via a single radio dial, you would have to tune in to the millionths of a frequency which would just be annoying because the slightest turn of the knob would make you pass through a few hundred stations, so I added the buttons which actually appeared on the original radio (although I never knew what they did back then, their purpose is now to divide up the stations by category). You can punch in the category ID or just hit “0” for a list of categories. On top of this, each category has simulated AM/FM (more popular stations are in FM while less popular are in AM).
- ShoutCast API – integration was done in PHP which I had already done for a previous project.
At the time of creating this widget, the ShoutCast API was still the largest directory of radio stations with publicly accessible (i.e. free) versions of their streams. Some others are now catching up or surpassing it like TuneIN, Rad.io and Slacker, but I still like good ol’ ShoutCast.
As usual, you can check it out in action below:
-OR-
Related Articles
