One-Click Web Audio Player

Clicking an MP3 link is annoyingly unpredictable. Will it blank out the page you're viewing? Will it start to download to some hard-to-find folder? Will it boot you into a new window or throw an error message? You never know.

Several years ago, I got annoyed enough to write my own Web audio player to handle the MP3 examples in my articles. It uses JavaScript to intercept the visitor's click and pop up a playback window. Worked great on Macs, but unpredictably on PCs. So I piled on more code and got better results, though it's still a work in progress. Every new rev of Internet Explorer or Windows Media Player seems to break the code in wonderful new ways.

And what about the audio links on other people's sites? They were as unpredictable as ever. So inspired by the Del.icio.us Play Tagger bookmarklet, which inserts a tiny Flash playback button in front of every MP3 link on a page, I whipped up this one-click Web audio player. You simply drag this link — TinyPlayer — to your browser's bookmark toolbar and then click the resulting link on any page with audio links. (In addition to MP3s, it also handles AIFs and WAVs.) Assuming you have QuickTime installed and set to handle Internet audio, the bookmarklet will insert a QuickTime controller bar in front of each audio link on the page. That's right — it adds a playback position slider and a volume control, two things missing from Play Tagger.

Here's the code in the bookmarklet:

javascript:(function(){
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)){
var ply=document.createElement(%22embed%22);
ply.setAttribute(%22width%22,%22134%22); 
ply.setAttribute(%22height%22,%2216%22);
ply.setAttribute(%22type%22,%22audio/mpeg%22);
ply.setAttribute(%22src%22,o.href);
ply.setAttribute(%22kioskmode%22,%22true%22);
ply.setAttribute(%22autoplay%22,%22false%22);
ply.style.marginRight='0.5em';
o.parentNode.insertBefore(ply,o)}}})()

When you click the bookmarklet link, this function scans through the page looking for "a" (link) tags, assigning them to the array called "links." For each element "o" in the array whose name contains ".mp3," ".aif," or ".wav," the function then inserts an embed tag ("ply") whose source file is the audio link itself.

Try it with these links:

• MP3 (Source: "The eSession Experience: Online Recording for All")
• AIFF (Source: "Review: Olympus DS-2 Stereo Voice Recorder")
• WAV (Source: "Singing With Your Thumbs: How To Make User Interfaces Musical")
• WMA (Source: "Free Your Music: How to Convert Digital Audio Files")

Note that (assuming the TinyPlayer worked on your computer) the WMA file didn't get a controller bar, because the .wma extension is not listed in the function. Also notice that clicking the TinyPlayer bookmarklet again inserts another controller bar. Play Tagger has a destroy() function to prevent that, but I haven't implemented an equivalent version yet.

Also on my To Do list: making the bookmarklet initially insert a play button rather than embedding the audio file. On pages with a lot of links, the current method loads every audio file on the page into an embedded player, causing a big bandwidth hit for the host. And, of course, I need to move the whole embedding function to an external file so Internet Explorer doesn't throw its "Click to activate this control" hissy fit.

Please leave a comment below if you have more thoughts on improving the player.