AJAX

Audio Pop Up Window

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Sep 2008

Posts: 18

Reputation: jproducer is an unknown quantity at this point

Solved Threads: 0

jproducer

Offline

Newbie Poster

Audio Pop Up Window

Dec 10th, 2008

I used a wonderful resource at oreillynet to grab a pretty nice script to open up mp2's in a little .js pop up window. I'm just having a little issue trying to get the link color to change. I see where the code is and have tried several reditions. Just not accomplishing getting the link customized to match rest of site.

Here is site for example test audio pop up

Only first audio link "All Right" is working right now to test...

disclaimer: I know the site is graphic heavy and not perfect by any means, but i'm learning here :0)

Down the line i would like to actually get rid of the fact that this opens the default player for system and actually really have more control over look and feel, but this will work for now.

This is the external file as a .js

Help with Code Tags

(Toggle Plain Text)

// Pop-Up Embedder Script by David Battino, www.batmosphere.com
// Version 2006-05-31  
// OK to use if this notice is included
   
function BatmoAudioPop(filedesc,filepath,WindowNumber) 
{

// 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"; // or audio/x-wav or audio/x-ms-wma, etc.
	visitorOS="Other";
}

// Get the MIME type of the audio file from its extension (for non-Windows browsers)
var mimeType = "audio/mpeg"; // assume MP3/M3U
var objTypeTag = "application/x-mplayer2"; // The Windows MIME type to load the WMP plug-in in Firefox, etc.

var theExtension = filepath.substr(filepath.lastIndexOf('.')+1, 3); // truncates .aiff to aif
if (theExtension.toLowerCase() == "wav") { mimeType = "audio/x-wav"};
if (theExtension.toLowerCase() == "aif") { mimeType = "audio/x-aiff"}; 
if (theExtension.toLowerCase() == "wma") { mimeType = "audio/x-ms-wma"};
if (theExtension.toLowerCase() == "mid") { mimeType = "audio/mid"};
// Add additional MIME types as desired

if (visitorOS != "Windows") { 
objTypeTag = mimeType; // audio/mpeg, audio/x-wav, audio/x-ms-wma, etc.
};

    PlayerWin = window.open('',WindowNumber,'width=320,height=217,top=0, left=0,screenX=0,screenY=0,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');

    PlayerWin.focus();
    PlayerWin.document.writeln("<html><head><title>" + filedesc + "</title></head>");
    PlayerWin.document.writeln("<body bgcolor='#333333'; text='#FFFFFF'; font-family='verdana, geneva, san-serif'; 			 background='images/player_background.jpg'>"); // specify background img if desired
    PlayerWin.document.writeln("<div align='center'>");
    PlayerWin.document.writeln("<b style ='font-size:14px;font-family:verdana, geneva, san-serif;line-height:1.6;background:#333333'>" + filedesc + "</b><br />");
    PlayerWin.document.writeln("<object width='280' height='69'>");
    PlayerWin.document.writeln("<param name='src' value='" +  filepath + "'>");
    PlayerWin.document.writeln("<param name='type' value='" + objTypeTag + "'>");
    PlayerWin.document.writeln("<param name='autostart' value='1'>");
    PlayerWin.document.writeln("<param name='showcontrols' value='1'>"); 
    PlayerWin.document.writeln("<param name='showstatusbar' value='1'>");
    PlayerWin.document.writeln("<embed src ='" + filepath + "' type='" + objTypeTag + "' autoplay='true' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#7e7243' kioskmode='true'>");
    PlayerWin.document.writeln("</embed></object></div>");
    PlayerWin.document.writeln("<p style='font-size:12px;color:#FFFFFF;  font-family:Verdana, Geneva, sans-serif; text-align:center'><a href='" + filepath +"'>download</a> <span style='font-size:10px'>(right-click or Control-click)</span></p>");
    PlayerWin.document.writeln("<form><div align='center'><input type='button' value='close' onclick='javascript:window.close();'></div></form>");
    PlayerWin.document.writeln("</body></html>");

    PlayerWin.document.close(); // "Finalizes" new window
}

// Pop-Up Embedder Script by David Battino, www.batmosphere.com
// Version 2006-05-31  
// OK to use if this notice is included
   
function BatmoAudioPop(filedesc,filepath,WindowNumber) 
{

// 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"; // or audio/x-wav or audio/x-ms-wma, etc.
	visitorOS="Other";
}

// Get the MIME type of the audio file from its extension (for non-Windows browsers)
var mimeType = "audio/mpeg"; // assume MP3/M3U
var objTypeTag = "application/x-mplayer2"; // The Windows MIME type to load the WMP plug-in in Firefox, etc.

var theExtension = filepath.substr(filepath.lastIndexOf('.')+1, 3); // truncates .aiff to aif
if (theExtension.toLowerCase() == "wav") { mimeType = "audio/x-wav"};
if (theExtension.toLowerCase() == "aif") { mimeType = "audio/x-aiff"}; 
if (theExtension.toLowerCase() == "wma") { mimeType = "audio/x-ms-wma"};
if (theExtension.toLowerCase() == "mid") { mimeType = "audio/mid"};
// Add additional MIME types as desired

if (visitorOS != "Windows") { 
objTypeTag = mimeType; // audio/mpeg, audio/x-wav, audio/x-ms-wma, etc.
};

    PlayerWin = window.open('',WindowNumber,'width=320,height=217,top=0, left=0,screenX=0,screenY=0,resizable=0,scrollbars=0,titlebar=0,toolbar=0,menubar=0,status=0,directories=0');

    PlayerWin.focus();
    PlayerWin.document.writeln("<html><head><title>" + filedesc + "</title></head>");
    PlayerWin.document.writeln("<body bgcolor='#333333'; text='#FFFFFF'; font-family='verdana, geneva, san-serif'; 			 background='images/player_background.jpg'>"); // specify background img if desired
    PlayerWin.document.writeln("<div align='center'>");
    PlayerWin.document.writeln("<b style ='font-size:14px;font-family:verdana, geneva, san-serif;line-height:1.6;background:#333333'>" + filedesc + "</b><br />");
    PlayerWin.document.writeln("<object width='280' height='69'>");
    PlayerWin.document.writeln("<param name='src' value='" +  filepath + "'>");
    PlayerWin.document.writeln("<param name='type' value='" + objTypeTag + "'>");
    PlayerWin.document.writeln("<param name='autostart' value='1'>");
    PlayerWin.document.writeln("<param name='showcontrols' value='1'>"); 
    PlayerWin.document.writeln("<param name='showstatusbar' value='1'>");
    PlayerWin.document.writeln("<embed src ='" + filepath + "' type='" + objTypeTag + "' autoplay='true' width='280' height='69' controller='1' showstatusbar='1' bgcolor='#7e7243' kioskmode='true'>");
    PlayerWin.document.writeln("</embed></object></div>");
    PlayerWin.document.writeln("<p style='font-size:12px;color:#FFFFFF;  font-family:Verdana, Geneva, sans-serif; text-align:center'><a href='" + filepath +"'>download</a> <span style='font-size:10px'>(right-click or Control-click)</span></p>");
    PlayerWin.document.writeln("<form><div align='center'><input type='button' value='close' onclick='javascript<b></b>:window.close();'></div></form>");
    PlayerWin.document.writeln("</body></html>");

    PlayerWin.document.close(); // "Finalizes" new window
}

Highlighted in red is link area, not sure what to put in to get change from default link color and hover instances.

TIA - Johnny

Last edited by jproducer; Dec 10th, 2008 at 2:12 am.

•

Join Date: Dec 2008

Posts: 5

Reputation: SavyCat is an unknown quantity at this point

Solved Threads: 1

SavyCat

Offline

Newbie Poster

Re: Audio Pop Up Window

Dec 11th, 2008

Use css with the following example:

<style type="text/css">

</style>

Change appropriate params above, ie, text-decoration, font-weight, font-size, etc.

Then call your js with a link like
<a class="mp3" href="javascript:YourJSName">NameofLink</a>

Good luck,
cmc