歌词同步音画制作

大秦快乐之人 2011-02-09

展开全文

歌词同步音画制作

在琳琅满目，五彩缤纷的音画界里，歌词同步一枝独秀。它继承了MTV歌词的显示形式，给人以充分理解歌词内容和同步跟唱的方便。
做歌词同步音画并不难，其实就是利用代码检测歌曲播放时间实现的。
以【雨中飘荡的回忆】为例http://redbird.a./read-htm-tid-1024.html下面是歌词同步音画代码：[post]

<HTML xmlns:v>

<head>
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:20px;v-text-align:left}
</style>
<script language="JavaScript">
function click(){if(event.button==2){color('老九音画,欢迎欣赏!!')}}document.onmousedown=click
</script></head>//作者签名

<body bgcolor="#000000" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="1000"id="table1" height="600">//网页的大小，一般是根据你的图片大小只改高度。
<tr>
<td align="center" width="1000" background="http://am./uu_1006_6/redbird_100_2_24f55a533fcbdee.jpg">//底图背景

</tr>
</table>
</EMBED>
<EMBED style="LEFT: 102; WIDTH: 878px; POSITION: absolute; TOP:36; HEIGHT: 530px" align=right
src=http://al./uu_1003_2/redbird_100_2_bd8bbec82516570.swf type=application/octet-stream wmode="transparent" quality="high" ;;></EMBED>//透明flash地址，大小。

</EMBED>

<p align="center">
<xmp id=xLyric style=display:none>

[00:06.69]雨中飘荡的回忆
[00:10.89]词曲：刀郎
[00:20.35]今夜又下着小雨
[00:28.05]小雨它一点一点滴滴
[00:34.18]一点点一滴滴它飘来飘去
[00:40.28]想去年那场相遇
[00:47.39]那天也下着小雨
[00:53.81]雨中的你是那样美丽
[01:00.35]我问你是否喜欢和我一起
[01:06.19]你笑着无语
[01:12.91]那一天这世界是多么美丽
[01:18.98]尽管天上的小雨一点一滴滴
[01:25.87]空气中飘荡着你那芬芳的气息
[01:32.25]任小雨落在我的头顶
[01:39.03]今夜里我又站在雨里
[01:45.42]任感情在小雨里飘来飘去
[01:51.69]我问我自己是否还在爱着你
[01:58.41]就这样轻易的放弃
[02:05.85]今夜又下着小雨
[02:15.10]仿佛又看到你的背影
[02:21.73]我想要告诉自己不在爱你
[02:27.56]但奈何这滴滴小雨
[02:40.88]【老九音画】
[03:03.36]今夜里我又站在雨里
[03:11.19]任感情在小雨里飘来飘去
[03:17.71]我问我自己是否还在爱着你
[03:24.27]就这样轻易的放弃
[03:32.15]今夜又下着小雨
[03:37.34]仿佛又看到你的背影
[03:44.45]我想要告诉自己不在爱你
[03:49.80]但奈何这滴滴小雨
[04:00.52]但奈何这滴滴小雨
[04:24.52] //有时间信息的LRC歌词，可以在网上搜到，也可以自己编辑，怎样编辑，以后再讲。

</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://d./Upload_Article/200907/2009073009023300.mp3")
}//音乐地址百度搜索
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:300;top:200;width:600;height:386>"
l+="<div style=position:absolute;left:0;top:0;width:600;height:386;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:20;top:10;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=250
}
else{
x=450-w
y=280歌词坐标
}
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>
所有带颜色的地方属于需要改动的地方，最重要的3个地方是“背景”“歌词”“音乐”，这是你作品的精髓，必须更换。其他的只作修改，

看了以上介绍，是不是很简单啊！试试吧！
下载底下的附件，修改成你的音画。