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
Leave a Reply
No trackbacks yet.
Posts with similar tags
- E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game
These days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word... - The Getting Started in JAVA Guide (That I Wish I Had In University)
History
Language
Installing
Examples
Compiling
Running
Programs
IDEs
The Java programming language is one of the most widely used and widely supported programming languages in the world (in terms of total number of devices and systems running it). Since its inception, it has also been the subject of several major lawsuits (i.e. Oracle .vs. Google, Google .vs. Oracle countersuit, US Gov .vs. Microsoft,... - Sports Stats API feeds evaluated: ChalkGaming wins
Well, I've decided to give this one away in the title, since the good folks over at ChalkGaming helped me out quite a bit while consulting with a big client who wanted to integrate Sports Stats into their Online Newspaper properties.
Requirement
Create a sports widget to display quality sports data (including: schedules, box scores, standings, betting... - WordReference API – AJAX SDK & Widget
Yesterday I wrote about the Google API shutdown. It seems that I was wrong in that post about Wordreference not having an API, just a few days earlier founder Michael Kellogg announced the introduction of the brand-spanking new Wordreference API.
Like a dunce I contacted Michael by email to learn about this new revelation without double-checking...
Posts in similar categories
- The Evolution of the Cell Phone INFOGRAPHIC
Image source: www.computersciencedegreehub.com
This was provided courtesy of Aldo Baker at the ComputerScience Degree Hub.... - The News Industry’s Dirty Little Secret
Ever felt like you couldn't quite put your finger on it, but that something seemed to be "wrong with the world" and the way things are? What if things are the way they are for a reason? What if the institutions the people have setup are no longer serving the interests of the people but... - Reality TV or Glorified Karaoke Competition? [INFOGRAPHIC]
Cami Hadley and the team over at Cable.tv have created an excellent infographic that summarizes the state of Reality TV singing competitions:
Created by www.Cable.tv
While this does an excellent job of showing the behind-the-scenes absurdity of big budget Reality TV shows, a better question is why is these types of shows are such big-budget events? People... - SkipSearch ALPHA released
The ALPHA version of SkipSearch has been released!!!
SkipSearch is a proprietary front-end to OpenRecommender, an open source recommendation engine. Its primary features include:
Easy-to-use Interface with hover-intent to reduce clicks, audio controls & shortcuts
Lightweight HTML5 / CSS3 layout
Mobile-friendly, responsive design
Schema.org properties and support for RDFa/Microformats
Import data from multiple accounts (Google/Yahoo/Microsoft/Twitter/Facebook/LinkedIN/Last.FM/StumbleUpon and other social media account integration)
Export functionality... - 11 Ways To Be Remarkably Exceptional
Here's an opposite take on the excellent "11 ways to be unremarkably average" comic by Gavin Aung Than (aka ZenPencils), which was itself inspired by and borrows from a quote by Chris Guillebeau. The funny thing is, if you reverse these warnings and follow the opposite of the steps outlined in that Guillebeau quote, hidden within... - Top 10 Finish in MintChip Challenge: THANK YOU!
It is with great humility and gratitude that I announce that I have finished in the Top 10 of the Mintchip Challenge with my proposed application and idea that "A digital currency can be used for P2P barter and micropayments".
You can see the full list of finalists in the Mintchip Challenge here:
http://ideas.mintchipchallenge.com/
There were really some... - P2P Barter – My entry to the MintChip Challenge
Here's an explanation of what we have today, followed by a Use-Case for my idea...
TODAY:
1. Person A is a farmer who has worked hard all season and is ready for harvest of their crops. For simplicity's sake, let's call him the "Seller", since the next step will be to sell their produce. For that they... - FOAF and the Facebook Death Star
Since the February confirmation of the Facebook IPO, Facebook has continued to stagnate in user-base yet as an organization it holds no punches as it attempts to grow internationally, and its stock price continues to soar as Class A shares finally open up to the average person (major investment firms had first dibs at the... - Unboxing the MintChip
The Royal Canadian Mint(RCM) has sponsored the MintChip Challenge 2012 in an effort to attract developers to the idea of developing software for the MintChip and giving away their best financial application ideas, basically, for free (on the long-shot that you are one of the few who win).
Starting April 1st, 2012, they began mailing out... - Popcorn.js + Embedded Video = Semantically Enhanced Video Content
Popcorn.js is an incredibly useful framework for adding timing-based events and/to Semantic metadata to rich content.
According to Mozilla: "Popcorn makes video work like the web. We create tools and programs to help developers and authors create interactive pages that supplement video and audio with rich web content, allowing your creations to live and grow online."
With...
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.