Podcasting trick #5: play-it-now buttons

Traxsource podcast
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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.