Build a Better Web Audio Player
Pages: 1, 2, 3

Not Just for Singles

With MIME detection in place, we can now handle MP3 playlists, which didn't work in the previous implementation. To create a playlist, you simply type the URL of each audio file on a separate line in a text document, and then save the document with a .m3u extension. The following link will open a sequence of three MP3s from Spencer Critchley's article "Country Music's Digital Surprise," which walked through the surprisingly high-tech process of recording a song in Nashville. (The piano in part three was actually software running on a laptop, as you can see in Figure 4.)

• Three-Song Playlist (M3U)

Figure 4. Gene Rabbai tickles the virtual ivories in Nashville for Bo Billy's hit "When I See You Smile."

In-Place Embedding

I implemented the original player in a pop-up window so visitors could read multi-page articles without cutting off a sound that was playing on the current page. But several readers asked about embedding sounds directly. Here's how to do that, using an example from our article "The Synful Orchestra: Better Music Through Database Splicing:"

As before, we start with the link to the external JavaScript file:

<script src="BatmosphereAudioEmbed.js" type="text/javascript"></script>

The audio file gets embedded with its own script:

<script language="JavaScript" type="text/javascript">
   <!-- Call external JavaScript file to embed player
   embedPlayer("Fanfare","/examples/oreilly/digitalmedia/2006/05/better-player-copland.mp3"); // title, filename
   // -->
</script>

Of course, if visitors have JavaScript disabled, they won't see anything. So for safety, you can add a plain MP3 link after in a <noscript> tag, like this:

<noscript><a href="/examples/oreilly/digitalmedia/2006/05/better-player-copland.mp3" 
target="_blank">Fanfare</a></noscript>

Finally, the external file looks like this:

// Batmosphere Embedded Media Player, version 2006-05-31 
// Written by David Battino, www.batmosphere.com
// OK to use if this notice is included
// This function reads an MP3 URL and title from the referring page and generates embedding code to play back the audio file.
// Windows browsers (except for Internet Explorer) will play back the file with the Windows Media Player *plugin.* Internet Explorer will use Windows Media Player.
// Non-Windows browsers will play back the file with their standard audio handler for the MIME type audio/mpeg. On Macs, that handler will usually be QuickTime.

var audioFolder = ""; // If you have a default audio directory, e.g., http://www.your-media-hosting-site.com/sounds/, you can put it here to make links on the referring page shorter.

function embedPlayer(MP3title,MP3URL) { 
   // Get Operating System 
   var isWin = navigator.userAgent.toLowerCase().indexOf("windows") != -1;
   if (isWin) { // Use MIME type application/x-mplayer2
      visitorOS="Windows";
   } else { // Use MIME type audio/mpeg, audio/x-wav, etc.
      visitorOS="Other";
   }

   var audioURL = audioFolder + MP3URL;
   var objTypeTag = "application/x-mplayer2"; // The MIME type to load the WMP plugin in non-IE browsers on Windows
   if (visitorOS != "Windows") { objTypeTag = "audio/mpeg"}; // The MIME type for Macs and Linux 
  
   document.writeln("<div>");
   document.writeln("<strong style='font-size:18px; position:relative; top:-28px'>" + MP3title + "&nbsp;</strong>");  // Adjust font style to taste
   document.writeln("<object width='280' height='69'>"); // Width is the WMP minimum. Height = 45 (WMP controls) + 24 (WMP status bar) 
   document.writeln("<param name='type' value='" + objTypeTag + "'>");
   document.writeln("<param name='src' value='" + audioURL + "'>");
   document.writeln("<param name='autostart' value='0'>");
   document.writeln("<param name='showcontrols' value='1'>");
   document.writeln("<param name='showstatusbar' value='1'>");
   document.writeln("<embed src ='" + audioURL + "' type='" + objTypeTag + "' autoplay='false' autostart='0' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#ffffff'></embed>"); 
   
   // Firefox and Opera Win require both autostart and autoplay
   document.writeln("</object>");
   document.writeln("</div>");
   document.close(); // Finalizes the document
}

Play On

After an enormous amount of research and experimentation, I think I've finally found a near-universal way to embed audio in web pages without using Flash. I now have MP3s, M3Us, MIDs, AIFFs, WMAs, and WAVs playing on Windows (Internet Explorer 6, Internet Explorer 7, Firefox, and Opera) and the Mac (Safari, Firefox, Camino, and Opera). Better, the Windows browsers work both with and without QuickTime, and the JavaScript method is the recommended way to deal with Internet Explorer 7's aversion to embedded media. The only stubborn browser is Opera on the Mac, which tries to load the whole file before starting playback. I haven't been able to test this technique on Linux, so I'm curious to hear your experiences; please leave comments below.

My next goal is to develop an easy way to "skin" the player, probably by adding a few more variables to the launch links. I've also been experimenting with launching movie clips, though the multitude of codecs out there makes that onerous.

Eventually, I'd like to implement this technique in a non-Flash version of the Del.icio.us Play Tagger, a bookmarklet that rewrites any page you visit, replacing generic MP3 links with an embedded audio player. Play Tagger currently handles only MP3s at standard bitrates, and it seems to need to load them completely before starting playback, so there's room for improvement. And after all, that's is what got me interested in web audio in the first place. Download the tutorial files and let us know what you think.

David Battino is the audio editor for O’Reilly’s Digital Media site, the co-author of The Art of Digital Music, and on the steering committee for the Interactive Audio Special Interest Group (IASIG). He also writes, publishes, and performs Japanese kamishibai storycards.

Return to the digitalmedia.oreilly.com