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.
Download tutorial files
In Build a Simple MP3 Player for Your Site, I shared one of my favorite Web tricks: how to make an MP3 link generate a pop-up player when you click it. Why would you want to do that? Normally, when a visitor clicks an audio link (for example,
<a href="hit-song.mp3">My Hit Song</a>), the browser blanks out the entire page or launches a helper application. Either result can be jarring to your visitors.
Here's an example, using a music clip from our interview with mixer Tal Herzberg:
The audio pop-up audio player as it appears in Windows Internet Explorer with QuickTime installed. See the previous article for the player's other guises.
So far, so good. Our audio links are spawning neat pop-up players instead of booting our visitors off the page. But the flat orange background—or the white one we use for audio pop-ups elsewhere on this site—is rather bland. What if we were to add an image to the pop-up window?
I happened to have a companion script that did just that. It's a variation of the one you may have noticed in O'Reilly's Featured Photographer galleries. When you click on a thumbnail image, the script generates a pop-up window containing a larger version of the photo, plus a title and caption. Try it:
Here's the code for the thumbnail link above:
this.href, which refers back to the image URL in the HTML portion of the link)
Immediately following that collection of data is the statement
Typing up that long, twisted link would be a pain, so I wrote a Dreamweaver extension to do it for me. You can download the extension at the beginning or end of this article. Once it's installed in Dreamweaver, all you have to do to create a pop-up image link is select Batmo_Image_Pop from Dreamweaver's Insert menu and fill in the form that pops up. It will look something like this:
The final step is to combine the audio and image scripts into a single entity and stylize the window. I decided to add a black border to the image and a texture to the window's background. I also worked out a way to adjust the window's height to accommodate the length of the caption. And I added one new data item to the link: a variable called UniqueID that prevents new windows from opening when you click the same link repeatedly.
The seven variables in the link are
popuptitle, imgpath, imgwidth, imgheight, caption, soundpath, and
UniqueID. Here's an example of the enhanced audio pop-up player with short and long captions:
caption variable, then converts that to pixels. (More or less—if you have lots of HTML character codes in the caption, such as
—, the em-dash (—), it will throw off the length.)
The next line, with the math functions, rounds the calculated height to a whole number, because I discovered that Safari couldn't deal with fractional pixels. After that comes the pop-up and embedding code described in Build a Simple MP3 Player for Your Site. To create the metallic background, I used a 650x1-pixel gradient as the background tile for the window.
Pop to it!