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
- Working with Apache Cordova to make a cross-platform hybrid Mobile App
Write once, run anywhere
Despite its best intentions, the motto of Java did not ring quite so true when it came to natively supporting the complex slew of Mobile devices such as Smart Phones, Tablets, E-Readers and Fitness Devices (wearables, smartwatches, etc) that began to emerge in the mid 2000's through to today. Theoretically, yes, one... - Noise Isolation .vs. Cancellation .vs. Reduction – protect your ears and work in peace & quiet
Most of the time, Developers' day-to-day jobs can be a bit stressful. With tight deadlines, high expectations, and often unwieldy applications/codebases to manage, you can see how there really is a need to be able to concentrate in order to succeed in this role. Of course, this applies to non-technical roles as well, but in...
- Making a Rock-Paper-Scissors game Multiplayer
Multiplayer features require networking capabilities of some sort, and typically, a form of persistent data storage (i.e. to save things like "Leaderboards" to keep track of Wins/Losses/Draws in the case of our RPS game). ...
- Integrate PHP based SOAP RPS game server in another language, JAVA desktop GUI
Now that we have a Web Service ready to consume (even though it is SOAP based), it should be pretty easy to extend to Java, which also means it should be possible with a little bit of effort to create a Desktop GUI.
For more on creating a Java-based SOAP server to have an all-Java version... - Exposing your PHP Rock Paper Scissors game via SOAP Web Services
So why SOAP? Well quite simply this was what I used back when I was first working through PHP and learning the hard way how to expose some server-side "business logic" as a Web Service. This was over a decade ago (late 2006 through 2007), and Google's SOAP Search API had yet to be phased...
- Moving a command-line PHP Rock Paper Scissors game to the Browser
In the first part we saw an example for creating a PHP Rock Paper Scissors game that waits for user input via the command-line and then evaluates the output of the game. Next we see an example for porting our basic command-line PHP Rock Paper Scissors game to the browser to reach a broader audience,...
- Creating a basic Rock Paper Scissors game in PHP
This tutorial will outline the creation of a very basic game I created a long time ago in PHP for the purpose of learning some basic concepts around inputs/outputs from the command-line, decision trees (nested "if-elseif-else" type statements) and variability in PHP's presentation layer. I thought I'd dust this one off in particular to emphasize...
- Raspberry PI – Alexa PI experiment
Turn your Raspberry PI into a fully functioning Alexa (either by literally calling Amazon's Alexa APIs, or, calling a variety of services in specialized areas as a stand-in). ...
- 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...
- HSVO project problems and NRC’s SAVOIR 2.0 SDK solution
In the last post I set the context for the HSVO project and how I winded up a member of it via my contract at NRC, setting the stage to help any potential readers understand all the partners and the objectives they had going in.
Now I'll talk about the major problems faced on the...
In the last post I set the context for the HSVO project and how I winded up a member of it via my contract at NRC, setting the stage to help any potential readers understand all the partners and the objectives they had going in.
Now I'll talk about the major problems faced on the...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.
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.