Several years ago, I wanted a better way to present the MP3 examples I produce for my gear reviews, so I started exploring JavaScript. Before long, I discovered how to make audio links play back in a handy pop-up window, complete with volume and transport controls. All it took was adding a smidgen of JavaScript to a standard audio link and uploading a small JavaScript file.

That humble hack led to one of our most popular articles, "Build a Simple MP3 Player for Your Site." Hundreds of people wrote in to suggest new features, and we responded with articles on adding images, m3u playlist support, and wider compatibility to the players. But the requests kept pouring in, so I thought I'd share some of my latest experiments and discoveries while I continue to refine the player.

Click the links below to jump to a specific experiment.

  1. Pop-up Link Generator
  2. Random Sound on Load
  3. Inline Embedded Player

Pfeiffer pop-up

Reader Tommy Detamore customized the pop-up player with a wood-grain background and plugin-dependent height for guitarist Chris Pfeiffer's site. Note the ActiveX warning in the Internet Explorer screenshot at bottom. I'm still experimenting with workarounds for that.

1. Pop-up Link Generator

One nice feature of the original article was that it included a downloadable Dreamweaver extension that let you create the special links just by filling out a form. But not everyone has Dreamweaver, and the extension doesn't work with the latest version of the script. So I made a Web form to generate the links instead. As a side benefit, developing the form taught me some new JavaScript techniques such as form validation. One of the most common mistakes readers made was adding raw apostrophes to song titles, which broke the script. (See the Lab Safety sidebar.) View this page's source code to see the script, which I've commented heavily.

Here's how to use the form. (I've filled in an audio file address so you can try it out. The sound is from Peter Drescher's article "Singing With Your Thumbs: How To Make User Interfaces Musical.")

  1. Upload the external script called BatmoAudioPop.js to your site. The script is available on this page. (For this demo, I've embedded the script rather than linking to it.)
  2. Create a link to the script in your page, like this:
    <script type="text/javascript" src="BatmoAudioPop.js"></script>
  3. Upload your media file (MP3, AIF, WAV, MID, etc.).
  4. Use the following form to generate a special link to the file that will create a pop-up media player when clicked.
  5. Copy the link and paste it into your page.
Link Text: Pop-Up Title:
File Path:
File Size (optional): KB MB
File ID:   (Assigning the same value to all links on a page will make them open in the same pop-up.)

Lab Safety: Common Mistakes

Two common errors people make when implementing this script include omitting the link to the external JavaScript file and not "escaping" apostrophes or other non-alphanumeric characters in song titles. (Raw apostrophes will break the script, so you need to precede them with backslashes.)

If you're getting both a normal window and a pop-up when you click the link, it probably means you've omitted the return false part of the link. It's designed to make the browser fire only the JavaScript section of the link, not the href= section. (That section should fire only when JavaScript is disabled.) Similarly, if clicking an MP3 link opens a new window rather than a pop-up, it means that JavaScript is either disabled in the browser or that the browser can't find the external file.

Pages: 1, 2

Next Pagearrow