网页播放技术-鼠标拖动歌词定位播放

最新推荐文章于 2024-06-12 11:59:04 发布

fengzi8

最新推荐文章于 2024-06-12 11:59:04 发布

阅读量704

点赞数

分类专栏： JavaScript 文章标签： border table class div function javascript

本文链接：https://blog.csdn.net/fengzi8/article/details/982525

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>

<head>

<title>WebTtPlayer - aboutplayer.com</title>

<style>

#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}

#lrcoll td { color:#0080C0; }

.lrcbc { color:#FFFF33; overflow:hidden; height:20; width:0; filter:alpha(opacity=100); }

</style>

</head>

self.moveTo(0,0);

self.resizeTo(screen.availWidth,screen.availHeight);

</script>

<base οnmοuseοver="window.status=' aboutplayer.com 别忘了把地址告诉你<a class='Channel_KeyLink' href='http://www.51it.org/school/tools/tongxun/qq/index.html'>QQ</a>上的朋友哦！'; return true;">

<span id="lrcdata"><!--

[ti:泪的小雨]

[ar:邓丽君]

[offset:0]

[la:zh]

[by:aboutplayer]

[00:02.00]泪的小雨－邓丽君

[00:08.05]

[00:08.35]彩木雅夫 / Nagata Takashi 曲

[00:16.40]

[00:16.70]庄奴词森冈贤一郎编

[00:21.15]

[00:22.65]<00:23.15>分<00:23.55>不<00:23.90>出<00:24.30>是<00:24.80>泪<00:25.40>是<00:26.10>雨<00:27.60>

[00:28.30]<00:28.80>泪<00:29.15>和<00:29.50>雨<00:29.90>忆<00:30.36>起<00:30.95>了<00:31.70>你<00:33.90>

[00:34.05]<00:34.55>忆<00:34.85>起<00:35.40>你<00:35.92><00:36.10>雨<00:36.40>中<00:36.90>分<00:37.45>离<00:38.15>

[00:38.25]<00:38.70>泪<00:39.70>珠<00:40.00>儿<00:41.30>洒<00:42.05>满<00:43.00>地<00:44.40>

[00:44.75]<00:45.25>哭<00:45.70>泣<00:46.35> <00:46.60>你<00:47.15>哭<00:47.63>泣<00:47.90>为<00:48.20>了<00:48.50>分<00:48.80>离<00:49.40>

[00:49.55]分<00:50.00>离<00:50.70> <00:50.85>分<00:51.10>离<00:51.32>後<00:51.60>再<00:51.90>相<00:52.40>见<00:52.75>不<00:53.00>易<00:53.70>

[00:53.80]<00:54.10>我<00:54.70>重<00:54.95>把<00:55.25>你<00:55.70>的<00:56.00>爱<00:56.35>情<00:56.65>藏<00:57.10>在<00:57.40>我<00:57.75>心<00:58.05>底<00:58.35>

[00:58.45]<00:58.80>啊<00:59.20> <00:59.35>- - -<01:01.35> <01:01.75>藏<01:02.05>在<01:02.40>我<01:02.70>心<01:03.30>底<01:04.40>

[01:04.55]就<01:05.07>好<01:05.50>像<01:06.35><01:06.63>藏<01:07.30>起<01:08.00>回<01:08.77>忆<01:11.80>

[01:13.30]

[01:22.50]<01:23.00>我<01:23.45>喜<01:23.80>欢<01:24.15>绵<01:24.65>绵<01:25.25>细<01:25.87>雨<01:27.85>

[01:28.30]<01:28.80>细<01:29.20>雨<01:29.45>里<01:29.80>忆<01:30.35>起<01:31.00>了<01:31.65>你<01:33.90>

[01:34.00]<01:34.50>忆<01:34.80>起<01:35.35>你<01:35.77><01:36.05>在<01:36.35>我<01:36.85>怀<01:37.40>里<01:38.40>

[01:38.50]<01:38.80>泪<01:39.75>珠<01:40.05>儿<01:41.50>洒<01:42.10>满<01:43.15>地<01:44.60>

[01:44.75]<01:45.25>哭<01:45.80>泣<01:46.47> <01:46.70>你<01:47.25>哭<01:47.69>泣<01:48.00>为<01:48.25>了<01:48.50>分<01:48.85>离<01:49.50>

[01:49.65]分<01:50.15>离<01:50.95> <01:51.10>分<01:51.35>离<01:51.60>後<01:51.85>再<01:52.10>相<01:52.65>见<01:52.95>不<01:53.25>易<01:53.95>

[01:54.05]<01:54.25>我<01:54.85>重<01:55.15>把<01:55.45>你<01:55.85>的<01:56.10>影<01:56.52>子<01:56.80>藏<01:57.30>在<01:57.55>睡<01:57.85>梦<01:58.35>里<01:58.65>

[01:58.75]<01:59.05>啊<01:59.45> <01:59.60>- - -<02:01.80> <02:01.95>藏<02:02.30>在<02:02.65>睡<02:03.00>梦<02:03.50>里<02:04.75>

[02:04.90]就<02:05.40>好<02:05.80>像<02:06.85><02:07.10>藏<02:07.60>起<02:08.30>回<02:09.23>忆<02:11.95>

[02:13.45]

[02:35.00]<02:35.50>分<02:35.85>不<02:36.15>出<02:36.55>是<02:37.10>泪<02:37.70>是<02:38.45>雨<02:40.25>

[02:40.80]<02:41.30>泪<02:41.65>和<02:41.95>雨<02:42.25>忆<02:42.85>起<02:43.45>了<02:44.15>你<02:46.05>

[02:46.60]<02:47.10>忆<02:47.40>起<02:47.95>你<02:48.40><02:48.55>雨<02:48.85>中<02:49.40>分<02:50.00>离<02:50.95>

[02:51.05]<02:51.40>泪<02:52.30>珠<02:52.65>儿<02:53.90>洒<02:54.65>满<02:55.57>地<02:57.10>

[02:57.30]<02:57.80>哭<02:58.30>泣<02:59.05> <02:59.20>你<02:59.70>哭<03:00.30>泣<03:00.60>为<03:00.95>了<03:01.20>分<03:01.50>离<03:02.05>

[03:02.20]分<03:02.75>离<03:03.37> <03:03.55>分<03:03.80>离<03:04.05>後<03:04.30>再<03:04.60>相<03:05.20>见<03:05.50>不<03:05.80>易<03:06.70>

[03:06.85]我<03:07.40>重<03:07.60>把<03:07.90>你<03:08.40>的<03:08.65>眼<03:09.05>泪<03:09.40>藏<03:09.80>在<03:10.00>寂<03:10.30>寞<03:10.75>里<03:11.05>

[03:11.15]<03:11.55>啊<03:11.95> <03:12.10>- - -<03:14.22> <03:14.45>藏<03:14.80>在<03:15.10>寂<03:15.40>寞<03:15.90>里<03:17.20>

[03:17.35]就<03:17.95>好<03:18.30>像<03:19.35><03:19.60>藏<03:20.10>起<03:20.80>回<03:21.73>忆<03:25.40>

[03:26.90]

[03:34.90]www.aboutplayer.com

--></span>

</object>

<tr><td nowrap height="20"><span id="lrcbox1" style="height:20; color:#00FF00">歌词加载中</span></td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</tr>

</table>

</td></tr>

</table>

</div>

</center>

lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));

var lrc0, lrc1;

moveflag = false;

movable = false;

moven = false;

var lrctop;

predlt = 0;

curdlt = 0;

curpot = 0;

function lrcClass(tt)

{

this.inr = [];

this.oTime = 0;

this.dts = -1;

this.dte = -1;

this.dlt = -1;

this.ddh;

this.fjh;

if(//[offset/:(/-?/d+)/]/i.test(tt))

this.oTime = RegExp.$1/1000;

tt = tt.replace(//[/:/][^$/n]*(/n|$)/g,"$1");

tt = tt.replace(//[[^/[/]/:]*/]/g,"");

tt = tt.replace(//[[^/[/]]*[^/[/]/d]+[^/[/]]*/:[^/[/]]*/]/g,"");

tt = tt.replace(//[[^/[/]]*/:[^/[/]]*[^/[/]/d/.]+[^/[/]]*/]/g,"");

tt = tt.replace(/<[^<>]*[^<>/d]+[^<>]*/:[^<>]*>/g,"");

tt = tt.replace(/<[^<>]*/:[^<>]*[^<>/d/.]+[^<>]*>/g,"");

while(//[[^/[/]]+/:[^/[/]]+/]/.test(tt))

{

tt = tt.replace(/((/[[^/[/]]+/:[^/[/]]+/])+[^/[/r/n]*)[^/[]*/,"/n");

var zzzt = RegExp.$1;

/^(.+/])([^/]]*)$/.exec(zzzt);

var ltxt = RegExp.$2;

var eft = RegExp.$1.slice(1,-1).split("][");

for(var ii=0; ii<eft.length; ii++)

{

var sf = eft[ii].split(":");

var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1]);

var sso = { t:[] , w:[] , n:ltxt }

sso.t[0] = tse-this.oTime;

this.inr[this.inr.length] = sso;

}

this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} );

for(var ii=0; ii<this.inr.length; ii++)

{

while(/<[^<>]+/:[^<>]+>/.test(this.inr[ii].n))

{

this.inr[ii].n = this.inr[ii].n.replace(/<(/d+)/:([/d/.]+)>/,"%=%");

var tse = parseInt(RegExp.$1,10) * 60 + parseFloat(RegExp.$2);

this.inr[ii].t[this.inr[ii].t.length] = tse-this.oTime;

}

lrcbc1.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +" </font>";

var fall = lrcbc1.getElementsByTagName("font");

for(var wi=0; wi<fall.length; wi++)

this.inr[ii].w[this.inr[ii].w.length] = fall[wi].offsetWidth;

this.inr[ii].n = lrcbc1.innerText;

}

this.run = function(tme)

{

if(tme<this.dts || tme>=this.dte)

{

var ii;

for(ii=this.inr.length-1; ii>=0 && this.inr[ii].t[0]>tme; ii--){}

if(ii<0) return;

this.ddh = this.inr[ii].t;

this.fjh = this.inr[ii].w;

this.dts = this.inr[ii].t[0];

this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration;

if(!movable)

{

lrctop = 140;

lrcoll.style.pixelTop = 140;

lowlight(lrcbox1);

for(var wi=1; wi<=this.inr.length; wi++)

{

eval("lrcbox"+wi).innerText = this.inr[wi-1].n;

eval("lrcbc"+wi).innerText = this.inr[wi-1].n;

}

movable = true;

}

if(moven)

moven = false;

else

{

if(this.dlt>0) lowcolor(eval("lrcbc"+this.dlt));

if(this.dlt==ii-1)

{

predlt = this.dlt+1;

if(predlt>0 && eval("lrcbc"+predlt).style.width!="100%") eval("lrcbc"+predlt).style.width = "100%";

if(predlt>0) highcolor(0,this.dte-this.dts);

toposition(1,this.dte-this.dts);

}

if(ii-this.dlt>1 || ii-this.dlt<=-1)

{

if(this.dlt==-1 || ii==0)

{

jumpto(ii-this.dlt-1);

toposition(1,this.dte-this.dts);

}

else

jumpto(ii-this.dlt);

if(this.dlt>=0) lowcolor(eval("lrcbc"+(this.dlt+1)));

}

if(this.dlt>=0) lowlight(eval("lrcbox"+(this.dlt+1)));

highlight(eval("lrcbox"+(ii+1)));

}

this.dlt = ii;

curdlt = ii;

curpot = ii;

}

var bbw = 0;

var ki;

for(ki=0; ki<this.ddh.length && this.ddh[ki]<=tme; ki++)

bbw += this.fjh[ki];

var kt = ki-1;

var sc = ((ki<this.ddh.length)?this.ddh[ki]:this.dte) - this.ddh[kt];

var tc = tme - this.ddh[kt];

bbw -= this.fjh[kt] - tc / sc * this.fjh[kt];

if(bbw>eval("lrcbox"+(this.dlt+1)).offsetWidth)

bbw = eval("lrcbox"+(this.dlt+1)).offsetWidth;

eval("lrcbc"+(this.dlt+1)).style.width = Math.round(bbw);

}

lrcbox1.innerText = "www.aboutplayer.com";

}

function lrcrun()

{

with(aboutplayer)

{

lrcobj.run(controls.currentPosition);

}

if(arguments.length==0) lrc0 = setTimeout("lrcrun()",10);

}

function jumpto(nline)

{

lrctop -= 20*nline;

lrcoll.style.top = lrctop;

}

function toposition(step,dur)

{

if(moveflag) return;

lrcoll.style.top = lrctop--;

if(step<20)

{

step++;

setTimeout("toposition("+step+","+dur+");",dur*50);

}

function highcolor(step,dur)

{

if(moveflag) return;

eval("lrcbc"+predlt).filters.alpha.opacity = 100-(step++)*10;

if(step<10)

lrc1 = setTimeout("highcolor("+step+","+dur+");",dur*100);

}

function highlight(lid)

{

lid.style.color = "#00FF00";

}

function lowcolor(lid)

{

clearTimeout(lrc1);

lid.style.width = 0;

lid.filters.alpha.opacity = 100;

}

function lowlight(lid)

{

lid.style.color = "#0080C0";

}

lrcrun();

MakeMovable(lrcollbox);

function MakeMovable(element)

{

element.attachEvent("onmousedown",onmousedown);

element.attachEvent("onmouseup",onmouseup);

element.attachEvent("onmousemove",onmousemove);

flagmove = false;

var s_y, o_y;

function onmousedown()

{

if(event.button!=1 || moveflag || !movable) {flagmove = true; return;}

clearTimeout(lrc0);

if(curdlt>0) lowcolor(eval("lrcbc"+curdlt));

lowcolor(eval("lrcbc"+(curdlt+1)));

lowlight(eval("lrcbox"+(curdlt+1)));

if(lrcoll.style.pixelTop>120) lrcoll.style.top = 120;

if(lrcoll.style.pixelTop<-((lrcobj.inr.length-1)*20-120)) lrcoll.style.top = -((lrcobj.inr.length-1)*20-120);

s_y = event.clientY;

o_y = lrcoll.style.pixelTop;

element.style.cursor = "n-resize";

element.setCapture();

moveflag = true;

}

function onmousemove()

{

if(event.button!=1 || !moveflag || flagmove) return;

var offy = event.clientY-s_y;

if(o_y+offy<=120 && o_y+offy>=-((lrcobj.inr.length-1)*20-120))

lrcoll.style.top = o_y+offy;

if(o_y+offy>120) lrcoll.style.top = 120;

if(o_y+offy<-((lrcobj.inr.length-1)*20-120)) lrcoll.style.top = -((lrcobj.inr.length-1)*20-120);

var pot = Math.floor((lrcoll.style.pixelTop-120)/-20);

if(pot!=curpot)

{

lowlight(eval("lrcbox"+(curpot+1)));

curpot = pot;

highlight(eval("lrcbox"+(curpot+1)));

}

function onmouseup()

{

if(!moveflag || flagmove) {flagmove = false; return;}

if(aboutplayer.playState==3)

{

if(lrcoll.style.pixelTop<=120 && lrcoll.style.pixelTop>100)

lrcobj.dte = -1;

else

lrcobj.dte = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)-1].t[0];

if(lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0]<0)

aboutplayer.controls.currentPosition = 0;

else

aboutplayer.controls.currentPosition = lrcobj.inr[Math.floor((lrcoll.style.pixelTop-120)/-20)].t[0];

if(lrcoll.style.pixelTop==o_y || Math.floor((lrcoll.style.pixelTop-120)/-20)==curdlt) highlight(eval("lrcbox"+(Math.floor((lrcoll.style.pixelTop-120)/-20)+1)));

lrctop = lrcoll.style.pixelTop;

moven = true;

}

else

{

lowlight(eval("lrcbox"+(curpot+1)));

highlight(eval("lrcbox"+(curdlt+1)));

lrcoll.style.top = o_y;

}

lrc0 = setTimeout("lrcrun()",10);

element.releaseCapture();

element.style.cursor = "hand";

moveflag = false;

}

</script>

</body>

</html>

fengzi8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页播放技术-鼠标拖动歌词定位播放

WebTtPlayer - aboutplayer.com#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}#lrcoll td { color:#0080C0; }.lrcbc { color:#FFFF33; overflow:hidden; height:20; width:0; fil
复制链接

扫一扫