Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

HTML5 Radio Tuner (powered by ShoutCast API)

Posted by bcmoney on June 30, 2013 in AJAX, Multimedia, PHP, Web Services, XML with 1 Comment

No Gravatar
Pioneer radio tuner 70s

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:

  1. The radio – background look only; just used an HTML5/CSS3 border-radius to give it rounded corners
  2. The knobs – used to control the dial and volume; they use the excellent jQuery KnobKnob plugin created by Martin Angelov.
  3. 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
  4. 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).
  5. 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, and Slacker, but I still like good ol’ ShoutCast.

As usual, you can check it out in action below:






  1. orange wednesdays emailJanuary 4, 2017 - 6:58 am #1

    Usefᥙl infoгmation. Lucky me I diѕcovered this while searching for different Online Radio display options, and I personally think there’s nothing wrong with Skeumorphs, this would be a cool way to interact with all my local (and international) radio programmes I like to tune into.

Leave a Reply

No trackbacks yet.

Posts with similar tags
Posts in similar categories

BC$ = Behavior, Content, Money

The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:

1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.

2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.

3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.

  • Archives