用Dreamweaver 8 ASP怎么做出网页的同步歌词

就像百度音乐那种

推荐答案推荐于2016-08-23

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>lrc歌词同步播放器</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE>BODY {
FONT-FAMILY: 宋体; FONT-SIZE: 9pt
}
TD {
FONT-FAMILY: 宋体; FONT-SIZE: 9pt
}
#bkk {
BORDER-BOTTOM: #9999ff 1px dotted; BORDER-LEFT: #9999ff 1px dotted; BORDER-TOP: #9999ff 1px dotted; BORDER-RIGHT: #9999ff 1px dotted
}
#lrcollbox TD {
FONT-FAMILY: 黑体; FONT-SIZE: 15pt
}
#lrcollbox FONT {
FONT-FAMILY: 黑体; FONT-SIZE: 15pt
}
.kong {
FILTER: Glow(color=#0066FF,strength=4)
}
#lrcoll TD {
COLOR: #66cc99
}
#lrcbox {
COLOR: #ffffff
}
#lrcbc {
COLOR: #99ccff
}
#lrcxx {
COLOR: #ffff00
}
#lrcwt1 {
FILTER: alpha(opacity=100)
}
#lrcwt5 {
FILTER: alpha(opacity=100)
}
</STYLE>

<SCRIPT language=JavaScript>

/*
=====================================================================
程序名称：lrc歌词播放（完美版）
程序件者：海浪
发行网站：http://kongjianzhan.126.com
作者信箱：[email protected]
制作日期：3005年09月12日

说明：本lrc歌词播放程序原是《浩海网络多格式播放器》中的一个组件，
现提取出来加以改进。本程序任何人都可以使用，但无论您转载或
对本程序作任何修改、美化、翻译等工作，请您*必须*保留此段版
权宣告的内容。
=====================================================================
*/

// 为了兼容 IE5.0 结果好多正则的语法和处理方式都不能用，所以代码效率不是最高，郁闷。

function lrcClass(tt) //LRC歌词处理类
{
this.gsh="歌手:~1~\n曲名:~2~\n专辑:~3~\n编者:~4~";
this.inr = []; //行
this.oTime = 0; //余补时间
this.hailang;
this.dts = -1; //当前行显示的s
this.dte = -1; //当前行显示的e
this.dlt = -1; //当前行
this.ddh; //当前行数据
this.fjh;
this.haohaiplay;
this.oceanx;
this.cnane;
//以上几个属性是为了判断是否还在上次显示的时间范围，以减少循环次数

if(/\[offset\:(\-?\d+)\]/i.test(tt)) //取offset余补时间
this.oTime = RegExp.$1/1000;
this.gsh = this.gsh.replace("~1~",(/\[ar:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~2~",(/\[ti:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~3~",(/\[al:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
this.gsh = this.gsh.replace("~4~",(/\[by:([^\[\]:]+)\]/i.test(tt))?RegExp.$1:"----");
lrcxx.innerText = this.gsh;
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;
}
lrcbc.innerHTML = "<font>"+ this.inr[ii].n.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/%=%/g,"</font><font>") +" </font>";
var fall = lrcbc.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 = lrcbc.innerText;
}

this.print("");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcbc.style.width = 0;
}

lrcClass.prototype.run = function()
{
try {
if(this.oceanx==0)
this.runing(this.haohaiplay.controls.currentPosition, this.haohaiplay.currentMedia.duration);
else
this.runing(this.haohaiplay.GetPosition()/1000, this.haohaiplay.GetLength()/1000);
} catch(hh){}
}

lrcClass.prototype.runing = function(tme, plen)
{
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]:plen;

lrcwt1.innerText = this.retxt(ii-3);
lrcwt2.innerText = this.retxt(ii-2);
lrcwt3.innerText = this.retxt(ii-1);
lrcwt4.innerText = this.retxt(ii+1);
lrcwt5.innerText = this.retxt(ii+2);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(this.hailang);
this.golrcoll(0);
}
this.dlt = 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>lrcbox.offsetWidth)
bbw = lrcbox.offsetWidth;
lrcbc.style.width = Math.round(bbw);
}

lrcClass.prototype.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr[i].n;
}

lrcClass.prototype.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}

lrcClass.prototype.golrcoll = function(s)
{
lrcoll.style.top = 25-(s++)*5;
lrcwt1.filters.alpha.opacity = 90-s*18;
lrcwt5.filters.alpha.opacity = s*18+10;
if(s<=5)
this.hailang = setTimeout(this.cnane+".golrcoll("+s+")",120);
}

////////////////////////////////////////////////////////////////////

var lrcobj;

function play()
{
var m = lrcdata.innerHTML.slice(4,-3);
lrcobj = new lrcClass(m);
lrcobj.cnane = "lrcobj";
lrcobj.haohaiplay = mediaPlayerObj;
lrcobj.oceanx = 0;
//0为使用 Media Player 控件，1为使用 Real Player 控件

setInterval("lrcobj.run();",100);

}

</SCRIPT>

<META name=GENERATOR content="MSHTML 8.00.6001.18702"></HEAD>
<BODY onload=play() bgColor=#000000><SPAN id=lrcdata></SPAN>
<CENTER>
<TABLE>
<TBODY>
<TR>
<TD height=300 width=400>
<OBJECT id=mediaPlayerObj
classid=clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6 width=400 height=300><PARAM NAME="url" VALUE="http://219.139.35.98:8091/MUSIC/1000006.MP3"><PARAM NAME="rate" VALUE="1"><PARAM NAME="balance" VALUE="0"><PARAM NAME="currentPosition" VALUE="0"><PARAM NAME="playCount" VALUE="1"><PARAM NAME="autoStart" VALUE="-1"><PARAM NAME="volume" VALUE="100"><PARAM NAME="currentMarker" VALUE="0"><PARAM NAME="invokeURLs" VALUE="-1"><PARAM NAME="stretchToFit" VALUE="-1"><PARAM NAME="windowlessVideo" VALUE="0"><PARAM NAME="enabled" VALUE="-1"><PARAM NAME="enableContextMenu" VALUE="0"><PARAM NAME="fullScreen" VALUE="0"><PARAM NAME="enableErrorDialogs" VALUE="0"></OBJECT></TD>
<TD id=lrcxx height=300 width=180></TD></TR></TBODY></TABLE>
<DIV style="WIDTH: 700px" id=bkk>
<DIV style="WIDTH: 100%; HEIGHT: 210px; OVERFLOW: hidden" id=lrcollbox>
<TABLE style="POSITION: relative; TOP: 30px" id=lrcoll border=0 cellSpacing=0
cellPadding=0 width="100%">
<TBODY>
<TR>
<TD id=lrcwt1 height=30 noWrap align=middle></TD></TR>
<TR>
<TD id=lrcwt2 height=30 noWrap align=middle></TD></TR>
<TR>
<TD id=lrcwt3 height=30 noWrap align=middle></TD></TR>
<TR>
<TD class=kong height=30 noWrap align=middle>
<TABLE border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD height=30 noWrap><SPAN style="WIDTH: 0px"
id=lrcbox></SPAN></TD></TR>
<TR style="Z-INDEX: 6; POSITION: relative; TOP: -30px">
<TD height=30 noWrap><SPAN style="WIDTH: 0px; OVERFLOW: hidden"
id=lrcbc></SPAN></TD></TR></TBODY></TABLE></TD></TR>
<TR style="POSITION: relative; TOP: -30px">
<TD id=lrcwt4 height=30 noWrap align=middle></TD></TR>
<TR style="POSITION: relative; TOP: -30px">
<TD id=lrcwt5 height=30 noWrap
align=middle></TD></TR></TBODY></TABLE></DIV></DIV></CENTER></BODY></HTML>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://66.wendadaohang.com/zd/UD22DpD2U.html

相似回答

大家正在搜