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
- HTML Tutorial and Web History lesson
Today, something unexpected happened. I had the (somewhat unplanned and impromptu) pleasure of showing the ropes to the "new recruit" at work, a student here for a work term over summer break. Now, we're not necessarily doing that much coding here yet, as we're still in the process of bringing back large portions of IT functionality...
- Audio Recognition overview (TTS, STT, Voice .vs. Speech)
It is still in many ways the early days of innovation in the several sub-categories of Audio Recognition.
Microphones
Thanks to technological advancements, microphones have become smaller and smaller (perhaps to some extent this has been driven by the post-war and Cold War eras where espionage became so critical, so governments worldwide competed producing better and better... - IFTTT finally releases its own API, sort of, with “Maker channel” triggers
IFTTT finally just released its own API (sort of) when it announced the introduction of its new "Maker" Channel which may very well be the closest we ever get to a true API. It offers HTTP-based activation of Actions to carry our when invoked or Triggers which can be combined with another service.
The Maker Channel... - JS Podcatcher v2.0
This is the first revision of my quick and dirty Podcatcher (podcasting client).
It adds three new features:
Ability to search for Podcasts by name (via iTunes API)
Resolving the actual RSS feed URL from the Podcast ID
Caching a copy of the RSS feed on the server in XML and only requesting updates if changes have been made
The... - 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 iPhone3GS finally bit the dust. I had been hanging on and managed to extend its life well beyond its 3-year Telco contract (which I immediately cancelled the day I was out) by pairing it with a MiFi hotspot for much cheaper VoIP-based calling and using data-intensive applications only... - 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... - HTML5 Audio Player Jukebox
Here's a piece of work I did on a freelance basis back in early 2012 for a client who allowed me to retain the full rights to the code as a "library" which I could distribute. (I offered them two prices of course, one cheaper rate where I retain the rights and one premium rate...
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.