Tiger Tip #7: Hacking the RabbitRadio Dashboard Widget

by Chuck Toporek

I love listening to NPR. When I would commute to/from work at O'Reilly, I'd have my car radio tuned to the local NPR station so I could get traffic info, hear the latest news, and more. But now that I work from home, my NPR listening habits have changed to when I'd make my morning coffee run (some habits die hard) or while running errands on the weekend (which I'd time appropriately so I could listen to Car Talk.

So, imagine my elation a few weeks ago when I saw there was a Dashboard widget (RabbitRadio) that would let you tune into a select few NPR stations. I think it took me about a millisecond to decide Rabbit Radio was a widget for me, and a few seconds later, the widget was downloaded and running on my Tiger system.

Except, there was one problem: I live in Portland, Oregon, and KOPB wasn't included as one of the NPR stations you could listen to in Rabbit Radio. Bummed as I might be, it took a few more milliseconds for me to remember that Dashboard widgets are nothing more than HTML, JavaScript, and CSS, so I put my former web developer hat on and hacked on RabbitRadio to get it to do what I wanted.

For this project, you'll need the following items:

  • The RabbitRadio widget (download from the link above)

  • A text editor, such as BBEdit, TextEdit (found in your Applications folder, or for you command-line junkies, vi.

  • A URL for the audio stream for the radio station you're wanting to listen to.

This isn't rocket science folks, and it's really simple, so here goes...

  1. In the Finder, select your Home folder and go to Library > Widgets. This is the folder where all of the widgets you've downloaded are installed on your Mac.

  2. Select the Rabbit Radio widget (it's named RabbitRadio.wdgt).

  3. Hit Return; this makes the name of the RabbitRadio.wdgt file editable. Hit the left arrow key and then hit the Delete key to remove the .wdgt file extension. Hit Return again and the Widget file turns into a folder. Now you can access the resource files for the Rabbit Radio widget.

  4. Double-click on the RabbitRadio folder to open it up in the Finder (or if you use the Finder's Column View, just select the folder and you'll see all its contents in the pane to the right).

  5. In that folder, you'll see a file named RabbitRadio.html. You'll want to open this file in your text editor of choice. You can do this by Control-clicking on the file and selecting Open With > and then select your text editor. For me, I use BBEdit (because it's software that doesn't suck!).

  6. Scroll down in the document until you find a block of code that looks like the following:


  7. Now copy the following line and paste another copy of it into the file:

    stationList.push(new Station('KQED', 'West', 'QT', 'http://www.kqed.org/w/streamingfiles/kqed_qt.mov'));

    As you can see, this identifies the station name (KQED) and provides a link to the live streaming feed from that station.

  8. Before I can insert the link into the HTML file, I need to get the URL for KOPB's live feed, so I went to Oregon Public Broadcasting's web page, clicked on their "Listen Live" graphic, and right at the top of the next page was a set of links for "Live Radio Stream (MP3)". Perfect! Just what I'm looking for.

  9. Control-click on the link that says "Stream for iTunes, Quicktime, Winamp or Real Audio Player", and then select Copy Link from the context menu that appears. This copies the URL for KOPB's live feed to the pasteboard (which, of course, means you can paste it into something else...hmmm...I wonder what that could be...)

  10. Now go back to your text editor to the line you copied and pasted earlier. Select the text for KQED and replace it with KOPB.

  11. Next, select the URL for KQED's feed, and then hit Command-V to paste in the URL for KOPB's feed. That line should look like this:

    stationList.push(new Station('KOPB', 'West', 'QT', 'http://www.opb.org/programs/streams/stream-radio.pls'));

  12. Hit Command-S to save the changes you've made to the file, and then quit your text editor.

  13. Now go back to the Finder window and select the RabbitRadio folder (remember, you changed it into a folder).

  14. Hit Return so you can edit the name of the folder.

  15. Hit the Right Arrow key to move the cursor to the end of the folder's name and type in .wdgt and hit Return. You'll see an alert dialog box, asking if you really want to add that extension to the file. Of course you do, so click the Add button.

After clicking the Add button, the RabbitRadio folder changes back to its normal widget self. Now when you open the Dashboard, check the back of RabbitRadio's interface and you'll see KOPB listed in the pop-up that lists all the stations.

What's great about this is that you don't just have to add NPR stations to the list. If your favorite local radio station offers a live feed over the Internet, you can add that feed to RabbitRadio as well. So, go on, mix it up. Hack on those widgets, it's just code.

What do you think of Dashboard and the widgets? Have you hacked on any? Created some? Let us know what you've been up to.


2005-06-15 05:36:49
If only all local public radio stations used mp3. :(
2005-06-28 11:53:16
Widget Hacks
I enjoyed your hack for RabbitRadio - very well written and documented, easy to understand and follow.

How about another one for Apple's Addressbook. I followed someone's instructions on the Internet last night to Hack Apple's PhoneBook Widget to allow it to use Google Maps. But I have not seen any easy to understand or follow instructions to change AddressBook from using MapQuest to Google Maps. Can you help out there? Thanks... You do GREAT instructions!!

2005-06-28 15:47:37
Hacking Widgets
Thank you for the great walkthrough. I learned a number of tips on hacking OSX files that I'm sure will be helpful in the future. Couple things:
1) I had to rename both the widget file and the .html file to end with .txt in order to open and edit them.
2) the hack works for WMUK in Kalamazoo, MI, but the audio cuts out after about 10 seconds. If I stop and restart the feed, it plays then cuts out again.
Thanks again!
2005-07-24 05:11:43
Hack Doesn't Work
I can't get this to work with WUAL (Tuscaloosa, AL). The station never begins to play, although it does play in iTunes.