O’Reilly on goose

Over on the O’Reilly Digital Media site, David Battino has published a piece called Three Free & Easy Web Audio Players which covers Delicious Playtagger, Goose aka Yahoo Media Player, and a new player of his own design.

Want to play MP3s on your site? I did. The unpredictable behavior of audio links annoyed me so much that I finally broke down and wrote my own player. And then I wrote several more. An enterprising bloke in Australia even copied my code and started selling it as his own. But web audio is a treacherous world, and we both learned that what worked well on our own browsers often sputtered horribly on other people’s. … In this article, I’ll look at two free players you can add to your own site with a single line of code. … Inspired by Play Tagger and YMP, I revisited my JavaScript-based web audio player.

In David’s own Batmosphere Multiplayer player he introduces some cool new ideas. Media links that have been made playable launch the player when you click on them without affecting the link itself, so a user can still do right-click+save-as. Also, in the popout window for the player he scales the window to the size of any album art specified by the user, which is pretty damn slick.

A cool accident of the layout of this article is that it captures a sort of threaded conversation among developers of web audio players. Playtagger came first, goose came second, the Batmosphere player came third, and each was an iteration of shared ideas. They all add small play buttons to plain vanilla media links in HTML documents — that was a delicious innovation which goose copied and batmosphere picked up in turn. Goose extended the concept by allowing publishers to customize the player using various fields of the anchor; for example, you can set the song title by using the standard “title” attribute of an HTML anchor element. Batmosphere picks up on these features and adds to the pool by letting you use the “id” attribute to specify a caption.

---

One subtle, important, and usually overlooked aspect of the goose anchor syntax is that it doesn’t rely on file extensions. Playtagger, for example, requires you to have a URL that ends in “.mp3”, like this:

<a href="example.mp3">my song</a>

But what if your URL doesn’t end in “.mp3”?

<a href="getmp3.php">my song</a>

What if it ends in .mp3 but redirects to an HTML page?

<a href="getphp.mp3">my web page</a>

The design of the web explicitly rules out using the extension to tell the browser what kind of file is on the other end of a link. This is to allow tools designed specifically for the job to be used — MIME types and HTTP content negotiation. And goose supports both of them.

Goose allows you to set the MIME type by using the “type” attribute, so that this *will* get picked up:

<a href="getmp3.php" type="audio/mpeg">my song</a>

And this *won’t* get picked up:

<a href="getphp.mp3" type="text/html">my web page</a>

It allows you to use content negotiation by setting the link class to “htrack”:

<a href="getaudiofile.php" class="htrack">this might be AAC or WMA</a>

For a deeper explanation of the relationship between content negotiation, MIME types, and file extensions in URLs, check out Content Negotiation: why it is useful, and how to make it work. For more details on how goose interprets link syntax, see how to link in the goose wiki.