Author's Note: After additional testing, I've learned that the scripts in this article may not work in some Windows browsers (notably Firefox and Opera) if QuickTime is not installed. For updated scripts, please see Build a Better Web Audio Player. The core ideas are the same, however, so I recommend reading this article first.

There's a newer version of this article: Build a Better Web Audio Player | May 31, 2006. Also, read a newer article about Free and Easy Web MP3 Players.

Download tutorial files (168KB zip file)

I've discovered a slick way to showcase MP3s on a web site. When visitors click one of these special links, their browsers create a pop-up music player on the fly, complete with the song’s title, playback controls, and a download link. Even better, this method doesn’t require messing with Flash or third-party plugins; you simply insert some basic JavaScript and then tweak it to taste. If you use Dreamweaver, then building these special links is even easier, because the free Dreamweaver extension at the end of this article lets you make the links just by clicking a button and typing some text into a form.

Here’s an example of how it works, using an acoustic guitar MP3 from Scott Tusa’s Ableton Live tutorial:

If your browser has JavaScript enabled, you should have seen a pop-up window like this:

Pop-up windows The pop-up MP3 player window, as it appears in Apple Safari (via QuickTime) and Microsoft Internet Explorer (via Windows Media Player).

But this technique should work even if you’ve disabled JavaScript or opened the link in a new window (by right-clicking it, for example). In that case, the MP3 should have opened in a blank window or in the program that’s set to play Internet audio on your system—such as iTunes, Windows Media Player, or Winamp. In other words, the fallback is to use the same behavior as a plain text link, for example, <a href="my_song.mp3" target="_blank">Hear my song</a>. (The target attribute prevents the link from blanking out the launch window, by forcing it to open in a new window.)

It’s Embed Time

The quickest way to add an MP3 link to a web page is to use the <a href=...> syntax mentioned above. But as noted, that basic text link gives your visitors an unpredictable experience—either blotting out their screen with a vast new window or booting them out of their web browser into a media-player program.

In both pop-up windows above, the audio file is embedded in the web page, causing the browser to display the playback controls. No additional graphics are necessary, because they’re pulled from the helper application or plugin, such as QuickTime or Windows Media Player. The basic syntax for embedding is:

<embed src="my_song.mp3" width="300" height="42" ></embed>

(You can alter the height and width values to suit your layout, but it’s best to include them even if you decide not to display the controller. I chose a height of 42 because it accommodated the Windows Media Player controller. Douglas Adams was right.) You can add numerous attributes to the embed tag. In our player, the full entry is:

<embed src="gtr.mp3" autostart="true" loop="false" width="300" height="42" controller="true" bgcolor="#FF9900"></embed>

The autostart=true attribute causes the file to begin playing as soon as the window loads. The background color (bgcolor) attribute fills in the blank vertical space around the shorter QuickTime controller; the color choice is up to you. For clarity, I also shortened the URL of the MP3 file; here’s the actual URL.

Unfortunately, the embed tag was never officially accepted into the HTML specification, and many browsers (notably Internet Explorer) went with the object tag instead. So to handle both cases, we wrap the embed tag in an object tag with the same parameters and values:

<object width="300" height="42">
<param name="src" value="gtr.mp3">
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="bgcolor" value="#FF9900">
<embed src="gtr.mp3" autostart="true" loop="false" width="300" height="42" controller="true" bgcolor="#FF9900"></embed>
</object>

To get a sense of how powerful embedding is, check out MouseJam.com. On this site (which requires QuickTime because it was developed before the object tag took over), you can trigger clever riffs and sound bites over a streaming MIDI groove.

The Link System

And now the good news: You don’t have to write out any of this code, because I’ve put it in an external JavaScript file for you. To add these pop-up audio-player links to your site, you simply put a link to the external file in the head of your document like this:

<script language="JavaScript" type="text/javascript" src="soundpop.js"></script>

Then you pass the relevant values (the window title and the audio file URL) to the JavaScript with a link like this:

<a href="gtr.mp3" target="_blank" onclick="javascript:PlayerOpen('Ex. 1: Acoustic Guitar',this.href); return false">Play Some Guitar</a>

The JavaScript file contains a function called PlayerOpen that accepts the values from the link and generates a pop-up window. Visitors who have disabled JavaScript or who open the link in a new window will trigger the basic text link. The rest will be intercepted by the onclick event handler and will trigger the JavaScript. Note the return attribute at the end of the JavaScript call; it prevents the browser from returning to fire off the text link. Also note that the URL sent by the JavaScript is formatted as this.href rather than 'gtr.mp3'. Not only does that save space, it prevents the link from breaking if you move the MP3 or the HTML file to a different directory and let your HTML editor update the text links in the document.

Leave It to JavaScript

Now let’s peek inside the external JavaScript file. The core of the file is the object and embedding code we discussed previously. That’s surrounded by code that generates a simple web page and formats the text:

var UniqueID = 314 // Make each link open in a new window
var
newWinOffset = 0 // Position of first pop-up

function PlayerOpen(soundfiledesc,soundfilepath) {
PlayWin = window.open('',UniqueID,'width=320,height=190,top=' + newWinOffset +',left=0,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0,personalbar=0');
PlayWin.focus();

var
winContent = "<HTML><HEAD><TITLE>" + soundfiledesc + "</TITLE></HEAD><BODY bgcolor='#FF9900'>";
winContent += "<B style='font-size:18px;font-family:Verdana,sans-serif;line-height:1.5'>" + soundfiledesc + "</B>";

winContent += "<OBJECT width='300' height='42'>";
winContent += "<param name='SRC' value='" + soundfilepath + "'>";
winContent += "<param name='AUTOPLAY' VALUE='true'>";
winContent += "<param name='CONTROLLER' VALUE='true'>";
winContent += "<param name='BGCOLOR' VALUE='#FF9900'>";
winContent += "<EMBED SRC='" + soundfilepath + "' AUTOSTART='TRUE' LOOP='FALSE' WIDTH='300' HEIGHT='42' CONTROLLER='TRUE' BGCOLOR='#FF9900'></EMBED>";
winContent += "</OBJECT>";

winContent += "<p style='font-size:12px;font-family:Verdana,sans-serif;text-align:center'><a href='" + soundfilepath +"'>Download this file</a> <SPAN style='font-size:10px'>(right-click or Option-click)</SPAN></p>";
winContent += "<FORM><DIV align='center'><INPUT type='button' value='Close this window' onclick='javascript:window.close();'></DIV></FORM>";
winContent += "</BODY></HTML>";

PlayWin.document.write(winContent);
PlayWin.document.close(); // "Finalizes" new window
UniqueID = UniqueID + 1 // newWinOffset = newWinOffset + 20 // subsequent pop-ups will be this many pixels lower
}

Currently, every window will open at the top of the screen. To stagger new windows downward, remove the first two slashes in the second-to-last line, following the phrase “UniqueID + 1”. I also experimented with setting the UniqueID variable to equal the value of soundfilepath. That prevented subsequent clicks on the same link from opening duplicate versions of the pop-up. However, Internet Explorer was not able to resolve a window ID with the long soundfilepath text string. A workaround would be to send the ID as a third variable.

For the Dreamweavers

As promised, here’s a shortcut for Dreamweaver users. When you install the Batmo_Embed_Pop.mxp extension (4KB zip file) in Dreamweaver, you'll gain an Insert menu command called Batmo_Embed_Pop. Simply click the cursor where you want to insert a link, and select Batmo_Embed_Pop from Dreamweaver’s Insert menu or Media palette. You’ll see a window like the one below. Enter appropriate values, click OK, and Dreamweaver will insert a complete pop-up link, JavaScript and all.

Dreamweaver Extension Dreamweaver users can insert pop-up embedder links with a few clicks after installing the free Batmo_Embed_Pop extension.

Parting Thoughts

I’ve had great success with this pop-up embedding method; you’ll see a variation of it used throughout the O’Reilly Digital Media site to showcase MP3s, graphics, and even movies. In the three years I’ve been using it, I’ve come across only one problem, and that was when I used it on the DVD-ROM that’s bundled with my book. Computers with Windows XP Service Pack 2 will throw up security alerts unless you configure Internet Explorer to allow ActiveX content on removable media. Another annoyance I haven’t yet tracked down is that browsers on the Mac will sometimes go silent briefly just after playback starts. One person theorized that encoding the MP3 differently might solve that, because MP3s he made on an older encoder don’t seem to suffer the dropout. But overall, the technique has greatly simplified web design and delivered a better experience to visitors.

JavaScript & DHTML Cookbook

Related Reading

JavaScript & DHTML Cookbook
Solutions and Example for Web Programmers
By Danny Goodman