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
Here's an explanation of what we have today, followed by a Use-Case for my idea...
...Leave a Reply
No trackbacks yet.
Posts with similar tags
- Working with LimeSurvey’s RemoteControl2 JSON-RPC API in PHP
Recently, I needed to switch away from SurveyMonkey, which, while still a useful free service for quickly collecting some basic Survey results, leaves much to be desired in terms of what they offer in their basic version. Of course the fully paid versions offer significantly more functionality, but the upper-end of the pricing schemes that... - E-Learning for Toddlers and Pre-Schoolers: HTML5 Alphabet Learning/Hand-Writing
Next up in my little "E-Learning for Toddlers" series is this example which was extended/based (i.e. blatantly lifted) from the excellent "Stay-in-the-Letter" initial concept by Chris Heilmann which I saw on the Mozilla Hacks blog:
https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/
My pilfering of this little app concept was for solely and completely personal reasons for teaching my own son, as I... - 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... - HTML5 features template and HTML5 skeleton
With all the buzz about HTML5 its high time to release an official post on the subject and cement our intention to support the standard fully. It is impossible to ignore the possibilities of a single thin-client based development environment and common sets of tools for working with them. Add to that the fact that... - Remotely exchange data between iFrame and parent (jQuery .vs. HTML5)
One of the many nagging web development problems that the HTML5 working group is addressing with the new HTML specification, is the difficulty in working with content or exchanging data in between an iFrame and the main (origin) page which embeds it, as well as across separate windows (tabs) and domains.
jQuery
In order to accomplish the... - CSS3 Rounded Thumbnail Gallery
CSS3 is shaping up to be quite promising.
Some of the features and shiny new toys that have me excited most are:
Typography (via @font-face)
Animations (via @keyframes and transform)
Transitions (via transition and transition-delay)
REAL Rounded Corners (via border-radius)
Shadows for everything! (via text-shadow and box-shadow)
In this spirit, the following is an interactive rounded thumbnail gallery which was not previously... - HTML5 with animated GIF, and, real-time transcoding?!
In the recent Dive Into HTML5 Video with the Masters instructional webinar from ReelSEO, the final questions posed were whether the masters (Jeroen Wijering of Longtail video, and Philip Jagenstedt of Opera software) knew:
If animated GIFs can be used to show an animation before the video plays? (Answer #1)
When will HTML5 be ready for primetime?...
Posts in similar categories
- NB Hackathon – NoSQL, BigData and Linked Open Data for Government
This month, I participated in the NB Hackathon, an event that aims to bring developers in Atlantic Canada (particularly NB) together for the purpose of hacking on some interestling Linked Open Data and traditional (i.e. Microsoft Excel) Government Data sets which is being made publicly available for the first time. ...
- The Internet of Things – If this then what?
The "Internet of Things" (or IoT) is an evolution of microprocessor engineering, sensor innovations, wireless communications technologies, and of course the Internet itself. An IoT "thing" could be any natural or man-made object that can be assigned an IP address and provided with the ability to transfer data over a network. For example, inanimate objects... - LayerPlayer released for SkipSearch
Announcing the availability of SkipSearch's new Layer Player ALPHA version. This is still early days even though its a multi-year project for me, as I continue to work on this in my very rare spare time. This new feature will much more readily bring to light the capabilities of the recommendation engine built under the... - JS Podcatcher (a Podcast client written in JavaScript)
So just this month my 5-year old iPhone 3GS finally bit the dust. I had been hanging on and managed to make it through a major liquid submersion (thanks to the good folks at Atlantic Cell Phone Repair) several cracked screens (thanks to the good folks at iCracked). I'm pretty stubborn, and now that I've... - DIY Project – Home Theatre Projection Screen Controls
Inspired by the now infamous TED Talk presentation by John Underkoffler (scroll to the end of this post if you haven't seen it yet), one of the leading MIT researchers behind the Futuristic UIs and Technologies that appear in the 2002 Sci-Fi film Minority Report, I've set out to find my own "best approximation" of a... - Working with LimeSurvey’s RemoteControl2 JSON-RPC API in PHP
Recently, I needed to switch away from SurveyMonkey, which, while still a useful free service for quickly collecting some basic Survey results, leaves much to be desired in terms of what they offer in their basic version. Of course the fully paid versions offer significantly more functionality, but the upper-end of the pricing schemes that...
- The Evolution of the Cell Phone INFOGRAPHIC
Mobile Phones have come a long way since the giant "Cell Phones" (sometimes called "Bricks" for their heavy weight and rectangular shape) of the late 80s and early 90s, to the modern "Smart Phones" with intelligence and computing capability that would have seemed like Science Fiction back then. Today's handhelds are fully-functional Mobile Devices that...
- 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: (more…)...
- 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...
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.