Posted on 10 July 2010

I’m a huge fan of the Instapaper app. For those not in the know, it’s a tool designed to help you collect long-form reading material found online for later, offline-style consumption. There are many benefits to this, not the least of which being that you’ll probably read it faster and absorb more information (not to mention, sometimes it’s just nice to read things not on a computer screen). But it’s also nice to just have a place where you quickly and easy find everything you’ve come across that you want to read. With Instapaper, rather than having a bunch of bookmarks stored in your toolbar, you just visit Instapaper, anywhere, and there it all is.
The thing is, as much as I like to read, I’m also a radio guy. For CBC, I like to review interview spots that I researched so I can listen to which questions worked and which didn’t, in order to improve my script-writing. At CFUR, I review shows for quality control, as well as reviewing music for possible addition to the library. And, as with reading, I’ll often come across podcasts or embedded audio posts from other stations, shows, or thinkers whose theme or ideas I think I’d be interested in hearing. But I don’t tend to do my listening while sitting at a computer, because that’s when I’m reading or writing. Rather, I listen on my daily commute, or at home while I’m doing other tasks like dishes or gardening.
Until now, my solution has been to either tag the item in Delicious under “to listen” or download it to a playlist on my iPod. The problem with the latter solution is that I don’t necessarily want to fill my iPod with a bunch of one-time listening material and that I use a Mac at home and PCs at work (iPods are either PC or Mac compatible, but not both at once). The Delicious solution is fine, but the audio isn’t necessarily always somewhere I can tag it easily (sometimes it’s only on my computer so I have to upload it to a site, then tag it), and it’s also not really what I want to use my Delicious for (it’s more things I’ve read and will come back to, not things I’m going to read). Also, it means I have to open a bunch of different windows and keep going back to them whereas what I really want is a continuous playlist so I don’t have to wash or dry my hands every five minutes (remember, I’m gardening or washing dishes here). So today I decided to build a quick Tumblr blog and bookmark shortcut that would replicate the “read later” functionality of Instapaper for audio posts. An example is at listenlater.tumblr.com, and the instructions on how I made it are below.


(By the way, a shout-out to Marco who is behind both Tumblr and Instapaper. I’ve never met him, but I figured I might as well publicly thank him here for giving me two of the web’s most useful tools.)
How to Make Your Own “Listen Later” Tumblr Blog
What you’ll need:

• a Tumblr account (you could replicate this with other blogging platforms, but I think Tumblr is the easiest)

What you may want:

• Firefox (again, this is probably doable using other browsers, but Firefox is what I’m giving instructions for, plus it has the optional
• DownloadHelper Firefox add-on which lets you find the mp3 files embedded in any web page, even when they aren’t readily apparent.

Part One: Make the Blog
1. First, make the Tumblr blog for your personalized playlist. Choose whichever theme you like, I don’t think it matters, though there is variance in the themes whether or not there is a “download” option. This may matter to you if you plan on using this as an iPod filling hub.
NOTE: Don’t be intimidated if you’ve never made a website before! Tumblr is super-easy and intuitive to set-up, and this doesn’t have to be pretty– it’s just a listening station. There’s even an option during the set-up process to password protect your blog if you’re worried about other people seeing it.
2. Add the Streampad app to your blog. Again, this is really easy, the instructions for doing it on Tumblr are right here. The reason we’re doing this is so you have a handy-dandy “click to play all audio posts” option at the bottom of your blog– this is where the playlist style comes in. You can click this button once, and it will play everything on your blog.

Part 2: Make the bookmarklet
So now your blog is ready to go, but how do we recreate the simplicity of Instapaper’s one-touch “read later” bookmarklet? By modifying Tumblr’s handy “Share on Tumblr” bookmarklet, of course!
1. Go to tumblr.com/goodies and, as the instructions tell you, drag the “Share on Tumblr” bookmarklet into your toolbar and put it wherever you want.
2. Here’s where the instructions are Firefox only, though I’m sure you can do this in other browsers. Hover your mouse over the “Share on Tumblr” bookmarklet and right-click. At the very bottom of the toolbar options you will see “Properties.” Click on that.

(Note: you can get to the same point by going to “Bookmarks” in the top menu bar and choosing “customize bookmarks” or simply by hitting ctrl+shift+b) and then clicking on the “Share on Tumblr” bookmark).
3. In the “Location” field you will have an address that says:
javascript:var%20d=document,w=window,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),f=’http://www.tumblr.com/share’,l=d.location,e=encodeURIComponent,p=’?v=3&u=’+e(l.href)%20+’&t=’+e(d.title)%20+’&s=’+e(s),u=f+p;try{if(!/^(.*\.)?tumblr[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a%20=function(){if(!w.open(u,’t’,’toolbar=0,resizable=0,status=1,width=450,height=430′))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)

The key part of this http://www.tumblr.com/share. Replace that with http://www.tumblr.com/tumblelog/yourtumblrshortname/new/audio.
Your Tumblr short name is whatever comes after http:// and before tumblr.com in your blog’s web address. So if you find your blog by visiting http://mylistenlaterpage.tumblr.com, replace yourtumblrshortname with mylistenlaterpage.
4. You may want to change the name from “Share on Tumblr” to something like “Listen Later” in order to distinguish the bookmarklet from any other Tumblr bookmarklets you might have.
5. Hit save and your ready to go!
Part 3: Finding the mp3 location
Tumblr gives you two options with audio posts: you can upload an mp3 from your computer, or you can enter the url of any mp3 file on the web. Here’s how to find the latter.
Option 1: Go directly to the mp3.
Fairly simple, most of the time. If there’s a direct mp3/download mp3 link, you should be able to click on it to go to a mp3 page. You can try it out with this 43 folders podcast where it says “Direct mp3 download.” Once you click on that, you’ll come to this page.

Option 2: Copy Link Location
Rather than going to the mp3 page, simply find the link to it, right click, and hit “copy link location.”

Option 3: Find hidden mp3 links
Sometimes the link to an mp3 file isn’t readily apparent. That’s where DownloadHelper (and the need for Firefox) comes in. It’s a handy little add-on that, among other things, can automatically determine the location of any embedded mp3 files. One you have it installed, whenever you start to play an mp3 file, its little widget should start to spin. Click on that and choose the “copy url” option, which will again record the address of the mp3.

Part 4: It All Comes Together
Once you have copied the url of the mp3 you want to save for later listening, simply click on your “listen later” bookmarklet, and a new window will open asking you to create an audio post in your listen later Tumblr blog.

Choose “use an externally hosted audio post,” paste the mp3 location, add a description and tags (if you want) and hit publish. Now, when you visit your Listen Later blog from any location later in the day, you have a playlist of all the audio you’ve been wanting to hear.
photo via Flickr/suchitra prints

Filed under: how to