Revelation
07-19-2004, 06:46 PM
Here is a custom audio player that I've been working on. I thought some of you might find it useful. The colors and controller images can all be changed very easily. Tell me what ya' think.
Working Example (http://www.0chs.com/web/c0de/musicplayer.php)
Used on 0chs.com (http://www.0chs.com/viewcat.php?cat=audio)
(click listen image under 'Player' column)
<html>
<head>
<title>0chs.com Music Player</title>
<script language="JavaScript">
var state;
//URL of song - Direct path
function playerinit()
{
player.url="http://www.mi.chu.edu.tw/~mi89008/07.%20The%20Real%20Slim%20Shady%20-%20Eminem%20.mp3";
player.settings.autoStart = true ;
}
//Play Function
function play()
{
if (player.controls.isavailable('play'))
{
player.controls.play();
state=setInterval("updatetime()",1000);
playerinfo.innerHTML = "Play";
}
}
//Pause Function
function pause()
{
if (player.controls.isavailable('pause'))
{
player.controls.pause();
clearInterval(state);
playerinfo.innerHTML = "Paused";
}
}
//Stop Function
function stop()
{
if (player.controls.isavailable('stop'))
{
player.controls.stop();
clearInterval(state);
playerinfo.innerHTML = "Stopped";
}
}
//Step Function
function step()
{
if (player.controls.isavailable( 'step' ))
player.controls.step( 1 );
}
//Volume down function
function voldown()
{
if ( player.settings.volume < 5 )
{
player.settings.volume = 0;
playerinfo.innerHTML = "0";
}
else
{
player.settings.volume -= 20;
playerinfo.innerHTML = "Volume " + player.settings.volume +"%";
}
}
//Volume up function
function volup()
{
if ( player.settings.volume > 90 )
{
player.settings.volume = 100;
playerinfo.innerHTML = "Volume 100%";
}
else
{
player.settings.volume += 20;
playerinfo.innerHTML = "Volume " + player.settings.volume +"%";
}
}
//Mute Function
function mute()
{
player.settings.mute = !player.settings.mute;
playerinfo.innerHTML = "Mute";
}
//Fast Forward function (NOT USED - FIX)
function fastforward()
{
player.settings.rate = 2.0;
playerinfo.innerHTML = "Fastforwording";
}
//Rewind function (NOT USED - FIX)
function rewind()
{
player.settings.rate = -0.0;
playerinfo.innerHTML = "Rewinding";
}
//Balance Function
function balance()
{
switch (player.settings.balance)
{
case 0:
player.settings.balance = 100;
playerinfo.innerHTML = 'Balance: Right';
break;
case 100:
player.settings.balance = -100;
playerinfo.innerHTML = 'Balance: Left';
break;
case -100:
player.settings.balance = 0;
playerinfo.innerHTML = 'Balance: Center';
break;
default :
player.settings.balance = 0;
playerinfo.innerHTML = '???';
break;
}
}
//Time Function
function updatetime()
{
playerinfo.innerHTML = player.controls.currentPositionString + " | " + player.currentMedia.durationString +"</td></table></div> <font color='#3A445C' size='1' face=verdana><b>" + player.status + "</b></font>";
}
</script>
</head>
<body bgcolor="#ffffff" text="#555555" link="#555555" alink="#555555" vlink="#555555"onload="playerinit();">
<!-- START PLAYER -->
<table width='100%' cellpadding=5 cellspacing=0 style='border: 0px solid #566494' >
<td>
<div align='center'>
<!-- Default Player Settings -->
<div id="layer1" style="position:absolute; left:0; width:0; height:0; top:0; visibility:visible;">
<table>
<tr>
<td>
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="false">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="false">
<param name="enableErrorDialogs" value="false">
<param name="enabled" value="true">
<param name="fullScreen" value="false">
<param name="invokeURLs" value="false">
<param name="mute" value="true">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="none">
<param name="volume" value="100">
</object></td>
</tr>
</table>
</div>
<!-- END Default Player Settings -->
<!-- Title Scroller -->
<div id="layer1" style="position:absolute; left:25; width:150; height:10; top:11; visibility:visible;">
<table background='/new_image/musicplayer_bg.gif' style="FILTER: alpha(opacity=90);" bgcolor='#9BA4BF' align='center' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<MARQUEE scrolldelay="1" scrollamount="2" direction="left" loop="200" width="100%"><font color='#3A445C' size='2' face=verdana><b>Eminem - The Real Slim Shady *** <a href='http://www.0chs.com' target='_blank'>http://www.0chs.com</a></b></font></MARQUEE>
<br>
<br>
</td>
</table>
</div>
<!-- END Title Scroller -->
<!-- Payer info & statistics -->
<div id="layer1" style="position:absolute; left:25; width:150; height:10; top:55; visibility:visible;">
<table bgcolor='#919BB9' style="FILTER: alpha(opacity=100);" bgcolor='#9BA4BF' align='center' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<font color='#3A445C' size='2' face=verdana><b> <span id="playerinfo"></span></b></font>
</td>
</table>
</div>
<!-- END Payer info & statistics -->
<!-- Player Controls -->
<div id="layer4" style="position:absolute; left:25; width:300; height:10; top:92; visibility:visible;">
<table style="FILTER: alpha(opacity=100);" bgcolor='#9BA4BF' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<input TYPE="image" src="http://www.0chs.com/new_image/play_button.gif" class="but21" onmouseover=this.className="but22"; onmouseout=this.className="but21"; value="Play " name="play" onclick="play();">
<input TYPE="image" src="http://www.0chs.com/new_image/stop_button.gif" class="but41" onmouseover=this.className="but42"; onmouseout=this.className="but41"; value="Stop" name="stop" onclick="stop();">
<input TYPE="image" src="http://www.0chs.com/new_image/pause_button.gif" class="but31" onmouseover=this.className="but32"; onmouseout=this.className="but31"; value="Pause" name="pause" onclick="pause();">
<input TYPE="image" src="http://www.0chs.com/new_image/mute_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="Mute" name="mute" onclick="mute();">
<input TYPE="image" src="http://www.0chs.com/new_image/bal_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="Balance" name="balance" onclick="balance();">
</td>
<td width='52' bgcolor='#8A95B5'>
<input TYPE="image" src="http://www.0chs.com/new_image/volmin_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="-" name="voldown" onclick="voldown();">
<input TYPE="image" src="http://www.0chs.com/new_image/volmax_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="+" name="volup" onclick="volup();">
</td>
</table>
</div>
<!-- END Player Controls -->
<!-- Player New State -->
<script language = "JavaScript" for = player event = playstatechange(newstate)>
switch (newstate){
case 1:
playerinfo.innerHTML = "Loading..";
break;
case 2:
playerinfo.innerHTML = "Loading...";
break;
case 3:
playerinfo.innerHTML = "Loading....";
break;
case 10:
playerinfo.innerHTML = "<font color='#3A445C' size='2' face=verdana>Press play button to load song</font>";
}
</script>
<!-- END Player New State -->
</body>
</html>
www.0chs.com (http://www.0chs.com)
Working Example (http://www.0chs.com/web/c0de/musicplayer.php)
Used on 0chs.com (http://www.0chs.com/viewcat.php?cat=audio)
(click listen image under 'Player' column)
<html>
<head>
<title>0chs.com Music Player</title>
<script language="JavaScript">
var state;
//URL of song - Direct path
function playerinit()
{
player.url="http://www.mi.chu.edu.tw/~mi89008/07.%20The%20Real%20Slim%20Shady%20-%20Eminem%20.mp3";
player.settings.autoStart = true ;
}
//Play Function
function play()
{
if (player.controls.isavailable('play'))
{
player.controls.play();
state=setInterval("updatetime()",1000);
playerinfo.innerHTML = "Play";
}
}
//Pause Function
function pause()
{
if (player.controls.isavailable('pause'))
{
player.controls.pause();
clearInterval(state);
playerinfo.innerHTML = "Paused";
}
}
//Stop Function
function stop()
{
if (player.controls.isavailable('stop'))
{
player.controls.stop();
clearInterval(state);
playerinfo.innerHTML = "Stopped";
}
}
//Step Function
function step()
{
if (player.controls.isavailable( 'step' ))
player.controls.step( 1 );
}
//Volume down function
function voldown()
{
if ( player.settings.volume < 5 )
{
player.settings.volume = 0;
playerinfo.innerHTML = "0";
}
else
{
player.settings.volume -= 20;
playerinfo.innerHTML = "Volume " + player.settings.volume +"%";
}
}
//Volume up function
function volup()
{
if ( player.settings.volume > 90 )
{
player.settings.volume = 100;
playerinfo.innerHTML = "Volume 100%";
}
else
{
player.settings.volume += 20;
playerinfo.innerHTML = "Volume " + player.settings.volume +"%";
}
}
//Mute Function
function mute()
{
player.settings.mute = !player.settings.mute;
playerinfo.innerHTML = "Mute";
}
//Fast Forward function (NOT USED - FIX)
function fastforward()
{
player.settings.rate = 2.0;
playerinfo.innerHTML = "Fastforwording";
}
//Rewind function (NOT USED - FIX)
function rewind()
{
player.settings.rate = -0.0;
playerinfo.innerHTML = "Rewinding";
}
//Balance Function
function balance()
{
switch (player.settings.balance)
{
case 0:
player.settings.balance = 100;
playerinfo.innerHTML = 'Balance: Right';
break;
case 100:
player.settings.balance = -100;
playerinfo.innerHTML = 'Balance: Left';
break;
case -100:
player.settings.balance = 0;
playerinfo.innerHTML = 'Balance: Center';
break;
default :
player.settings.balance = 0;
playerinfo.innerHTML = '???';
break;
}
}
//Time Function
function updatetime()
{
playerinfo.innerHTML = player.controls.currentPositionString + " | " + player.currentMedia.durationString +"</td></table></div> <font color='#3A445C' size='1' face=verdana><b>" + player.status + "</b></font>";
}
</script>
</head>
<body bgcolor="#ffffff" text="#555555" link="#555555" alink="#555555" vlink="#555555"onload="playerinit();">
<!-- START PLAYER -->
<table width='100%' cellpadding=5 cellspacing=0 style='border: 0px solid #566494' >
<td>
<div align='center'>
<!-- Default Player Settings -->
<div id="layer1" style="position:absolute; left:0; width:0; height:0; top:0; visibility:visible;">
<table>
<tr>
<td>
<object id="player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" width="0" height="0">
<param name="autoStart" value="false">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="currentMarker" value="0">
<param name="enableContextMenu" value="false">
<param name="enableErrorDialogs" value="false">
<param name="enabled" value="true">
<param name="fullScreen" value="false">
<param name="invokeURLs" value="false">
<param name="mute" value="true">
<param name="playCount" value="1">
<param name="rate" value="1">
<param name="uiMode" value="none">
<param name="volume" value="100">
</object></td>
</tr>
</table>
</div>
<!-- END Default Player Settings -->
<!-- Title Scroller -->
<div id="layer1" style="position:absolute; left:25; width:150; height:10; top:11; visibility:visible;">
<table background='/new_image/musicplayer_bg.gif' style="FILTER: alpha(opacity=90);" bgcolor='#9BA4BF' align='center' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<MARQUEE scrolldelay="1" scrollamount="2" direction="left" loop="200" width="100%"><font color='#3A445C' size='2' face=verdana><b>Eminem - The Real Slim Shady *** <a href='http://www.0chs.com' target='_blank'>http://www.0chs.com</a></b></font></MARQUEE>
<br>
<br>
</td>
</table>
</div>
<!-- END Title Scroller -->
<!-- Payer info & statistics -->
<div id="layer1" style="position:absolute; left:25; width:150; height:10; top:55; visibility:visible;">
<table bgcolor='#919BB9' style="FILTER: alpha(opacity=100);" bgcolor='#9BA4BF' align='center' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<font color='#3A445C' size='2' face=verdana><b> <span id="playerinfo"></span></b></font>
</td>
</table>
</div>
<!-- END Payer info & statistics -->
<!-- Player Controls -->
<div id="layer4" style="position:absolute; left:25; width:300; height:10; top:92; visibility:visible;">
<table style="FILTER: alpha(opacity=100);" bgcolor='#9BA4BF' width='300' cellpadding=3 cellspacing=0 style='border: 1px solid #566494' >
<td>
<input TYPE="image" src="http://www.0chs.com/new_image/play_button.gif" class="but21" onmouseover=this.className="but22"; onmouseout=this.className="but21"; value="Play " name="play" onclick="play();">
<input TYPE="image" src="http://www.0chs.com/new_image/stop_button.gif" class="but41" onmouseover=this.className="but42"; onmouseout=this.className="but41"; value="Stop" name="stop" onclick="stop();">
<input TYPE="image" src="http://www.0chs.com/new_image/pause_button.gif" class="but31" onmouseover=this.className="but32"; onmouseout=this.className="but31"; value="Pause" name="pause" onclick="pause();">
<input TYPE="image" src="http://www.0chs.com/new_image/mute_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="Mute" name="mute" onclick="mute();">
<input TYPE="image" src="http://www.0chs.com/new_image/bal_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="Balance" name="balance" onclick="balance();">
</td>
<td width='52' bgcolor='#8A95B5'>
<input TYPE="image" src="http://www.0chs.com/new_image/volmin_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="-" name="voldown" onclick="voldown();">
<input TYPE="image" src="http://www.0chs.com/new_image/volmax_button.gif" class="but61" onmouseover=this.className="but62"; onmouseout=this.className="but61"; value="+" name="volup" onclick="volup();">
</td>
</table>
</div>
<!-- END Player Controls -->
<!-- Player New State -->
<script language = "JavaScript" for = player event = playstatechange(newstate)>
switch (newstate){
case 1:
playerinfo.innerHTML = "Loading..";
break;
case 2:
playerinfo.innerHTML = "Loading...";
break;
case 3:
playerinfo.innerHTML = "Loading....";
break;
case 10:
playerinfo.innerHTML = "<font color='#3A445C' size='2' face=verdana>Press play button to load song</font>";
}
</script>
<!-- END Player New State -->
</body>
</html>
www.0chs.com (http://www.0chs.com)