Tango, photography and whatever's bleeding edge
This CSS cheat sheet is gonna save me a couple of Google searches next time I start fiddling around with my layout:
margin:
Sets the size of the overall margin of an element. Negative values are permitted, but exercise caution. Multiple values start from the top and go clockwise.
H1 {margin: 2em;}
P {0% 5% 0% 5%;}
(from Brett Merkey’s CSS Cheatsheet)
made with Atom Smasher’s Error Message Generator
Programming is the process of converting caffeine into error messages.
(via Joel on Software)
(There is an updated post at Click to hear the MP3 playlist (Apr 2006))
When you want to have an embedded player in a web page, there are several options: working with an embedded RealPlayer or WindowsMedia player – which do not all work on a Mac/Linux platform or with Firefox. Another option is using a Flash player. Flash/ShockWave is supported on all platforms and in all browsers. I went on a search for free embedded Flash players:
<script> tags in its posts, only in the template.) 
<object> and <embed> tags. 
<object> and <embed> tags. 
RadioBlogClub config.xml file, that points to a playlist. For more information on playlist formats (XSPF, SMIL, ASX, …), check out Lucas Gonze’s excellent survey.
There are also some commercial options: hooverwebdesign.com ($50), wimpyplayer.com ($25), soundnails.com ($15)
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.
Recent Comments