<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>播放器</title>
<link href="listen.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="css/play.css" />
</head>
<body>
<div class="play_bg">
<div class="play_area">
<h3 class="m_bottom"><a href="#"><img src="images/m.png" /></a>Do not ask her that...</h3>
<span class="number"><a id="starTime" href="#">00:00 </a> <a id="endTime" class="fl" href="#">00:00 </a></span>
<span class="scroll_title">
<span id="scroll_bg_id" class="scroll_bg"></span>
<div id="scroll_t_d_o" style="position:relative; left:-5px; top:-8px; height:18px; border:medium; cursor:pointer; border-color:#FF0000; width:470px;">
<div id="scroll_t_d_i" style="position:absolute;display:none; width:18px; left:0px; top:0px; height:18px;background-image:url(images/voice_dot.png);cursor:pointer; left:0px; top:0px; width:18px; height:18px; ">
</div>
</div>
</span>
<span class="mune_title ">
<a href="#" class="ft f_s l_h">Download:www.rororo.com</a>
<!-- //初始化播放模式数组[单曲循环:circle| 顺序播放:order | 随机播放:random]-->
<span class="fl">
<a><img id="order" src="images/x.gif" title="顺序播放" alt="顺序播放"/></a>
<a><img id="random" src="images/h.gif" title="随机播放" alt="随机播放"/></a>
<a><img id="circle" src="images/y.gif" title="单曲循环" alt="单曲循环"/></a>
<a><img id="voiceBtn" src="images/g.gif"/></a>
<a><img id="title_bg" src="images/title_bg.gif"/></a>
<div id="voic_d_o" style="position:relative; cursor:pointer; height:18px; width:150px; left:108px; top:-22px;">
<span id="voic_id" class="voic_id_bg">
</span>
<div id="voic_d_i" style="position:absolute;background-image:url(images/voice_d.png);cursor:pointer;left:0px;top:0px;width:18px;height:18px;"></div>
</div>
</span>
</span>
</div>
<div class="play_btn">
<a href="#" class="n_pos"><img id="img_0" src="images/prve.png" /></a>
<a href="#" class="s_pos"><img id="img_1" src="images/pl_btn_puase.png" /></a>
<a href="#" class="z_pos"><img id="img_2" src="images/next.png" /></a>
</div>
</div><div id="sName"></div>
<div style="position:absolute; left:9px; top:181px; width:432px; height:95px;">
<li><div id="s0" οnclick="getUrl(this)">K歌之王.wav</div></li>
<li><div id="s1" οnclick="getUrl(this)">吻别.wav</div></li>
<li><div id="s2" οnclick="getUrl(this)">一千年以后.wav</div></li>
<li><div id="s3" οnclick="getUrl(this)">qgwl.wma</div></li>
</div>
<div style="position:absolute; left:60px; display:none; top:288px; width:532px; height:102px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="table1">
<tr>
<td colspan="2" align="center">
<!-- <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="MediaPlayer" width="0" height="0" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject">
<param name="valid_referers" value="192.168.42.10">
<param name="URL" value>
<param name="rate" value="1">
<param name="balance" value="0">
<param name="currentPosition" value="0">
<param name="defaultFrame" value>
<param name="playCount" value="">
<param name="autoStart" value="0">
<param name="currentMarker" value="0">
<param name="invokeURLs" value="0">
<param name="baseURL" value>
<param name="volume" value="100">
<param name="mute" value="-1">
<param name="uiMode" value="none">
<param name="stretchToFit" value="0">
<param name="windowlessVideo" value="0">
<param name="enabled" value="-1">
<param name="enableContextMenu" value="-1">
<param name="fullScreen" value="0">
<param name="SAMIStyle" value>
<param name="SAMILang" value>
<param name="SAMIFilename" value>
<param name="captioningID" value>
<param name="enableErrorDialogs" value="0">
</object> -->
<object id="MediaPlayer" style="width:110px ;height:110px" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715">
<param name="AudioStream" value="-1" />
<param name="AutoSize" value="-1" />
<param name="AutoStart" value="-1" />
<param name="AnimationAtStart" value="-1" />
<param name="AllowChangeDisplaySize" value="-1" />
<param name="EnableContextMenu" value="0" />
<param name="ShowAudioControls" value="-1" />
<param name="ShowDisplay" value="0" />
<param name="ShowGotoBar" value="0" />
<param name="Volume" value="100" />
<param name="ShowPositionControls" value="0" />
<param name="ShowStatusBar" value="-1" />
<param name="ShowTracker" value="-1" />
<param name="TransparentAtStart" value="-1" />
<embed align="baseline" border="0" width="300px" height="64px" type="application/x-ms-wmp" name="MediaPlayer" />
</object>
</td>
</tr>
<tr>
<td height="20" colspan="2" align="center"><font color=red><span id="playerinfo3"></span></font></td>
</tr>
<tr>
<td width="60%" height="20"><input type="file" id="FileBtn" style="visibility:hidden">
<span id="playerinfo1"></span><font color=blue><span id="playerinfo2"></span></font></td>
<td width="40%" height="20"><span id="playerinfo"></span></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="openfile" title="打开文件" οnclick="openfile()" value="打开文件">
<input type="button" name="play" title="播放" οnclick="play();" value="播放">
<input type="button" name="pause" title="暂停" οnclick="pause();" value="暂停">
<input type="button" name="stop" title="停止" οnclick="stop();" value="停止">
<input type="button" name="voldown" title="音量-" οnclick="voldown();" value="音量-">
<input type="button" name="volup" title="音量+" οnclick="volup();" value="音量+">
<input type="button" name="mute" title="静音?" οnclick="mute();" value="静音?">
<input type="button" name="balance" title="声道" οnclick="balance();" value="声道">
<input type="button" title="刷新" οnclick="location.reload();" value="刷新">
<input type="button" title="全屏" value="全屏" οnclick="fullScreen();">
</td>
</tr>
</table>
</div>
<div id="f" style="position:absolute; width:200px; height:78px; left:770px; top:70px;">ff</div>
<!--start of song_box-->
<div id="song_box">
<div class="song_title"> </div>
<div class="song_l" >
<textarea id="lrcText" name="lrcText" style="display:none">
[type:emv]
[ti:请跟我来]
[ar:苏芮 虞戡平]
[al:搭错车]
[by:幻宇]
[url:qgwl/qgwl.wma]
[folder:qgwl/]
[bg:1.jpg]
[00:16.00]我踩着不变的步伐
[00:22.19]是为了配合你到来
[00:28.54]在慌张迟疑的时候
[00:35.25]请跟我来
[00:41.61]我带着梦幻的期待
[00:47.96]是无法按捺的情怀
[00:53.99]在你不注意的时候
[01:00.75]请跟我来
[02:19.69][01:10.00]别说什么
[02:26.59][01:16.28]那是你无法预知的世界
[02:35.14][01:24.51]别说 你不用说
[02:39.92][01:29.32]你的眼睛已经告诉了我
[02:52.20][01:42.24]当春雨飘呀飘的飘在
[02:58.74][01:48.41]你滴也滴不完的发梢
[03:04.82][01:54.53]戴着你的水晶珠链
[03:11.80][02:01.36]请跟我来
</textarea>
<span class="song_text" id="lrc"> </span> </div>
<div class="song_r">
<dl class="song_r_text">
<dt style=" display:inline;"></dt> <dt style="display:inline;" title=""></dt><br />
<dt style=" display:inline;"></dt> <dt style=" display:inline;" title=""></dt>
</dl>
</div>
</body>
<script src="js/dom_pub.js"></script>
<script src="js/moveDot.js"></script>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script language="javascript">
//页面鼠标坐标和音量大小 音量,0-100
var golbalX,golbalY,muteV;
var playMode =0;//播放模式 0:顺序 1:随机 2,单曲循环
var isPlay=0;//0:未播放 1:播放中
///jquery.1.5.1///
//自定义一个比较短快捷方式,使用jQuery
var $j = jQuery.noConflict();
$j(document).ready(function(e)
{
document.onmousemove = function(e){
var e = e ? e : event;
golbalX = e.clientX ;
golbalY = e.clientY ;
}
var timeFlag = 0;
//鼠标经过上一首下一首按钮时,改变它的样式
$j('.play_btn img').hover(function()
{
if("img_0" == this.id)
{
$j(this).attr("src","images/prve_h.png");
}
if("img_2" == this.id)
{
$j(this).attr("src","images/next_h.png");
}
},function()
{
if("img_0" == this.id)
{ clearTimeout(timeFlag);
$j(this).attr("src","images/prve.png");
}
if("img_2" == this.id)
{ clearTimeout(timeFlag);
$j(this).attr("src","images/next.png");
}
}).click(function()//点击动作
{
var self = this;
//点击时改变前一首按钮样式
if("img_0" == this.id)
{
$j(this).attr("src","images/prve_t.png");
clearTimeout(timeFlag);
timeFlag = setTimeout(function()
{
$j(self).attr("src","images/prve_h.png");
},150);
}
//点击开始暂停按钮改变它样式
if("img_1" == this.id)
{ //如果正在播放
if(isPlay == 1)
{
isPlay = 0;
$j(self).attr("src","images/pl_btn_puase.png");
play();
}
//如果当前暂停
else
{
isPlay = 1;
$j(self).attr("src","images/pl_btn_play.png");
}
}
//点击时改变下一首按钮样式
if("img_2" == this.id)
{
$j(this).attr("src","images/next_t.png");
clearTimeout(timeFlag);
timeFlag = setTimeout(function()
{
$j(self).attr("src","images/next_h.png");
},150);
}
}
);
//鼠标经过离开点击进度条时处理函数
$j('#scroll_t_d_o').hover(function()
{
$j(this).children("div").stop(true,true).fadeIn(600);
},function()
{
$j(this).children("div").stop(true,true).fadeOut(600);
}
).click(function()
{
moveDiv(this.id,'scroll_t_d_i',2);
}
);
//鼠标点击音量条时处理
$j('#voic_d_o').click(function()
{
MediaPlayer.settings.volume =0;
//alert('音量:'+MediaPlayer.settings.volume);
moveDiv(this.id,'voic_d_i',3);
}
);
//鼠标点击音量按钮时处理
$j('#voiceBtn').click(function()
{
if($j(this).attr('src').indexOf('g_g.gif') > 0)
{
$j(this).attr('src','images/g.gif');
}
else
{
$j(this).attr('src','images/g_g.gif');
}
});
//鼠标点击顺序播放按钮时处理
$j("#order").click(function()
{
if(playMode != 0)
{ playMode = 0;
removeBtnImg();
$j(this).attr("src","images/x.gif");
}
}
).hover(function()
{
$j(this).attr("src","images/x.gif");
},function()//这里要判断当前是什么播放模式
{
if(playMode != 0)
{
$j(this).attr("src","images/x.gif");
}
}
);
//鼠标点击随机播放按钮时处理
$j("#random").click(function()
{
if(playMode != 1)
{ playMode = 1;
removeBtnImg();
$j(this).attr("src","images/h_h.gif");
}
}
).hover(function()
{
$j(this).attr("src","images/h_h.gif");
},function()//这里要判断当前是什么播放模式
{
if(playMode != 1)
{
$j(this).attr("src","images/h.gif");
}
}
);
//鼠标点击单曲循环按钮时处理
$j("#circle").click(function()
{
if(playMode != 2)
{
playMode = 2;
removeBtnImg();
$j(this).attr("src","images/y_h.gif");
}
}
).hover(function()
{
$j(this).attr("src","images/y_h.gif");
},function()//这里要判断当前是什么播放模式
{
if(playMode != 2)
{
$j(this).attr("src","images/y.gif");
}
}
);
//鼠标拖动进度条和音量条
moveDiv('scroll_t_d_o','scroll_t_d_i',0);
moveDiv('voic_d_o','voic_d_i',1);
});
function add(str)
{
$('f').innerHTML = "";
$('f').innerHTML = str;
}
/*鼠标拖动时移动元素
**outDiv:外层元素
**inDiv:内层元素,被移动对象
**flag:0:播放条移动 1:音量条移动 2:点击滚动条移动滚动bar
*/
function moveDiv(outDiv,inDiv,flag){
var container = $(outDiv);
var ele = $(inDiv);
var bodyWidth = container.offsetWidth,
bodyHeight = container.offsetHeight;
var maxX = bodyWidth - ele.offsetWidth - 10;
//var maxY = bodyHeight - ele.offsetHeight - 10;
if(flag==0 || flag==1 )
{
var dd = new Dragdrop(
{
target : ele,
area : [0,maxX,0,0],//元素Y轴不移动
callback : function(obj)
{//typeof obj.moveX == 'number'
if(flag==0)//拖动播放bar移动时回调处理
{
$('scroll_bg_id').style.width = obj.moveX+"px";
add("obj.moveX="+obj.moveX);
}if(flag==1)//拖动音量bar移动回调处理
{
$('voic_id').style.width = obj.moveX+"px";
add("obj.moveX="+obj.moveX);
mutePic(obj.moveX);
}
}
});
}
var maxH = golbalX-container.offsetLeft;
add("obj.moveX="+maxH);
if(flag==2)//点击播放条处理
{
if(maxH>442)
{
maxH=442;
}
$('scroll_bg_id').style.width = maxH+"px";
ele.style.left = maxH+"px";
}
if(flag==3)//点击音量条处理
{
if(maxH>122)
{
maxH=122;
}
mutePic(maxH);
$('voic_id').style.width = maxH+"px";
ele.style.left = maxH+"px";
}
}
//静音 _num=0:静音,_num>0:改变音量大小
function mutePic(_num)
{
if(_num == 0)
{
$j('#voiceBtn').attr('src','images/g_g.gif');
}
else
{
if($j('#voiceBtn').attr('src').indexOf('g_g.gif') > 0)
{
$j('#voiceBtn').attr('src','images/g.gif');
}
}
}
//---------
function removeBtnImg()
{
$j('#order').attr('src',
'images/x_h.gif');
$j('#random').attr('src',
'images/h.gif');
$j('#circle').attr('src',
'images/y.gif');
}
//
//获取播放器对象
//var MediaPlayer=$("MediaPlayer");
//获取显示歌词DIV层
var lrc=$("lrc");
//offset余补时间
var offSet=0;
//调用播放歌曲
playSong('qgwl.wma');
var isIE = window.ActiveXObject;
//先调用判断是否是IE浏览器。
if(!isIE)
{
//alert('本播放器只支持IE,\n要想听到美妙的音乐,\n请用IE浏览器,\n且支持控件!');
alert('<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_0")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_1")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_2")%>'+'\n'+'<%=RankTool.getAdminResourceInfo("info.admin_listenmusic_hint_1_3")%>');
};
//获取对象
function $(name)
{
if (document.getElementById)
{
return document.getElementById(name);
}
else if(document.all)
{
return document.all[name];
}
else
{
return null;
}
};
//播放歌曲,musicfilename:歌曲实体文件名,lrcfilename歌词文件名称
function playSong(musicfilename)
{
var sid=null;
var offSet=0;
//获取歌曲地址
//获取歌曲地址
MediaPlayer.FileName = musicfilename;
lrc.scrollTop=0;
//初始化装载歌词中....
//lrc.innerHTML= '歌词载入中...' ;
lrc.innerHTML= '歌词载入中...' ;
if(sid)
{
clearInterval(sid);
}
var lrcText = echo_lrc();
if("" != lrcText)
{
lrc.innerHTML = lrcText;
}
else
{
//没有找到歌词...
lrc.innerHTML= '没有找到歌词...';
}
//刷新歌词时间,越小,歌词越准确,但也占资源,1000表示1秒
sid = setInterval("showLrc()",100);
//setTimeout("MediaPlayer.Play()",100);
};
function tochinese(x) //xhttp编码输出中文,(by:Rimifon)
{
try
{
//最好是将歌词utf-8编码就不需要此函数转化了
var Rec=new ActiveXObject("ADODB.RecordSet");
Rec.Fields.Append("DDD",201,1);
Rec.Open(); Rec.AddNew();
Rec(0).AppendChunk(x.responseBody);
Rec.Update();var HTML=Rec(0).Value;
Rec.Close();delete Rec;
return HTML;
}
catch(e)
{
return x.responseText;
}
};
//将歌词字符串输出方法
function echo_lrc()
{
var str = $("lrcText").value;
if(/\[offset\:(\-?\d+)\]/i.test(str))
offSet= RegExp.$1/1000;
str=str.replace(/^\[ti\:([^\]]*)\]\r/mg,'<div style="cursor:hand;">《$1》</div>')
str=str.replace(/^\[ar\:([^\]]*)\]\r/mg,'<div style="cursor:hand;">$1</div>')
str=str.replace(/^\[al\:([^\]]*)\]\r/mg,'<div style="cursor:hand;">$1</div>')
str=str.replace(/^\[by\:([^\]]*)\]\r/mg,'<div style="cursor:hand;">$1</div>')
str=str.replace(/\[\:\][^$\n]*(\n|$)/g,"$1")
str=str.replace(/\]\[/g,'|')
str=str.replace(/^\[([\d\:\.\|]+)\]([^\r]*)\s*$/mg,'<div id="_time" style="cursor:hand;" οnclick="control_lrc(this.time)" time="$1">$2</div>')
str=str.replace(/\[[\w-:]*\]\s*/g,'')
str=str.replace(/(\r\n\s*){2,}/g,'<br\/>')
return str;
};
//歌词控制进度
function control_lrc(time)
{time=time.replace(/^[\s\S]*\|/,'')
var t=parseInt(time.split(':')[0])*60+parseInt(time.split(':')[1])
if(/^\d+$/.test(t))
{MediaPlayer.CurrentPosition=t-offSet}
};
//显示歌词
function showLrc() //进度控制歌词
{
var cT=MediaPlayer.CurrentPosition; //当前秒
var aT=MediaPlayer.duration; //总秒数
var arr = document.getElementsByName("_time");
var i,j,k=0,sp,tArr=[],t='';
for(i=0;i<arr.length;i++)
{
if(/\|/g.test(arr[i].time)) //相同歌词有很多时间00:12.22|12:12.58
{
tArr=arr[i].time.split("|")
for(k=0;k<tArr.length;k++)
{
tArr[k]=parseInt(tArr[k].split(':')[0])*60+Math.floor(tArr[k].split(':')[1])
}
t=','+tArr.join(',')+',' //将时间数组转换为字符串 ,1235,1253,秒
}
else
{
t=','+(parseInt(arr[i].time.split(':')[0])*60+Math.floor(arr[i].time.split(':')[1]))+',';
}
if(t.indexOf(','+Math.floor(cT+offSet)+',')>-1)
{
for(j=0;j<arr.length;j++)
{
arr[j].style.color='#c3d6c0';
}
sp=lrc.offsetTop-parseInt(lrc.offsetHeight/2)+arr[i].offsetTop ; //始终使歌词在正中,哈哈
lrc.scrollTop = sp;
arr[i].style.color='#00FF00';
}
}
};
/
var state;
var varb;
var varfullscreen=0;
function loop()
{
MediaPlayer.playCount=2;
}
function openfile()
{
var fstr='';
FileBtn.click();
if (FileBtn.value=='')
return;
MediaPlayer.URL=FileBtn.value;
playerinfo1.innerHTML = '全声道 ';
playerinfo3.innerHTML="<b><font color=green>当前播放文件的路径和名称是: </font></b>"+FileBtn.value;
}
function playerinit()
{
MediaPlayer.url="001.mp3"; //定义你自己的文件
MediaPlayer.settings.autoStart = false ;
}
function play()
{
//if(MediaPlayer.URL='')alert('请打开文件');return; οnlοad="playerinit()"
if (MediaPlayer.controls.isavailable('play'))
{
MediaPlayer.controls.play();
state=setInterval("updatetime()",1000);
playerinfo.innerHTML = "播放"
varfullscreen=1;
playerinfo2.innerHTML = '音量:'+MediaPlayer.settings.volume;
}
}
function voldown()
{
if ( MediaPlayer.settings.volume < 5 )
{
MediaPlayer.settings.volume = 0;
playerinfo2.innerHTML = "音量:0";
playerinfo1.innerHTML = '沉默中 ';
}
else
{
MediaPlayer.settings.volume -= 5;
playerinfo2.innerHTML = '音量:'+MediaPlayer.settings.volume;
playerinfo1.innerHTML = '非静音 ';
}
}
function volup()
{
if ( MediaPlayer.settings.volume > 95 )
{
MediaPlayer.settings.volume = 100;
playerinfo2.innerHTML = "音量:100";
playerinfo1.innerHTML = '最大音 ';
}
else
{
MediaPlayer.settings.volume += 5;
playerinfo2.innerHTML = '音量:'+MediaPlayer.settings.volume;
playerinfo1.innerHTML = '非静音 ';
}
}
function pause()
{
if (MediaPlayer.controls.isavailable('pause'))
{
MediaPlayer.controls.pause();
clearInterval(state);
playerinfo.innerHTML = "暂停";
varfullscreen=1;
}
}
function stop()
{
if (MediaPlayer.controls.isavailable('stop'))
{
MediaPlayer.controls.stop();
clearInterval(state);
playerinfo.innerHTML = "停止"
varfullscreen=0;
}
}
function mute()
{
MediaPlayer.settings.mute = !MediaPlayer.settings.mute;
if(varb!=1)
{
playerinfo1.innerHTML = '静音中 ';
document.all.volup.disabled=true;
document.all.voldown.disabled=true;
document.all.balance.disabled=true;
varb=1;
}
else
{
playerinfo1.innerHTML = '非静音 ';
document.all.volup.disabled=false;
document.all.voldown.disabled=false;
document.all.balance.disabled=false;
varb=0;
}
}
function balance()
{
switch (MediaPlayer.settings.balance)
{
case 0:
MediaPlayer.settings.balance = 100;
playerinfo1.innerHTML = '左声道 ';
break;
case 100:
MediaPlayer.settings.balance = -100;
playerinfo1.innerHTML = '右声道 ';
break;
case -100:
MediaPlayer.settings.balance = 0;
playerinfo1.innerHTML = '全声道 ';
break;
default :
MediaPlayer.settings.balance = 0;
playerinfo1.innerHTML = '全声道 ';
break;
}
}
function fullScreen()
{
if(varfullscreen)
MediaPlayer.fullScreen='true';
else
MediaPlayer.fullScreen='0';
}
function updatetime()
{
if(MediaPlayer.controls.currentPositionString=='')
{
playerinfo.innerHTML = "00:00" + " / " + MediaPlayer.currentMedia.durationString;
varfullscreen=0;
}
else
playerinfo.innerHTML = MediaPlayer.controls.currentPositionString + " / " + MediaPlayer.currentMedia.durationString;
}
</script>
<script language = "JavaScript" for=MediaPlayer event=playstatechange(newstate)>
switch (newstate)
{
case 1:
add( "停止");
break;
case 2:
add( "暂停");
break;
case 3:
add( "正在播放");
break;
case 4:
add( "4");
break;
case 5:
add( "5");
break;
case 6:
add( "正在缓冲...");
break;
case 7:
add( "7");
break;
case 8:
add( "8");
break;
case 9:
add( "正在连接...");
break;
case 10:
add( "准备就绪");
break;
case 11:
add( "11");
break;
default:
add( "");
}
</script>
</html>