Three Free & Easy Web Audio Players
Pages: 1, 2, 3

Batmosphere Multiplayer: DIY Gone Batty

Batmo Multiplayer
The player running in Firefox 2 on the Mac. (Click to enlarge.)

Here's my own stab at making an online audio player. Rather than Flash, it relies on built-in versions of QuickTime and Windows Media Player, so if your computer's set up right, it will play many more formats than Flash players. This player is very much a work in progress, but I learned a lot by puttering around with it, so I thought I'd share some of my discoveries.

Whereas Play Tagger and YMP insert a button in front of MP3 links, the Batmosphere Multiplayer actually rewrites the links themselves into triggers for pop-up players. The link's title tag becomes the caption, its ID becomes the headline, and if you insert an image tag in the audio link (before the text), the player embeds the image in the pop-up window as well.

I used a pop-up rather than an inline or floating player so that visitors can continue to hear songs as they surf between pages. You can see what it looks like at right. Notice how the window height scales to the size of the photo; Yahoo Media Player shrinks the image to a square. I also used styled text rather than an image to make the icon; that lets it scale with the surrounding text.

Here's the link format. As with YMP, you can hide the source image with a CSS display:none command:

<a href="MP3.mp3" title="This is a 44.1 kilohertz MP3." id="A Song for You">
<img src="demo-image.jpg" style="display:none;" />My Song</a>

Try it (may not work in Internet Explorer):My Song

Here are four variations of the link, starting with plain audio and adding features via tag attributes:

Batmosphere Multiplayer Format Tests

In the external JavaScript file that powers this player, I set up definitions to handle each of the audio file formats below. Whether they play back on your computer depends, unfortunately, on which plugins you have installed, but my Mac, equipped with QuickTime and the Flip4Mac and Perian extensions, played 'em all. Firefox on Windows Vista played everything but Ogg.

  1. MP3 (44.1kHz, 128kbps mono) — tall image
  2. MP3 (32kHz, 128kbps mono) — square image
  3. MP3Pro (44.1kHz, 64kbps mono)
  4. MIDI — wide image, no headline ID
  5. AIFF — audio only
  6. WAV — long caption
  7. WMA
  8. Ogg Vorbis
  9. m3u (curly apostrophe — should be encoded in title as &#8217;)

Under the Hood

You can examine the complete script at http://cachefly.oreilly.com/digitalmedia/2008/08/batmomultiplayer.js. In the script itself, I've commented briefly on most of the interesting techniques, but I'll walk through a few of them here. The script opens with this work-in-progress disclaimer:

// To do: move embedding function to external script to fix IE's 
"Click to Activate" error. Detect image height for Opera.

As mentioned, the script is working for me in Firefox and Safari on both Mac OS X and Windows Vista. It's not working at all in Internet Explorer, the turd in the punchbowl of online media. (Viewer discretion advised on that link.) That breakdown is probably due to a "security" issue, like IE's notorious "Click to Activate this Control" demand. Please let me know if you spot my error.

The Opera challenge is more interesting. I designed the script to embed an image in the pop-up window, scaling it to 250 pixels wide. In order to calculate how tall the resulting window needed to be, I grabbed the original dimensions of the image and multiplied their ratio by 250:

New Height = (250 x Old Height)/Old Width

I got the dimensions by calling the first child of the audio link (i.e., the image object inside the link tag), and then adding .height to the end of the variable:

o.setAttribute("onclick","javascript:BatPop(this.id,this.title,this.href,

this.firstChild);return false;"); // window name, caption, sound URL,
image object (in link)
...
 

imgScaleHeight = (imgwidth*imgObj.height/imgObj.width);

But Opera couldn't find the height of the image object. I'm guessing I'll need to load the image first and then detect its height.

The function that detects and modifies audio links is based closely on Play Tagger. I basically added more file extensions; Play Tagger modifies only .mp3 links:

var links=document.getElementsByTagName('a');

for (var i=0,o;o=links[i];i++){

if(o.href.match(/\.mp3$/i)||o.href.match(/\.wav$/i)

||o.href.match(/\.aif$/i)||o.href.match(/\.aiff$/i)

||o.href.match(/\.m3u$/i)||o.href.match(/\.wma$/i)

||o.href.match(/\.mid$/i)||o.href.match(/\.ogg$/i)){
The rounding function is handy; I implemented it after discovering Safari couldn't deal with fractional pixel heights: 

imgheight = Math.round(imgScaleHeight * Math.pow(10,0))/Math.pow(10,0);

The embedding code is based on my earlier players. The big discovery here was that specifying the MIME type application/x-ms-wmp forces Firefox to use the Windows Media Player plugin, which is what I wanted. And adding the ClassID parameter below does the same for Internet Explorer:

PlayerWin.document.write("<object width='"+imgwidth+"' 
height='65' classid='clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6'>");

Go Make Some Noise

So, there you have it: from the simplicity of Play Tagger to the extensibility of Yahoo Media Player and the crazed tinkering of the Batmosphere Multiplayer, there are more ways than ever to be heard online. Go out and make some noise, and please share your own web audio tips below.