![]()
While working with Jurriaan on a podcast for BeyondJazz.net (with their excellent sample spotters show), I finished a small project I had been working on a couple of months ago: a web-based streaming media player for MP3/RAM/WMA files. I actually stopped it when I saw the excellent work Lucas Gonze had done with Webjay. Didn’t feel like re-inventing the hot water.
But now I have added a visual part: I wanted to have a one-click “play this in my media player and show me the playlist at the same time”. So I worked further on the formats that support playing audio while showing a web page at the same time: SMIL (works with RealPlayer and QuickTime) and ASX (Windows Media Player). Since the BeyondJazz blog is not yet public, I also used this system on the Traxsource Cyberjamz Radio Show (another one of my music podcast experiments, together with Traxsource/Brian Tappert).
The idea is the following: instead of having the title of the post as a link to the MP3 (in some cases, when you click it, your browser starts downloading all those megabytes before the audio starts playing), I now have 3 icons: one for playing it in RealPlayer, one for Windows Media Player and one for direct downloading. To do this, I actually just edited the Blogger template as follows:
<h3 class="post-title"><$BlogItemTitle$>
<BlogItemUrl>
<a href="http://www.smoothouse.org/projects/media/player.asp? type=smil&url=<$BlogItemUrl$>&page=<$BlogItemPermalinkUrl$>"
title="Click to open in your RealAudio player">
<img border=0 width="20" height="20" alt="Click to open in your RealAudio player" src="http://www.smoothouse.org/projects/podcast/icon_ram.gif">
</a>
<a href="http://www.smoothouse.org/projects/media/player.asp? type=asx&url=<$BlogItemUrl$>&page=<$BlogItemPermalinkUrl$>"
title="Click to open in your Windows Media player">
<img border=0 width="20" height="20" alt="Click to open in your Windows Media player" src="http://www.smoothouse.org/projects/podcast/icon_wma.gif">
</a>
<a href="<$BlogItemUrl$>"
title="Right-click to download">
<img border=0 width="20" height="20" alt="Right-click to download" src="http://www.smoothouse.org/projects/podcast/icon_download.gif">
</a>
</BlogItemUrl>
</h3>
(if you’re familiar with HTML and/or Blogger templates, try this at home. If you’re not, wear protection.)
I still have to work out some quirks with the Real/SMIL format (on some machines the HTML page does not show), but apart from that, it works like a charm: you click the icon, your player opens, the music starts playing and you see the associated post page in your player.
Remark: this trick does not affect the core podcast as such: the MP3 files, the RSS feed, … stay the same. It’s just a user interface enhancement for the associated blog, with a detailed description for Blogger users. The principle as such will work on any Movable Type, WordPress, or other Pivot.
PS: So what are podcasting tricks #1 to #4?
Well, with all this mumbo jumbo I’ve already posted on podcasting, I couldn’t start counting at #1, now could I? Let me improvize:
#1: easy podcasting with Blogger and Smartcast
#2: podcasting with Webjay
#3: ID3 tags for podcasting
#4: Podcast icons – the definitive collection (also a Pixagogo album)
____
Update Jan 19: the Beyondjazz Podcast is now publicly available.

This is something I experienced myself and have seen in others too: while it is possible to listen to podcasts at your PC, it’s not ideal. You start reading your email, dive into the fridge, switch on the television and get terribly distracted. For me it was also a 2-hour morning commute listening to 
Recent Comments