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”:

As a consultant, I often get clients that ask me to add audio to their site…
I am trying to find new ways that make the user experience more pleasurable. I looked at Goose a few weeks ago, and even though I really liked it, it does end up looking like advertising for yahoo…which doesn’t fly with most clients. If you have a nice website (that you spent money on to customize) you don’t want a branded media player. And even though the functionality is flawless, and intuitive, the fact that there are two links back to yahoo (logo and “find out more about this player”) makes most people say “isn’t there anything else”….
So I found that when I show them something simple, like the wordpress player,http://wpaudioplayer.com/standalone
their eyes pop out and they say “exactly”!

Simple, non intrusive, big buttons, with just enough animation to make people go “wow”.

thanks alot for the info.
Customization really makes a big difference when you are dealing with picky clients. People want everything custom… and every tool has it’s own limitations. which can drive a designer to the point of writing a player from scratch (usually not the best move).