Build an Enhanced MP3 Player for Your Site
Pages: 1, 2

Sound and Vision: The Enhanced MP3 Player

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:

The Angel

Click me (short caption).

The Angel

Click me (long caption).

Here's the code in the external JavaScript file that makes it work. The winWidth and rawHeight lines set the size of the pop-up window, based on the size of the graphic and the length of the caption it will contain. I derived the formula for calculating the height of the caption through experimentation. It counts the number of characters in the 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-Up Audio/Photo Embedder Script by David Battino, www.batmosphere.com
// v 2005-10-04
// OK to use if this notice is included
function EnhAudioPop(popuptitle,imgpath,imgwidth,imgheight,caption,soundpath,UniqueID) { // Add error handling?
    var winWidth  = Number(imgwidth) + 100;
    var rawHeight = Number(imgheight) + 168 + caption.length/7; // calculate window height based on caption length
    var winHeight = Math.round(rawHeight * Math.pow(10,0))/Math.pow(10,0); // round to integer
    
    MediaWin = window.open('',UniqueID,'width=' + winWidth + ',height=' + winHeight + ',top=0,left=0,resizable=1,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0,personalbar=0');
    MediaWin.focus();
    
    var winContent = "<html><head><title>" + popuptitle + "</title></head>";
    winContent += "<body bgcolor='#9E9E9E' background='/images/oreilly/digitalmedia/2005/10/metal_tile.jpg'>"; // check image path
    winContent += "<div align='center'>";
    winContent += "<br /><br />"; // could use CSS padding instead
    winContent += "<img src='" + imgpath + "' id='image1' border='2' alt='" + popuptitle + "' width='" + imgwidth + "' height='" + imgheight + " 'title='" + popuptitle + "' />";
    winContent += "<br />";
    winContent += "<object width='" + imgwidth + "' height='42' >";
    winContent += "<param name='src' value='" + soundpath + "'>";
    winContent += "<param name='autoplay' value='true'>";
    winContent += "<param name='controller' value='true'>";
    winContent += "<param name='bgcolor' value='#9e9e9e'>";
    winContent += "<embed src ='" + soundpath + "' autostart='true' loop='false' width='" + imgwidth + "' height='42' controller='true' bgcolor='#9e9e9e'>";
    winContent += "</embed></object>";
    winContent += "<div style='width: " + imgwidth + "px; margin: 0px; padding: 0px; text-align:left;'>"; // restrict caption width to image width
    winContent += "<p style='font-size:12px;font-family:Verdana,sans-serif'>" + caption + "</p>";
    winContent += "</div>";
    winContent += "<p style='font-size:12px;font-family:Verdana,sans-serif'><a href='" + soundpath + "'>Download audio file</a> <span style='font-size:10px'>(right-click or Option-click)</span>";
    winContent += " &#8226; <a href='#' onClick='javascript:window.close();'>Close this window</a></p>";
    winContent += "</div>";
    winContent += "</body></html>";

    MediaWin.document.write(winContent);
    MediaWin.document.close(); // "Finalizes" new window
}

Enhancing the Enhancement

I hope to use this idea for a new batch of audio articles that will expand on our Featured Photographer series. For example, instead of a gallery of pop-up images, we could show the steps in recording a song, with an image and audio example for each step. For that, it might be handy if each pop-up window could call the previous or next one on the series. O'Reilly's Mark Levitt, who gave me a lot of ideas for this article, thinks the easiest way to do that would be to store all the data for each pop-up window in an array. Let us know if you come up with any other ways to enhance these enhancements. You can download the JavaScript file and Dreamweaver extension here.

Pop to it!