The ultimate embedded MP3 player: SoundManager 2 and hAudio

20after4 — Sat, 31 May 2008 06:54:56 -0500

Tonight I implemented this MP3 player for my band's website using SoundManager 2 and minimal support for the hAudio Microformat.

I'm rather pleased with the way that this turned out. Thanks to SoundManager 2 I have a nice playlist embedded directly in the semantic html on the page. Javascript catches clicks and hands off the URL to a hidden Flash object embedded on the page. It degrades gracefully: users without Javascript or Flash support will still be able to download the mp3 file since it's the target of a href link and the hAudio microformat should make it robot-friendly.

Another benefit: Songbird can see the mp3 files automatically populate it's web playlist.

If you would like to implement something similar you can visit this page and view the source, or check out the examples on the SoundManager 2 Project Page.

Improving Drupal's support for the rel-tag Microformat

20after4 — Wed, 18 Jul 2007 16:27:40 -0500

I recently installed the Operator extension for Firefox. Operator is an interesting little extension which attempts to expose microformats embedded in web pages through a toolbar in the browser.

While browsing this site with Operator installed I noticed a problem with the tags that are typically attached to each post to organize the site into categories. Drupal attempts to conform to the rel-tag microformat by attaching a rel="tag" attribute to each tag link (Look at the section titled Tags: at the top of this post.) The problem is that drupal uses numbers for each category (aka "Taxonomy Term.") and numbers don't make very readable tags. As several others have already pointed out, this could be considered a deficiency in the microformat. The rel-tag specification doesn't provide any alternate way to specify a text-version of the tag, other than the last segment of the url. In the case of drupal, the last segment of a taxonomy url is the taxonomy term id, which is a number.

Fortunately, this is one case where the flexibility of Drupal's API comes to the rescue. I did a quick search of Drupal.org and turned up this post. The solution offered was not up to date with Drupal 5.x and it didn't work for my version, however, that article mentioned a new API hook in Drupal HEAD called hook_link_alter, a feature that eventually made it's way into the final release for Drupal 5. Using hook_link_alter I was able to hack together a short function that rewrites the tag links so that they end with the tag name instead of a number. Fortunately for us, Drupal's taxonomy system ignores the extra baggage on the end of taxonomy URLs and everything still works as expected.

All of this explanation has quickly become much longer than the code that I am describing. Without further delay, here is some code that you can place in your drupal theme's template.php to make more sensible rel-tag taxonomy links:


/* Alter rel-tag links to include the link tag name in the url */
function blog_link_alter(&$node, &$links) {
        foreach ($links AS $module => $link) {
                if ($link['attributes']['rel'] == 'tag' && !empty($link['title'])) {
                        $links[$module]['href'] .= "/".$link['title'];
                }
        }
}

Warning: This is slightly hackish because I am placing a drupal api hook inside a theme template.php - this hook is prefixed with the blog module name and it actually belongs inside the blog module, however, I don't want to alter drupal core code so I chose to place this in my theme.

Technorati tags: drupal, rel-tag