Notes- Embed an MP3 file into a web page

Technical notes index
Creating a pop-up MP3 player

EMBEDDING AN MP3 FILE INTO A WEB PAGE

NOTE: The QuickTime method no longer works in some current browsers, particularly on Apple computers, as the Quicktime player is not supported by default. The HTML5 player should be used instead; unfortunately some older browsers will not recognize it. The player is simpler, and not configurable. The code is:

<audio controls="controls" source src="audio.mp3" type="audio/mpeg">
Your browser does not support the HTML5 audio element.
</audio>

The URL given for the audio assumes it's in the same folder as the page, otherwise a fuller URL is obviously necessary.

This is the older method:

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. This is independent of the two different versions under discussion.

METHOD 2 (QuickTime)

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

________________________________

________________________________

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 (QuickTime)

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:

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

__________________________________________

____________________________________________

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 constrained size), and this page shows you how to do that.