Web Audio Obstacle Course
After getting annoyed by the way MP3 links work—blanking out the browser window or triggering a download dialog instead of simply playing music—I whipped up a JavaScript hack called “Build a Simple MP3 Player for Your Site.” That article has become one of our most popular, and we now use the technique throughout the O’Reilly Digital Media site. Several readers have written in to say they’re using it successfully on their sites as well. Here are some tips we’ve discovered that make it work even better.
Basically, the technique works by intercepting the visitor’s click on an MP3 link and feeding it to a JavaScript function. The JavaScript then generates a pop-up window containing a playback controller—like this (472KB).
We’ve had refreshingly few reports of problems with the technique. Some Web designers simply neglected to insert the link to the external JavaScript file, which causes the MP3 link to open normally, in the main browser window. Other designers wanted to change the look of the pop-up, and I provided instructions in the comment section that follows the article. I also discovered that when running the script from my hard drive (to preview a page I’m building, for example), the folder containing the HTML had to be on the desktop for the transport bar to appear in the pop-up window . (It turns out that I had the original files in a folder called O’Reilly, and the apostrophe broke the JavaScript.)
In most cases, visitors with playback problems found that upgrading their copy of QuickTime or Windows Media Player to the latest version enabled audio playback.
A New York talk-radio station that used the technique found that some listeners got the pop-up but never heard anything; I guessed that was because the station was presenting multi-megabyte MP3s, which take a while to load. Happily, newer versions of QuickTime start playing the file while it’s loading.
In fact, it has been interesting to see how the performance of this pop-up player changes as the underlying technologies evolve. When Windows XP Service Pack 2 came out, the script stopped working on HTML-based CD-ROMs and DVDs. (Hypercosm has a tutorial on changing XP security settings that explains how to regain playback.) And though the script specifies the title of the pop-up window, newer Web browsers replace that title with “Untitled” or the domain name. Presumably that’s a security strategy as well.
File Frenzy
Recently, we published an article about converting among the myriad audio-file formats out there, and I got to give the pop-up player a workout. Before that, we had successfully played MP3s, AIFFs, WAVs, and MOVs, but the audio examples in this article included MP3Pro, Ogg Vorbis, Windows Media, RealAudio, and M4A (here Apple Lossless). Testing on Internet Explorer (Win), Safari (Mac), and Firefox (Mac and Win), with and without QuickTime, I got different results for the same files. That unfriendly experience reminded me of the bad old days when exploring the Web required a bulging toolbelt of browser plug-ins. And Firefox, my standard browser, came up empty most often. Happily, MP3, WAV, and AIFF worked perfectly on all systems, and I discovered some interesting workarounds for the more exotic files. (See the editor ’s note at the end of that article for links.)
How are you presenting audio online?
Categories
Audio
Comments (2)
Read More Entries by David Battino.
Thanks for the Play Tagger tip. I grabbed the bookmarklet and used it to play the 5.3MB MP3 at the end of our article “The Ultimate Personal Studio.” It appears that Play Tagger needs to load the entire MP3 file before starting playback, which is a drag. But I like the way it presents the file inline.
You might want to have a look at the Play Tagger script developed at del.icio.us for playing bookmarked MP3s inline.