Technical notes index
Creating a pop-up MP3 player

EMBEDDING AN MP3 FILE INTO A WEB PAGE

METHOD 1

If you simply place a link to an MP3 file into your page, then most browers will open a new window: this will have the player in it and nothing else, and will start playing immediately. This works perfectly well but is untidy looking.


METHOD 2

You can embed the player into a web page by inserting the following code:

________________________________

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="160" HEIGHT="16" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"> <PARAM name="src" VALUE="URL HERE"> <PARAM name="AUTOPLAY" VALUE="false"> <PARAM name="CONTROLLER" VALUE="true"> <EMBED src="URL HERE" WIDTH="160" HEIGHT="16" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/"> </EMBED> </OBJECT>

________________________________

You can set Autoplay value to 'true' if you want the file to start playing immediately (don't do this if you have more than one).

This method works perfectly well but Windows machines will bring up a dialogue asking for confirmation that you want to play the file, and only then will start loading it.


METHOD 3

This, though more complicated, is the best method, created by Geoff Stearns: this code will embed an MP3 file into a webpage without Windows demanding a confirmation that you want to play it.

Copy the following code into a text file and save it as 'qtobject.js' (no '.txt' on the end): or you can download a zipped copy of the script here.

_________________________________

/*
 * QTObject embed
 * http://blog.deconcept.com/2005/01/26/web-standards-compliant-javascript-quicktime-detect-and-embed/
 *
 * by Geoff Stearns (geoff@deconcept.com, http://www.deconcept.com/)
 *
 * v1.0.2 - 02-16-2005
 *
 * Embeds a quicktime movie to the page, includes plugin detection
 *
 * Usage:
 *
 *    myQTObject = new QTObject("path/to/mov.mov", "movid", "width", "height");
 *    myQTObject.altTxt = "Upgrade your Quicktime Player!";    // optional
 
 *  myQTObject.addParam("controller", "false");              // optional
 *    myQTObject.write();
 *
 */

QTObject = function(mov, id, w, h) {
    this.mov = mov;
    this.id = id;
    this.width = w;
    this.height = h;
    this.redirect = "";
    this.sq = document.location.search.split("?")[1] || "";
    this.altTxt = "This content requires the QuickTime Plugin. <a href='http://www.apple.com/quicktime/download/'>Download QuickTime Player</a>.";
    this.bypassTxt = "<p>Already have QuickTime Player? <a href='?detectqt=false&"+ this.sq +"'>Click here.</a></p>";
    this.params = new Object();
    this.doDetect = getQueryParamValue('detectqt');
}

QTObject.prototype.addParam = function(name, value) {
    this.params[name] = value;
}

QTObject.prototype.getParams = function() {
    return this.params;
}

QTObject.prototype.getParam = function(name) {
    return this.params[name];
}

QTObject.prototype.getParamTags = function() {
    var paramTags = "";
    for (var param in this.getParams()) {
        paramTags += '<param name="' + param + '" value="' + this.getParam(param) + '" />';
    }
    if (paramTags == "") {
        paramTags = null;
    }
    return paramTags;
}

QTObject.prototype.getHTML = function() {
    var qtHTML = "";
    if (navigator.plugins && navigator.plugins.length) { // not ie
        qtHTML += '<embed type="video/quicktime" src="' + this.mov + '" width="' + this.width + '" height="' + this.height + '" id="' + this.id + '"';
        for (var param in this.getParams()) {
            qtHTML += ' ' + param + '="' + this.getParam(param) + '"';
        }
        qtHTML += '></embed>';
    }
    else { // pc ie
        qtHTML += '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="' + this.width + '" height="' + this.height + '" id="' + this.id + '">';
        this.addParam("src", this.mov);
        if (this.getParamTags() != null) {
            qtHTML += this.getParamTags();
        }
        qtHTML += '</object>';
    }
    return qtHTML;
}


QTObject.prototype.getVariablePairs = function() {
    var variablePairs = new Array();
    for (var name in this.getVariables()) {
        variablePairs.push(name + "=" + escape(this.getVariable(name)));
    }
    if (variablePairs.length > 0) {
        return variablePairs.join("&");
    }
    else {
        return null;
    }
}

QTObject.prototype.write = function(elementId) {
    if(isQTInstalled() || this.doDetect=='false') {
        if (elementId) {
            document.getElementById(elementId).innerHTML = this.getHTML();
        } else {
            document.write(this.getHTML());
        }
    } else {
        if (this.redirect != "") {
            document.location.replace(this.redirect);
        } else {
            if (elementId) {
                document.getElementById(elementId).innerHTML = this.altTxt +""+ this.bypassTxt;
            } else {
                document.write(this.altTxt +""+ this.bypassTxt);
            }
        }
    }       
}

function isQTInstalled() {
    var qtInstalled = false;
    qtObj = false;
    if (navigator.plugins && navigator.plugins.length) {
        for (var i=0; i < navigator.plugins.length; i++ ) {
         var plugin = navigator.plugins[i];
         if (plugin.name.indexOf("QuickTime") > -1) {
            qtInstalled = true;
         }
      }
    } else {
        execScript('on error resume next: qtObj = IsObject(CreateObject("QuickTimeCheckObject.QuickTimeCheck.1"))','VBScript');
        qtInstalled = qtObj;
    }
    return qtInstalled;
}

/* get value of querystring param */
function getQueryParamValue(param) {
    var q = document.location.search;
    var detectIndex = q.indexOf(param);
    var endIndex = (q.indexOf("&", detectIndex) != -1) ? q.indexOf("&", detectIndex) : q.length;
    if(q.length > 1 && detectIndex != -1) {
        return q.substring(q.indexOf("=", detectIndex)+1, endIndex);
    } else {
        return "";
    }
}


_________________________________________

Load it to somewhere convenient on your server or iDisk.

Place the following line of code into the HEAD section of your page:

<script src="URL OF QTOBJECT.JS" language="JavaScript" type="text/javascript"></script>

Place the following code into the body of your page (in the HTML), between paragraph or centering tags as required.

__________________________________________

<script type="text/javascript">
// <![CDATA[
// create the qtobject and write it to the page, this includes plugin detection
// be sure to add 15px to the height to allow for the controls
var myQTObject = new QTObject("URL OF MP3 FILE", "TITLE", "178", "16");
myQTObject.addParam("autostart", "true");
myQTObject.write();
// ]]>
</script>
<noscript><p>You
must enable Javascript to
access this content.</p>
</noscript>
____________________________________________

Enter the URL of your MP3 file and a title where shown. You can alter 'autostart' to 'false' if you don't want the file to start playing as soon as the page is opened. You can alter the width of the player (in this case the "178" after "TITLE" to anything you want but leave the height at "16"). 'TITLE' can be anything you like.

 The disadvantage of embedding a player in a page is that the file will start to load each time you open or refresh the page: and if you have a number of them it will make the page consume considerable bandwidth for audio you may not actually want to play.

A better solution is to create a link which opens a small pop-up window containing a player (this won't be blocked by pop-up blockers as technically it's not actually a pop-up but just a new window with a contrained size), and this page shows you how to do that.