使用代码制作歌词同步音画《烟花三月下扬州特效音画》|老小孩讲述

【原创】使用代码制作歌词同步音画《烟花三月下扬州特效音画》

导语：

修改

字体调整：大 | 中 | 小

发表于2015年02月01号 21点阅读 2788 评论0 点赞0 ©著作权归作者所有

源码代码

复制边框代码

txt文件代码

复制边框代码

<DIV align=center>
<DIV style="POSITION: relative; WIDTH: 830px; TOP: 0px; LEFT: 0px" class=divBorderStyleRelative>
<TABLE class=ke-zeroborder border=0 cellSpacing=25 width=750 background=http://img1.oldkids.cn/upload/260805000/u260804222/2013/11/14/blog_20131114234118613762.gif bgColor=#505645>
<TBODY>
<TR>
<TD width="100%">
<TABLE class=ke-zeroborder border=0 cellSpacing=7 width="100%" background=http://img3.oldkids.cn/upload/260805000/u260804222/2013/10/17/blog_20131017222258043692.gif>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=1 cellSpacing=5 width="100%" background=http://img3.oldkids.cn/upload/260805000/u260804222/2014/04/25/blog_20140425191502587453.gif>
<TBODY>
<TR>
<TD width="100%">
<TABLE border=2 cellSpacing=20 borderColorLight=#060804 borderColorDark=#ee0000 width="100%" background=http://img4.oldkids.cn/upload/260805000/u260804222/2014/04/25/blog_20140425191457917522.gif>
<TBODY>
<TR>
<TD>
<TABLE style="TEXT-ALIGN: left; BACKGROUND-COLOR: #000000; WIDTH: 720px; HEIGHT: 20px" cellSpacing=0 cellPadding=0 width="100%" bgColor=#000000>
<TBODY>
<TR>
<TD>
<DIV align=center><EMBED src="http://www.soflash.net/flash/9b8/37f503deb4163cddd2aac00cee8b9276.swf" width=900 height=600 type=application!/x-shockwave-flash wmode="transparent" >
<P style="MARGIN-TOP: -350px; MARGIN-LEFT: 0px" align=center><IMG style="FILTER: alpha(style=2,opacity=100, finishopacity=0); WIDTH: 886px; CURSOR: hand; HEIGHT: 540px" width=450

height=250 src="http://img2.oldkids.cn/upload/260805000/u260804222/2014/12/09/blog_20141209193837402640.gif" ></P>

</DIV>

</bod>
<HTML xmlns:v>
<style>
v\:*{behavior:url(#default#VML)
}
v\:textpath {
FONT-SIZE: 20px; FONT-FAMILY: 宋体; v-text-align: left
}
</STYLE>
<body>
<XMP id=xLyric style="DISPLAY: none">
[00:00.00]烟花三月
[00:06.00]龚玥
[00:12.29]素材网络/编辑可人
[00:14.24][01:57.30]牵住你的手相别在黄鹤楼
[00:20.95][02:04.11]波涛万里长江水送你下扬州
[00:27.76][02:10.82]真情伴你走春色为你留
[00:34.52][02:17.53]二十四桥明月夜牵挂在扬州
[00:44.61][02:27.77]扬州城有没有我这样的好朋友
[00:51.37][02:34.47]扬州城有没有人为你分担忧和愁
[00:58.13][02:41.23]扬州城有没有我这样的知心人
[01:04.89][02:47.99]扬州城有没有人和你风雨同舟
[01:15.03][02:58.19][03:26.93]烟花三月是折不断的柳
[01:21.84][03:04.89][03:33.58]梦里江南是喝不完的酒
[01:28.59][03:11.60][03:40.29]等到那孤帆远影碧空尽
[01:34.14][03:17.45][03:46.11]才知道思念总比那西湖瘦
[01:43.14][03:55.11]
谢谢你的欣赏！

</XMP>
</body>
<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://music.baidutt.com/up/kwcuwpcu/kwwkma.mp3")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:-20;top:820;width:750;height:460>"
l+="<div style=position:absolute;left:80;top:30;width:800;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:80;top:-260;width:800;height:460;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=0 height=0 style=display:xnone;position:absolute;left:400;top:500><param name=PlayCount value=0><param name=ShowStatusBar value=-1><param name=Volume value=0>></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
var mPos
var n1,o,len,w,per,n0,n1
if(mplayer==null)
   return
mPos=mplayer.CurrentPosition
n=-1
for(i=0;i<lrc.arr.length;i++){
   if(mPos<lrc.arr[i].slice(0,"|")*1)
    break
   n=i
}
if(n==-1)
   return
if(lrc.i!=n){
   if(n==0)
    lrc.write(lrc.arr[n].slice("|"),"l")
   if(n!=lrc.i+1)
    lrc.write(lrc.arr[n].slice("|"),n%2==0?"l":"r")
   if(n<lrc.arr.length-1)
    lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
   lrc.i=n
}
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[i].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[i]
   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=260
   y=285
}
else{
   x=520-w
   y=310
}
l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:36;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:36;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[i]))
    continue
   if(/(\d+)-(\d+):(\d+)/.test(a[i])){
    ad=/(\d+)-(\d+):(\d+)/.exec(a[i])
    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[i])
    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>

<SCRIPT language=JavaScript>
ffbb=0;
lrcobj=new lrcClass(lrcdata.innerHTML.slice(4,-3));
function lrcClass(tt)
{
this.inr=[];
this.oTime=0;
this.dte=-1;

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;
    }
}

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.run=function(tme)
{
    {
      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.dte=(ii<this.inr.length-1)?this.inr[ii+1].t
[0]:aboutplayer.currentMedia.duration;
      this.print(this.retxt(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[i].n;
}

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

function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition+ffbb);
}
setTimeout("lrcrun()",10);
}
lrcrun();
</SCRIPT>
<SCRIPT langauge="javasript">document.oncontextmenu=new Function('event.returnValue=false;');document.onselectstart=new Function('event.returnValue=false;');</SCRIPT>
</DIV>
<DIV id=layer1 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 900px; POSITION: absolute; TOP: 0px; HEIGHT: 585px">
<EMBED src=http://swf.a-365.com/user/yhpx/swf/跟随光标的文字3.swf?color=eaca1b&txt=可人欢迎您 width=1000 height=585 type=application/octet-stream quality="high" wmode="transparent"></EMBED>
<EMBED style="LEFT: 40px; WIDTH: 980px; POSITION: absolute; TOP: 30px; HEIGHT: 300px" align=right src=http://www3.6000y.com/toumingflash/swf500/woso7_flash_10.swf
type=application/octet-stream quality="high" wmode="transparent" width="850" height="200">

</DIV>
<FONT style="POSITION: absolute; WIDTH: 700px; TOP:55px; LEFT: 380px" style="FILTER: shadow(color=#ed1941); LINE-HEIGHT: 150%; WIDTH: 100%; FONT-FAMILY: DFYaSongW9-GB; COLOR: white; FONT-SIZE: 30pt"><B>《烟花三月下扬州特效音画》

(注：您的设备不支持flash)

声明：以上内容仅用户个人行为，不代表本站（老小孩社区）观点，如有侵权或其他行为用户自己承担相关责任与本站无关。【举报文章】

点赞0 收藏 2

微信扫二维码分享

等0人点赞

本文作者

盛京

加好友

评论字体大小调节：大 | 中 | 小

精选留言

您需要登录后才能回复

登录立即注册

暂时没有留言

请选择你想添加的收藏夹

未定义0条内容

新建收藏夹