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$>


<a href="http://www.smoothouse.org/projects/media/player.asp? type=smil&url=<$BlogItemUrl$>&page=<$BlogItemPermalinkUrl$>"
title="Click to open in your RealAudio player">
Click to open in your RealAudio player
</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">
Click to open in your Windows Media player
</a>
<a href="<$BlogItemUrl$>"
title="Right-click to download">
Right-click to download
</a>


</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.

💬 music💬 webdev