The JavaScript Source: Miscellaneous : JavaScript Player

General

An audio player powered by QuickTime and Windows Media Player. Play short media files, e.g. MP3, in a Web browser with simple controls.

QuickTime Player

Windows Media Player

JSPlayer_core(QuickTime Player)

Notes

Created by: livibetter
Web Site: http://www.livibetter.com/wiki/index.php?title=JSPlayer
Posted: October 30, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: jsPlayer.js

/* This script portion by
RoBorg | RoBorg@geniusbug.com
http://javascript.geniusbug.com
Please do not remove or edit this message */

c = new Cookie();

function Cookie() {
 	this.isSet = (document.cookie.toString().length != 0);
 	this.isEnabled = navigator.cookieEnabled;
 	this.expires = new Date();
 	this.path = '';
 	this.domain = '';
 	this.isSecure = false;
 	this.getIsSet = function() { return (document.cookie != ""); }
 	this.setExpires = function(date) { this.expires = date; }
 	this.setPath = function(path) { this.path = path; }
 	this.setDomain = function(domain) { this.domain = domain; }
 	this.setSecure = function(secure) { this.isSecure = secure; }
 	this.erase = function() {
  		this.setExpires(new Date(new Date().getTime() - 1000000));
  		var cArr = this.getCookieAsArray();
  		for(var i in cArr) this.setValue(i, '');
  		document.cookie = '';
 	}

 	this.parse = function() {
  		var cValues = this.getCookieAsArray();
  		for(var i in cValues) eval(i + ' = unescape("' + cValues[i] + '");');
 	}

 	this.getValue = function(name) {
  		var cValues = this.getCookieAsArray();
  		return cValues[name];
 	}

 	this.setValue = function(name, value) { document.cookie = name + '=' + escape(value) + '; ' + this.getCookieSettings(); }

 	this.getCookieAsArray = function() {
  		if(!document.cookie.toString().length) return new Array();
  		cArr = document.cookie.toString().split('; ');
  		var cookieArray = new Array();
  		for(var x=0; x<cArr.length; x++) {
   			if(!cArr[x].length) continue;
   			cArr[x] = cArr[x].split("=");
   			cookieArray[cArr[x][0].toString()] = unescape(cArr[x][1]);
  		}
  		return cookieArray;
 	}

 	this.getCookieSettings = function() {
  		var str = 'expires=' + this.expires.toGMTString() + '; ';
  		if(this.domain.length) str += 'path=' + this.path + '; ';
  		if(this.domain.length) str += 'domain=' + this.domain + '; ';
  		if(this.isSecure) str += 'secure; ';
  		return str;
 	}
}

// ===========================================

/* :: Script Information ::
Title       : JavaScript Player
Author      : livibetter
Website   		: http://www.livibetter.com
Created date: 09/13/2006 | Updated date: 21:51 10/4/2006
Version     : 0.0.4.2
Credit      : lbmenu 0.2.1
License     : GNU General Public License
Copyright   : 2006 livibetter */

// ********
// Settings
// Set the path to the images here, i.e.,
// var lb_JSPlayer_pathIMG = '/img/here/';
var lb_JSPlayer_pathIMG = '';

var lb_JSPlayer_count = 0;
var lb_JSPlayer_img_note = new Image();
var lb_JSPlayer_img_play = new Image();
var lb_JSPlayer_img_pause = new Image();
var lb_JSPlayer_img_stop = new Image();
lb_JSPlayer_img_note.src = lb_JSPlayer_pathIMG + 'btn-note.png';
lb_JSPlayer_img_play.src = lb_JSPlayer_pathIMG + 'btn-play.png';
lb_JSPlayer_img_pause.src = lb_JSPlayer_pathIMG + 'btn-pause.png';
lb_JSPlayer_img_stop.src = lb_JSPlayer_pathIMG + 'btn-stop.png';

function clb_JSPlayer(sAudioURL, sCore, sBlankMP3URL){
	var core;
	if(sCore.length == 0)sCore = 'QTP';
	if(sCore=='QTP' && haveqt){
		if(sBlankMP3URL.length > 0)
			core = new clb_JSPlayer_core('QTP', sBlankMP3URL);
		else{
			alert('Need blank MP3 URL');
			return;
			}
		}
	else{
		core = new clb_JSPlayer_core('WMP');
		}
	this.core = core;

	document.write('<div class="lb_JSPlayer_div" id="lb_JSPlayer_' + lb_JSPlayer_count.toString() + '">');

	this.div = document.getElementById('lb_JSPlayer_' + lb_JSPlayer_count.toString());
	this.div.parent = this;

	document.write(	'<div class="lb_JSPlayer_ctrl1" id="'+ this.div.id + '_ctrl1">' +
						'<img class="lb_JSPlayer_ctrl1_i" id="' + this.div.id + '_ctrl1_i" src="' + lb_JSPlayer_pathIMG + 'btn-note.png" ' +
							'onclick="document.getElementById(\'' + this.div.id + '\').parent.loadAudio(\'' + sAudioURL + '\')"/>' +
					'</div>');
	document.write(	'<div class="lb_JSPlayer_ctrl2" id="' + this.div.id + '_ctrl2">' +
						'<img class="lb_JSPlayer_ctrl2_i" id="' + this.div.id + '_ctrl2_i" src="' + lb_JSPlayer_pathIMG + 'btn-stop.png" ' +
							'onclick="document.getElementById(\'' + this.div.id + '\').parent.stop()"/>' +
					'</div>');
	document.write('<div class="lb_JSPlayer_status" id="' + this.div.id + '_status">00:00.0</div>');
	document.write('</div>');

	this.ctrl1 = document.getElementById(this.div.id + '_ctrl1');
	this.ctrl2 = document.getElementById(this.div.id + '_ctrl2');
	this.ctrl1.i = document.getElementById(this.div.id + '_ctrl1_i');
	this.ctrl2.i = document.getElementById(this.div.id + '_ctrl2_i');
	this.status = document.getElementById(this.div.id + '_status');

	new clb_menu(this.ctrl2, false, new clb_menu_method(0,0,0), new clb_size(0,16));
	new clb_menu(this.status, false, new clb_menu_method(0,0,0), new clb_size(0,16));
	this.ctrl2.menu.toggle('collapse');
	this.status.menu.toggle('collapse');
	this.ctrl2.menu.methodDefault = new clb_menu_method(1000, 10, 10);
	this.status.menu.methodDefault = new clb_menu_method(1000, 10, 10);

	lb_JSPlayer_count++;

	this.loadAudio = function (sAudioURL){
		this.core.prevState = 'loading';
		this.status.innerHTML = 'loading';
		this.status.menu.toggle('expand');
		this.core.loadAudio(sAudioURL);
		this.timerUpdate = setTimeout('document.getElementById("' + this.div.id + '").parent.update()', 100);
		}
	this.playPause = function (){
		this.core.playPause();
		}
	this.stop = function (){
		this.core.stop();
		}
	this.update = function (){
		var state = this.core.getState();
		switch(state){
			case 'unload':
				this.loadAudio(this.core.URL);
				break;
			case 'loading':
				this.status.innerHTML = 'loading';
				this.status.menu.toggle('expand');
				break;
			case 'stopped':
				if(this.core.prevState == 'unload' || this.core.prevState == 'loading'){
					this.ctrl1.i.onclick = new Function('document.getElementById("' + this.div.id + '").parent.playPause()');
					state = 'loading';
					this.playPause();
					}
				else{
					this.ctrl1.i.src = lb_JSPlayer_pathIMG + 'btn-play.png';
					this.ctrl2.menu.toggle('collapse');
					this.status.innerHTML = '';
					this.status.menu.toggle('collapse');
					}
				break;
			case 'playing':
				this.ctrl1.i.src = lb_JSPlayer_pathIMG + 'btn-pause.png';
				this.ctrl2.menu.toggle('expand');
				this.status.menu.toggle('expand');
				var position = this.core.getPosition();
				var currMin = Math.floor(position / 60);
				var currSec = position - currMin * 60;
				var padMin = (currMin < 10)?'0':'';
				var padSec = (currSec < 10)?'0':'';
				this.status.innerHTML = padMin + currMin.toString() + ':' + padSec + currSec.toFixed(1).toString();
				break;
			case 'paused':
				this.ctrl1.i.src = lb_JSPlayer_pathIMG + 'btn-play.png';
				break;
			default:
				this.ctrl1.i.src = lb_JSPlayer_pathIMG + 'btn-note.png';
				this.ctrl1.i.onclick = new Function('document.getElementById("' + this.div.id + '").parent.loadAudio("' + this.core.URL + '")');
				this.ctrl2.menu.toggle('collapse');
				this.status.innerHTML = 'ERROR!';
				this.status.menu.toggle('expand');
				break
			}
		this.core.prevState = state;
		if(state != 'error')
			this.timerUpdate = setTimeout('document.getElementById("' + this.div.id + '").parent.update()', 100);
		}
	}

// =======================================

/* :: Script Information ::
Title       : JavaScript Player Core
Author      : livibetter
Website		   : http://www.livibetter.com
Created date: 02:53 9/27/2006 | Updated date: 21:51 10/4/2006
Version     : 0.0.1.1
License     : GNU Lesser General Public License
Copyright   : 2006 livibetter */

// *********************

var haveqt = false;

document.writeln('<script language="VBScript">');
document.writeln('	On Error Resume Next');
document.writeln('	Set theObject = CreateObject("QuickTimeCheckObject.QuickTimeCheck.1")');
document.writeln('	On Error goto 0');
document.writeln('	If IsObject(theObject) Then');
document.writeln('		If theObject.IsQuickTimeAvailable(0) Then');
document.writeln('			haveqt = true');
document.writeln('			End If');
document.writeln('		End If');
document.writeln('<\/script>');

if(navigator.plugins){
	for(i=0; i<navigator.plugins.length; i++){
		if(navigator.plugins[i].name.indexOf("QuickTime")>=0){
			haveqt = true;
			}
		}
	}
if((navigator.appVersion.indexOf("Mac")>0) &&
	 (navigator.appName.substring(0,9)=="Microsoft") &&
	 (parseInt(navigator.appVersion)<5)){
	haveqt = true;
	}

var wmpInfo = {
	installed: false,
	scriptable: false,
	type: null,
	versionInfo: null
	};
var wmp64 = "MediaPlayer.MediaPlayer.1";
var wmp7 = "WMPlayer.OCX.7";
if((window.ActiveXObject && navigator.userAgent.indexOf('Windows') != -1) || window.GeckoActiveXObject){
	wmpInfo.type = "ActiveX";
	var player = createActiveXObject(wmp7);
	if(player){
		wmpInfo.installed = true;
		wmpInfo.scriptable = true;
		wmpInfo.versionInfo = player.versionInfo;
		}
	else{
		player = createActiveXObject(wmp64);
		if(player){
			wmpInfo.installed = true;
			wmpInfo.scriptable = true;
			wmpInfo.versionInfo = "6.4";
			}
		else{
			wmpInfo.versionInfo = "none";
			}
		}
	}
else if(navigator.mimeTypes){
	wmpInfo.type = "NetscapePlugin";
	var player = navigator.mimeTypes['application/x-mplayer2'].enabledPlugin;
	if(player){
		wmpInfo.installed = true;
		wmpInfo.versionInfo = "PluginVersion";
		}
	}
function createActiveXObject(id)
{
  var error;
  var control = null;

  try
  {
    if (window.ActiveXObject)
    {
      control = new ActiveXObject(id);
    }
    else if (window.GeckoActiveXObject)
    {
      control = new GeckoActiveXObject(id);
    }
  }
  catch (error)
  {
    ;
  }
  return control;
}

lb_JSPlayer_core_count = 0;

function clb_JSPlayer_core(sCore, sBlankMP3URL){
	switch(sCore){
		case "WMP":
			document.write("<object " +
								"classid='clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6' " +
								"id='lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core' width='0' height='0'>");
			document.write("<param name='uiMode' value='invisible' /><param name='autoStart' value='false' /></object>");
			this.corePlayer = document.getElementById("lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core");
			this.corePlayer.settings.enableErrorDialogs = false;
			document.write("<script for='lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core' event=error()>");
			document.write("document.getElementById('lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core').parent.error()");
			document.write("</script>");
			break;
		case "QTP":
		case null:
		case undefined:
			if(!haveqt){
				alert("Unable to use QuickTime Player");
				return;
				}
			document.write("<object " +
								"classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' " +
								"codebase='http://www.apple.com/qtactivex/qtplugin.cab' " +
								"width='0' height='0' " +
								"id='lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core'>" +
								"<param name='src' value='" + sBlankMP3URL + "'>" +
								"<param name='autoplay' value='false'>" +
								"<embed src='" + sBlankMP3URL + "' " +
									"type='video/quicktime' " +
									"pluginspage='www.apple.com/quicktime/download' " +
									"width='0' height='0' " +
									"controller='false' " +
									"autoplay='false' " +
									"enablejavascript='true' " +
									"name='lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core' />" +
								"</object>");
			this.corePlayer = eval("document.lb_JSPlayer_" + lb_JSPlayer_core_count.toString() + "_core");
			break;
		default:
			alert("Wrong parameter sCore=" + sCore);
			return;
		}
	this.corePlayer.parent = this;
	lb_JSPlayer_core_count++;
	this.core = sCore;
		this.getState = function(){
		switch(this.core){
			case 'WMP':
				if(this.corePlayer.error.errorCount>0){
					this.corePlayer.error.clearErrorQueue();
					return 'error';
					}
				switch(this.corePlayer.playState){
					case 0:
						return 'unload';
					case 1:
						if(this.corePlayer.controls.isAvailable('Play'))
							return 'stopped';
						else
							switch(this.corePlayer.openState){
								case 0:
								case 6:
								case 7:
								case 13:
									return 'unload';
								default:
									return 'loading';
								}
					case 8:
					case 10:
						return 'stopped';
					case 2:
						return 'paused';
					case 6:
					case 7:
					case 9:
					case 11:
						return 'loading';
					case 3:
						return 'playing';
					case 4:
					case 5:
					default:
						return 'error'
					}
				break;
			case 'QTP':
				try{
					if(this.corePlayer.GetRate()>0)
						return 'playing';
					else if(this.corePlayer.GetURL().indexOf('blank.mp3')>0)
						return 'unload';
					else
						switch(this.corePlayer.GetPluginStatus()){
							case 'Waiting':
							case 'Loading':
								return 'loading';
							case 'Playable':
							case 'Complete':
								if((this.corePlayer.GetTime() > 0) && (this.corePlayer.GetTime() != this.corePlayer.GetDuration()))
									return 'paused';
								else
									return 'stopped';
							default:
								return 'error';
							}
					}
				catch(e){
					return 'error';
					}
				break;
			}
		}
		this.getPosition = function (){
		switch(this.core){
			case "WMP":
				return this.corePlayer.controls.currentPosition;
				break;
			case "QTP":
				return this.corePlayer.GetTime() / this.corePlayer.GetTimeScale();
				break;
			}
		}
		this.playPause = function (){
		switch(this.getState()){
			case "paused":
			case "stopped":
				switch(this.core){
					case "WMP":
						this.corePlayer.controls.play();
						break
					case "QTP":
						this.corePlayer.Play();
						break;
					}
				break;
			case "playing":
				switch(this.core){
					case "WMP":
						this.corePlayer.controls.pause();
						break
					case "QTP":
						this.corePlayer.Stop();
						break;
					}
				break;
			}
		}
		this.stop = function (){
		switch(this.core){
			case "WMP":
				this.corePlayer.controls.stop();
				break;
			case "QTP":
				this.corePlayer.Stop();
				this.corePlayer.SetTime(0);
				break;
			}
		}
		this.loadAudio = function (sAudioURL){
		switch(this.core){
			case "WMP":
				this.corePlayer.URL = sAudioURL;
				this.URL = sAudioURL;
				break;
			case "QTP":
				this.corePlayer.SetResetPropertiesOnReload(false);
				this.corePlayer.SetURL(sAudioURL);
				break;
			}
		}
		this.error = function (){
		if(this.corePlayer.error.errorCount>0){
			for(var i=0; i<this.corePlayer.error.errorCount; i++){
				var err = this.corePlayer.error.item(i);
				alert(err.errorDescription + err.errorCode);
				}
			}
		}
	}

// ==============================================

/* :: Script Information ::
Title       : common library
Author      : livibetter
Website   		: http://www.livibetter.com
Created date: 09/21/2006 | Updated date: 01:44 9/23/2006
Version     : 0.1
License     : GNU Lesser General Public License
Copyright   : 2006 livibetter */

function clb_size(width, height){
	this.width = width;
	this.height = height;
	}

function clb_range(from, to, bSort){
	if(bSort)
		if(from>to){
			var temp = to;
			to = from;
			from = temp;
			}
	this.from = from;
	this.to = to;
	}

// ============================================

/* :: Script Information ::
Title       : html stuff library
Author      : livibetter
Website		   : http://www.livibetter.com
Created date: 09/22/2006 | Updated date: 01:45 9/23/2006
Version     : 0.1
License     : GNU Lesser General Public License
Copyright   : 2006 livibetter */

function lb_html_setOpacity(Object, opacity){
	Object.style.opacity = (opacity / 100);
	Object.style.MozOpacity = (opacity / 100);
	Object.style.KhtmlOpacity = (opacity / 100);
	Object.style.filter = "alpha(opacity=" + opacity + ")";
	}

function lb_html_setChildrenDisplay(Object, sDisplay){
	if(Object.firstChild == undefined) return;
	if(Object.childNodes.length==0) return
	for(var i=0;i<Object.childNodes.length;i++){
		if(Object.childNodes[i] == undefined) continue;
		if(Object.childNodes[i].style == undefined) continue;
		var s=Object.childNodes[i].style;
		if(s.display != undefined) s.display = sDisplay
		}
	}

// ====================================================

/*
:: Script Information ::
Title       : expandable and collasible menu with state stored by cookie
Author      : livibetter
Website		   : http://www.livibetter.com
Created date: 04/28/2006 | Updated date: 10:29 10/2/2006
Version     : 0.2.1.1
Credit      : cookies.js by RoBorg
        	 		  lb_common.js 0.1
         			  lb_html.js 0.1
License     : GNU Lesser General Public License
Copyright   : 2006 livibetter */

c.setExpires(new Date(new Date().getTime() + 604800000));

function clb_menu_method(duration, stepsSizing, stepsFading){
	this.duration = (typeof duration=="number")?duration:1000;
	this.stepsSizing = (this.duration==0)?0:((typeof stepsSizing=="number")?stepsSizing:10);
	this.intervalSizing = (this.stepsSizing>0)?(this.duration / this.stepsSizing):0;
	this.stepsFading = (this.duration==0)?0:((typeof stepsFading=="number")?stepsFading:10);
	this.intervalFading = (this.stepsFading>0)?(this.duration / this.stepsFading):0;
	}

function clb_menu(Object, bCollapse, methodCollapsing, sizeCollapsed, sizeExpanded, rangeOpacity, methodCookie, fOnDone){
	if(typeof Object!="object") return;
	this.scan = scan;
	this.toggle = toggle;
	this.sizing = sizing;
	this.fading = fading;
	this.checkDone = checkDone;
		if(arguments.length>0){
		this.target = Object;
		Object.menu = this;
		this.target.style.overflow = "hidden"
		this.methodDefault = methodCollapsing;
		if(sizeCollapsed == null)
			this.sizeCollapsed = new clb_size(0,0);
		else
			this.sizeCollapsed = sizeCollapsed;
		if(sizeExpanded == null)
			this.sizeExpanded = new clb_size(this.target.offsetWidth, this.target.offsetHeight);
		else
			this.sizeExpanded = sizeExpanded;
		if(rangeOpacity == null)
			this.rangeOpacity = new clb_range(0, 100);
		else
			this.rangeOpacity = rangeOpacity;
		if(typeof fOnDone == "function")
			this.onDone = fOnDone;
		this.state = "Expanded";
		statePrev = c.getValue("lb_menu_" + this.target.id);
		switch(statePrev){
			case "Collapsed":
				bCollapse = true;
			case undefined:
				if(bCollapse == true)
					if(methodCookie!=null)
						this.toggle("collapse", methodCookie);
					else
						this.toggle("collapse");
				break;
			default:
			}
		}

 	function scan(){
		}

	function toggle(sToggle, method){
		if(this.state=='Expanding' || this.state=='Collapsing') return;
		if(this.state=='Expanded' && sToggle=='expand') return;
		if(this.state=='Collapsed' && sToggle=='collapse') return;
		this.methodCurrent = (method==null)?this.methodDefault:method;
		this.countdown = 2;

		this.methodCurrent.countSizing = 0;
		this.methodCurrent.countFading = 0;

		this.state = (this.state=='Expanded')?'Collapsing':'Expanding';
		setTimeout("document.getElementById('"+this.target.id+"').menu.sizing()", Math.round(this.methodCurrent.intervalSizing));
		setTimeout("document.getElementById('"+this.target.id+"').menu.fading()", Math.round(this.methodCurrent.intervalFading));
		}

	function sizing(sID){
		var bExpanding = this.state=="Expanding";
		this.methodCurrent.countSizing++;
		if(this.methodCurrent.countSizing>=this.methodCurrent.stepsSizing){
			if(bExpanding){
				this.target.style.width  = this.sizeExpanded.width + 'px';
				this.target.style.height = this.sizeExpanded.height + 'px';
				}
			else{
				this.target.style.width  = this.sizeCollapsed.width + 'px';
				this.target.style.height = this.sizeCollapsed.height + 'px';
				}
			this.checkDone();
			}
		else{
			var intervalWidth  = (this.sizeExpanded.width  - this.sizeCollapsed.width )/this.methodCurrent.stepsSizing*this.methodCurrent.countSizing*(bExpanding*2 - 1);
			var intervalHeight = (this.sizeExpanded.height - this.sizeCollapsed.height)/this.methodCurrent.stepsSizing*this.methodCurrent.countSizing*(bExpanding*2 - 1);
			this.target.style.width  = (((bExpanding)?this.sizeCollapsed.width :this.sizeExpanded.width ) + intervalWidth ) + "px";
			this.target.style.height = (((bExpanding)?this.sizeCollapsed.height:this.sizeExpanded.height) + intervalHeight) + "px";
			setTimeout("document.getElementById('"+this.target.id+"').menu.sizing()", Math.round(this.methodCurrent.intervalSizing));
			}
		}

	function fading(){
		var bExpanding = this.state=="Expanding";
		this.methodCurrent.countFading++;
		if(this.methodCurrent.countFading>=this.methodCurrent.stepsFading){
			lb_html_setOpacity(this.target, (bExpanding)?this.rangeOpacity.to:this.rangeOpacity.from);
			this.target.style.filter = "";
			this.checkDone();
			}
		else{
			var interval = (this.rangeOpacity.to - this.rangeOpacity.from)/this.methodCurrent.stepsFading*this.methodCurrent.countFading*(bExpanding*2 - 1);
			lb_html_setOpacity(this.target, ((bExpanding)?this.rangeOpacity.from:this.rangeOpacity.to) + interval);
			setTimeout("document.getElementById('"+this.target.id+"').menu.fading()", Math.round(this.methodCurrent.intervalFading));
			}
		}

	function checkDone(){
		this.countdown--;
		if(this.countdown==0){
			this.state = (this.state=="Expanding")?"Expanded":"Collapsed";
			c.setValue("lb_menu_" + this.target.id, this.state);
			if(typeof this.onDone == "function")
				this.onDone(this);
			}
		}
	}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

.lb_JSPlayer_div{
	/*display: inline;*/ /*cause other problems*/
	float: left;
	padding: 2px 2px 2px 2px;
	margin: 0px 0px 0px 0px;
	width: auto;
	height: 16px;
	border: 1px solid CornflowerBlue;
	}

.lb_JSPlayer_ctrl1{
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 16px;
	vertical-align: middle;
	cursor: pointer;
	}

.lb_JSPlayer_ctrl2{
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 16px;
	vertical-align: middle;
	cursor: pointer;
	}

.lb_JSPlayer_ctrl1_i{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 16px;
	vertical-align: middle;
	}

.lb_JSPlayer_ctrl2_i{
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 16px;
	vertical-align: middle;
	}

.lb_JSPlayer_status{
	float: left;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 16px;
	color: DodgerBlue;
	font-family: courier new;
	font-size: 16px;
	vertical-align: top;
	}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="jsPlayer.js"></script>

Body

Paste this code into the BODY section of your HTML document


<h4>QuickTime Player</h4>
	<script language="Javascript">
		new clb_JSPlayer("demo.mp3", "QTP", "blank.mp3");
	</script>

<p style="clear: both">
<h4>Windows Media Player</h4>
	<script language="Javascript">
		new clb_JSPlayer("demo.mp3", "WMP");
	</script>
<p style="clear: both">
<h4>JSPlayer_core(QuickTime Player)</h4>
<input type="button" value="load" onclick="load()">
<input type="button" value="playPause" onclick="playPause()">
<input type="button" value="stop" onclick="stop()">
<input type="button" value="state" onclick="state()">
	<script language="JavaScript">
		var corePlayer1 = new clb_JSPlayer_core("QTP", "blank.mp3");
		function load(){
			corePlayer1.loadAudio("demo.mp3");
			}
		function playPause(){
			corePlayer1.playPause();
			}
		function stop(){
			corePlayer1.stop();
			}
		function state(){
			alert(corePlayer1.getState());
			}
	</script>

Other

Download the images using the URL below:

Download the images here

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

QuickTime Player

Windows Media Player

JSPlayer_core(QuickTime Player)

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

2. From: Bill
11/04/2006 09:47:50

1. From: Haz
11/02/2006 16:53:15

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

QuickTime Player

Windows Media Player

JSPlayer_core(QuickTime Player)

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

2. From: Bill11/04/2006 09:47:50

1. From: Haz11/02/2006 16:53:15

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

2. From: Bill
11/04/2006 09:47:50

1. From: Haz
11/02/2006 16:53:15