|
 
- 帖子
- 407
- 积分
- 777
- 注册时间
- 2007-7-12
|
歌词同步代码测试代码：
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<title>歌词同步测试代码</title>
<STYLE type=text/css>
TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; }
BODY{
FONT-SIZE: 9pt;
LINE-HEIGHT: 17px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;}
#lrcoll td { color:#0080C0; cursor: default; }
#lrcbox { color:#00FF00 }
#lrcfilter { filter: alpha(opacity=0) }
#lrcbc { color:#FFFF33 }
</STYLE>
</head>
<script language="JavaScript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"><!--
[ti:青春日记]
[ar:沙宝亮]
[al:逍遥公子欢迎你]
[00:01.25]青春日记(逍遥记录编辑)
[00:07.03]作词：谭克媛 作曲：侯均
[00:14.94]编曲：孟可
[00:20.73]演唱：沙宝亮
[00:26.41]我在青春的日记里流浪
[00:31.61]迷惘的脚步一行一行
[00:37.43]走过欢喜走过忧伤
[00:42.50]走过那些莫名的惆怅
[02:19.52][00:48.10]还有那初次动情的地方
[02:24.93][00:53.42]当年龄在记忆里成长
[02:30.65][00:59.00]我的目光我的歌唱
[02:35.77][01:04.24]每一天都在这里珍藏
[02:41.48][01:09.81]我对你谈起的那些梦想
[02:46.82][01:15.48]还有我的年少轻狂
[02:52.38][01:20.87]青春的日记应该充满阳光
[02:57.79][01:26.16]照亮了每一页年轻的时光
[03:29.38][03:03.24][01:31.67]积蓄温暖积蓄力量
[03:34.73][03:08.68][01:37.09]因为我和我的梦正奔跑在路上
[03:40.10][03:14.07][01:42.45]来不及叹息来不及思量来不及回头望
[03:50.72][03:24.40][01:53.17]因为青春正长
--></span>
<center>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240">
<param name="url" value="http://www.whx.gov.cn/forumimages/200781017311743.wma">
<param name="volume" value="100">
<param name="enablecontextmenu" value="0">
<param name="enableerrordialogs" value="0">
</object>
<div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" >
<tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr>
<tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr>
<tr><td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr>
<tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -20px"><td nowrap height="20" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr>
<tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr>
</table>
</td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr>
<tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr>
</table>
</div>
</center>
<script language="JavaScript">
var lrc0;
var lrc1;
var min;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr = [];
this.min = [];
this.oTime = 0;
this.dts = -1;
this.dte = -1;
this.dlt = -1;
this.ddh;
this.fjh;
lrcbc.style.width = 0;
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;
}
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;
}
for(var ii=0; ii<this.inr.length-1; ii++)
this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);
this.min.sort(function(a,b){return a-b});
min = this.min[0]/2;
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;
lrcwt1.innerText = this.retxt(ii-7);
lrcwt2.innerText = this.retxt(ii-6);
lrcwt3.innerText = this.retxt(ii-5);
lrcwt4.innerText = this.retxt(ii-4);
lrcwt5.innerText = this.retxt(ii-3);
lrcwt6.innerText = this.retxt(ii-2);
lrcwt7.innerText = this.retxt(ii-1);
lrcfilter.innerText = this.retxt(ii-1);
lrcwt8.innerText = this.retxt(ii+1);
lrcwt9.innerText = this.retxt(ii+2);
lrcwt10.innerText = this.retxt(ii+3);
lrcwt11.innerText = this.retxt(ii+4);
lrcwt12.innerText = this.retxt(ii+5);
lrcwt13.innerText = this.retxt(ii+6);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(lrc0);
if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;
golrcoll(0);
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 100;
golrcolor(0);
}
else if(parseInt(lrcoll.style.top)!=-20)
{
clearTimeout(lrc0);
lrcoll.style.top = -20;
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 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);
}
this.retxt = function(i)
{
return (i<0 || i>=this.inr.length)?"":this.inr.n;
}
this.print = function(txt)
{
lrcbox.innerText = txt;
lrcbc.innerText = txt;
}
this.print("欢迎光临—逍遥");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt7.innerText = "";
lrcfilter.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition);
}
if(arguments.length==0) setTimeout("lrcrun()",10);
}
function golrcoll(s)
{
lrcoll.style.top = -(s++)*2;
if(s<=9)
lrc0 = setTimeout("golrcoll("+s+")",min*10);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 110-(t++)*10;
if(t<=10)
lrc1 = setTimeout("golrcolor("+t+")",min*10);
}
window.onerror = function()
{return true;}
lrcrun();
</script>
</body>
</html>
复制粘贴到http://www.17zm.net/tools/DIY.htm运行“HTML”即可测试！
播放代码
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:26px;v-text-align:left}
</style>
<body>
<xmp id=xLyric style=display:none>
[ti:青春日记]
[ar:沙宝亮]
[al:逍遥公子欢迎你]
[00:01.25]青春日记(逍遥记录编辑)
[00:07.03]作词：谭克媛 作曲：侯均
[00:14.94]编曲：孟可
[00:20.73]演唱：沙宝亮
[00:26.41]我在青春的日记里流浪
[00:31.61]迷惘的脚步一行一行
[00:37.43]走过欢喜走过忧伤
[00:42.50]走过那些莫名的惆怅
[02:19.52][00:48.10]还有那初次动情的地方
[02:24.93][00:53.42]当年龄在记忆里成长
[02:30.65][00:59.00]我的目光我的歌唱
[02:35.77][01:04.24]每一天都在这里珍藏
[02:41.48][01:09.81]我对你谈起的那些梦想
[02:46.82][01:15.48]还有我的年少轻狂
[02:52.38][01:20.87]青春的日记应该充满阳光
[02:57.79][01:26.16]照亮了每一页年轻的时光
[03:29.38][03:03.24][01:31.67]积蓄温暖积蓄力量
[03:34.73][03:08.68][01:37.09]因为我和我的梦正奔跑在路上
[03:40.10][03:14.07][01:42.45]来不及叹息来不及思量来不及回头望
[03:50.72][03:24.40][01:53.17]因为青春正长
</xmp>
</body>
</html>
<script>
window.onerror=function(){return false}
start()
function start(){
browser_ini()
timer_ini()
emv_ini()
lrc.setData(oo("xLyric").innerHTML)
lrc.write("歌曲载入中，请耐心等待...","l")
emv.play("http://www.whx.gov.cn/forumimages/200781017311743.wma")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:100;top:200;width:600;height:460>"
l+="<div style=position:absolute;left:0;top:0;width:600;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:19;top:26;width:560;height:360;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=250 height=200 style=display:none></object>"
insHtm(document.body,l)
emv.play=function(url){oo("mplayer").FileName=url;oo("mplayer").Play()}
emv.time=function(){
var mPos=mplayer.CurrentPosition,n=lrc.i
var n1,o,len,w,per,n0,n1
n1=n<lrc.arr.length-1?lrc.arr[n+1].slice(0,"|")*1:9999
if(n1<mPos){
lrc.i++
n++
if(n==0)
lrc.write(lrc.arr[n].slice("|"),"l")
if(n<lrc.arr.length-1)
lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
}
if(n>=0){
n0=lrc.arr[n].slice(0,"|")
n1=lrc.arr.length>n+1?lrc.arr[n+1].slice(0,"|"):4
o=oo("bxCaption_"+(n%2==0?"l":"r")+"_cover")
len=o.time!=""?o.time*1:n1-n0
per=(mPos-n0)/len
for(i=0.001;i<1;i+=0.001){
per1=lrc.getRealPos(o,i)
if(per1>=per)
break
}
o.style.width=o.width*i
}
}
timer.add("emv.time()")
}
function lrc_ini(){
window.lrc={}
lrc.wordPer=function(str,pos){
return str.slice(0,pos).replace(/[^\x00-\xff]/g," ").length/str.replace(/[^\x00-\xff]/g," ").length
}
lrc.setData=function(str){
var l,a,i,ad,n,j
str=str.replace(/\|/g,"").replace(/\r\n/g,"\n")
str=str.replace(/\[(\d\d)\:(\d\d)\.(\d\d)\]/g,function($0,$1,$2,$3){return ($1*60+$2*1+$3/100)+"|"})
a=str.split("\n")
lrc.arr=new Array()
for(i=0;i<a.length;i++){
ad=a.split("|")
for(j=1;j<ad.length;j++){
lrc.arr.add(ad[j-1]+"|"+ad[ad.length-1])
}
}
lrc.i=-1
sortIndex=0
sortDir=1
lrc.arr.sort(sortFoo)
}
lrc.getRealPos=function(obj,pos){
var a=obj.path,zoom=obj.zoom,pos1=pos*zoom
var a,i,ad
for(i=0;i<a.length;i++){
ad=a
if(pos<=ad[0])
continue
if(pos>ad[0]&&pos<=ad[1])
pos1+=(zoom*ad[2]-zoom)*(pos-ad[0])
else{
pos1+=(zoom*ad[2]-zoom)*(ad[1]-ad[0])
}
}
return pos1
}
lrc.write=function(str,pos){
var word=str,style=""
var x,y,l,w,w1,o,a,i,ad
if(/^\<.+\>/.test(str)){
word=str.slice(">")
style=str.slice(1).slice(0,">")
}
w=word.replace(/[^\x00-\xff]/g," ").length*13+2
if(pos=="l"){
x=40
y=285
}
else{
x=520-w
y=315
}
l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:32;overflow:hidden'>"
l+="<v:curve to=800,1 strokecolor=black strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=800,1 strokecolor=white fillcolor=white strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
l+="<div id=bxCaption_"+pos+"_cover width="+w+" style=position:absolute;left:"+x+";top:"+y+";width:0;height:32;overflow:hidden>"
l+="<v:curve to=800,1 strokecolor=white strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="<v:curve to=800,1 strokecolor=blue fillcolor=blue strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
l+="</div>"
odel("bxCaption_"+pos)
odel("bxCaption_"+pos+"_cover")
insHtm("bxEmvScreen",l)
o=oo("bxCaption_"+pos+"_cover")
o.time=style.get("time")
o.path=new Array()
len1=1
a=style.split(";")
for(i=0;i<a.length;i++){
if(!/(\d+):(\d+)/.test(a))
continue
if(/(\d+)-(\d+):(\d+)/.test(a)){
ad=/(\d+)-(\d+):(\d+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[2]*1)
ad[2]=ad[3]
}
else{
ad=/(\d+):(.+)/.exec(a)
ad[0]=lrc.wordPer(word,ad[1]-1)
ad[1]=lrc.wordPer(word,ad[1]*1)
}
len1+=(ad[1]-ad[0])*(ad[2]-1)
o.path.add(ad)
}
o.zoom=1/len1
}
}
function browser_ini(){
window.isIE=navigator.userAgent.indexOf("IE")>0
window.isIE5=navigator.userAgent.indexOf("IE 5.0")>0
String.prototype.trim=function(){return this.replace(/(^[\s]*)|([\s]*$)/g,"")}
String.prototype.inc=function(s1,s2){if(s2==null){s2=","};return (s2+this+s2).indexOf(s2+s1+s2)>-1?true:false}
String.prototype._slice="".slice
String.prototype.slice=function(n1,n2){var v,b1=typeof(n1)=="number",b2=typeof(n2)=="number";if(!b1||typeof(n2)=="string"){v=eval("this._slice("+(b1?n1:this.indexOf(n1)+(n2==null?1:0)+(this.indexOf(n1)==-1?this.length:0))+(n2==null?"":(b2?n2:(this.indexOf(n2)==-1?"":","+this.indexOf(n2))))+")")}else{v=isIE5&&n1<0&&n2==null?this._slice(this.length-1):eval("this._slice(n1"+(n2==null?"":","+n2)+")")}return v}
String.prototype.get=function(str,def){if(this.inc(str,";"))return 1;var a=this.match(new RegExp("(^|;)"+str+":[^;]*"));return a==null||str==""?(def==null?"":def):a[0].replace(";","").slice(str.length+1)}
Array.prototype.add=function(key){this[this.length]=key}
window.oo=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.insHtm=function(op,html,inEnd){op=oo(op);if(isIE){op.insertAdjacentHTML(inEnd==null?"beforeend":"afterbegin",html)}else{var r=op.ownerDocument.createRange();r.setStartBefore(op);eval("op."+(inEnd==null?"appendChild":"insertBefore")+"(r.createContextualFragment(html),op.firstChild)");}}
window.odel=function(obj){if(oo(obj)!=null){oo(obj).parentNode.removeChild(oo(obj))}}
if(!isIE){
HTMLElement.prototype.contains=function(node){if(!node)return false;do if(node==this){return true}while(node=node.parentNode){return false}}
Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
Event.prototype.__defineGetter__("toElement",function(){return this.relatedTarget})
}
}
function timer_ini(){
window.timer={}
timer.handle=null
timer.queue=""
timer.i=0
timer.add=function(key){if(!timer.queue.inc(key,";")){timer.queue+=key+";"}}
timer.del=function(key){timer.queue=move.queue.replace(key+";","")}
timer.inv=function(){
window.clearTimeout(timer.handle)
eval(timer.queue)
timer.i++
timer.handle=window.setTimeout("timer.inv()",10)
}
timer.inv()
}
function sortFoo(v1,v2){
var s1=v1.split("|")[sortIndex],s2=v2.split("|")[sortIndex]
if(!isNaN(s1)&&!isNaN(s2)){
s1*=1
s2*=1
}
return (s1==s2?0:(s1>s2?1:-1))*sortDir
}
</script>
|
|
发表于 2007-12-20 19:40
| 
