首页
欢迎页
Latest images
搜索
注册
登录如何制作歌词同步音画
如何制作歌词同步音画
Admin 周日 一月 08, 2012 7:22 pm
如何制作歌词同步音画
（一）编辑歌词
千千静听的歌词文件有其特定的格式，每句歌词前面都必须有类似[00:16.00]这样的时间标签，否则歌词无法正常显示。歌词可以用各种文本编辑工具进行编辑，最后保存成lrc或txt扩展名即可。不过，用其他文本编辑工具编辑歌词时需要自己手动输入时间标签，比较麻烦，您可以选择千千歌词秀编辑，轻点鼠标即可插入时间标签，轻松完成歌词编辑。
编辑方法如下：
1、在播放列表中选中您想要编辑歌词的曲目
2、在千千歌词秀显示窗口单击鼠标右键，在菜单中选择“编辑歌词”，进入歌词编辑模式。
3、点击编辑模式下歌词秀窗口中的播放键；在听到歌声的瞬间，点击暂停。
4、点击鼠标右键，在弹出菜单中选择插入时间标签，再次点击播放键。
5、在本句歌词演唱结束时点击“暂停”，在刚插入的时间标签后输入歌词内容，并将光标下移一行。
6、点击“播放”，在听到第二句歌词演唱开始的瞬间，点击“暂停”。重复4-6的步骤，直到歌词完全输入。
7、在歌词头部输入歌词[ti:]、[ar:]、[al:]、[by:]等信息增加歌词的完整性，这一步也可以在步骤3之前做，也可以不写。
8、编辑完毕，右键菜单选择“返回显示”，重新播放歌曲检查歌词编辑是否有误。
9、若检查后没有发现错误或者遗漏，则可以保存并进入时间校正；否则请返回编辑模式修改。
提示：
·不用过分在意点击“暂停”的时间是否精确，输入完毕后可以进行时间校正。
·遇到需要重复输入的歌词，点击“暂停”后，将光标移至已输入的歌词处插入时间标签即可，无需重新输入。您可以在右键菜单中选择“排列方式－〉全部展开”，即可按时间标签顺序浏览歌词。
示例：
[ti:蓝莲花]
[ar:许巍]
[al:专辑-时光.漫步]
[by:]
[00:01.00]没有什么能够阻挡
[00:05.05]你对自由地向往
[00:11.10]天马行空的生涯
[00:16.51]你的心了无牵挂
[00:22.10]穿过幽暗地岁月
[00:27.00]也曾感到彷徨
[00:32.40]当你低头地瞬间
[00:38.00]才发觉脚下的路
[00:43.10]心中那自由地世界
[00:49.20]如此的清澈高远
[00:54.00]盛开着永不凋零
[00:58.00]蓝莲花。。。
[01:05.50]。。。。。。。。。
[01:50.01]穿过幽暗地岁月
[01:55.20]也曾感到彷徨
[02:01.00]当你低头地瞬间
[02:06.10]才发觉脚下的路
[02:11.00]穿过幽暗地岁月
[02:16.50]也曾感到彷徨
[02:22.00]当你低头地瞬间
[02:27.10]才发觉脚下的路
[02:32.55]心中那自由地世界
[02:37.50]如此的清澈高远
[02:43.10]盛开着永不凋零
[02:47.40]蓝莲花。。。
[02:55.40]。。。。。。。。。
[03:16.00]啦。。。。。。
[03:37.50]啦。。。。。。
[03:59.00]啦。。。。。。
[04:18.10]帖送秋雨梧桐的朋友们
[04:23.10]祝朋友们国庆节快乐！
[04:30.10]
[04:30.40]
以上面帖子“蓝莲花”为例，介绍歌词同步音画帖子代码模板及帖子的制作过程，歌词同步音画帖子有几种形式，上面的是其中的一种，可以设置主题图片和使用FLASH来装饰帖子，可以实现多种特效，下面先看帖子的代码。
上面帖子的代码如下：
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:21px;v-text-align:left}
</style>
<body bgcolor="#000000" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="847" height="576">
<tr>
<td align="center" width="847"
background="http://gznjzz.blog.enorth.com.cn/attachment/pic/451779.jpg">
<EMBED style="LEFT: 10; WIDTH: 820px; POSITION: absolute; TOP: 45; HEIGHT: 300px" align=right src=http://www.zxtx.org/user/yiyi/html/flash/110.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT: 500; WIDTH: 320px; POSITION: absolute; TOP: 245; HEIGHT: 100px" align=right src=http://jeep.blog.enorth.com.cn/attachment/flash/348426.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<p style="LEFT: 640; WIDTH: 200px; POSITION: absolute; TOP: 525; HEIGHT: 100px"> <font style=font:18pt face=楷体_gb2312 color=ffd700><b>&&&论坛</b></font></p>
</td></tr></table>
<p align="center">
<xmp id=xLyric style=display:none>
[ti:蓝莲花]
[ar:许巍]
[al:专辑-时光.漫步]
[by:]
[00:01.00]没有什么能够阻挡
[00:05.05]你对自由地向往
[00:11.10]天马行空的生涯
[00:16.51]你的心了无牵挂
[00:22.10]穿过幽暗地岁月
[00:27.00]也曾感到彷徨
[00:32.40]当你低头地瞬间
[00:38.00]才发觉脚下的路
[00:43.10]心中那自由地世界
[00:49.20]如此的清澈高远
[00:54.00]盛开着永不凋零
[00:58.00]蓝莲花。。。
[01:05.50]。。。。。。。。。
[01:50.01]穿过幽暗地岁月
[01:55.20]也曾感到彷徨
[02:01.00]当你低头地瞬间
[02:06.10]才发觉脚下的路
[02:11.00]穿过幽暗地岁月
[02:16.50]也曾感到彷徨
[02:22.00]当你低头地瞬间
[02:27.10]才发觉脚下的路
[02:32.55]心中那自由地世界
[02:37.50]如此的清澈高远
[02:43.10]盛开着永不凋零
[02:47.40]蓝莲花。。。
[02:55.40]。。。。。。。。。
[03:16.00]啦。。。。。。
[03:37.50]啦。。。。。。
[03:59.00]啦。。。。。。
[04:18.10]帖送秋雨梧桐的朋友们
[04:23.10]祝朋友们国庆节快乐！
[04:30.10]
[04:30.40]
</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://music4.tool.hexun.com/Save/Music/2008/0405/5415/M_2C60B293F24CE49B.MP3")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:80;top:170;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:20;top:30;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=400-w
y=325
}
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></p>
代码说明：
上面的帖子代码分为五个部分，一是帖子的主题图片部分（蓝色部分代码），二是装饰用FLASH部分（绿色部分代码），三是作者落款部分（黄色部分代码），四是歌词同步时间标签和音乐地址（红色部分代码），五是调整歌词显示位置有关（紫色部分代码）。
现在就上述五个部分的代码分别进行说明：
1、主题图片部分（蓝色部分代码），这里选用了一张847*576的图片，在图片参数width和height上要对应填写（width="847" height="576"），这个就无需多讲了。
2、装饰用FLASH部分（绿色部分代码），这里选用了2个FLASH，其中：
style="LEFT: 10; WIDTH: 820px; POSITION: absolute; TOP: 45; HEIGHT: 300px" 参数LEFT: 10; WIDTH: 820px;分别是FLASH距离左边框和FLASH的宽度数据；参数TOP: 45; HEIGHT: 300px分别是FLASH距离内容框顶边和FLASH的高度数据。另外一个FLASH的参数类推，可以看出，FLASH采用了定位。
装饰帖子部分要因地制宜，可有可无，以增加帖子美观为目的。
3、作者落款部分（黄色部分代码），
参数LEFT: 640; WIDTH: 200px; POSITION: absolute; TOP: 525; HEIGHT: 100px"
分别表示LEFT: 640; 距离左边框、WIDTH: 200px;文字宽度、TOP: 525; 文字距顶边距离、 HEIGHT: 100px文字占用高度。
4、歌词同步时间标签和音乐地址（红色部分代码），歌词同步时间标签用中括号表示，
例：[02:11.10]穿过幽暗地岁月
02表示分钟，11表示秒，10表示时间微调，意义不大。歌词同步时间表示当前歌词“穿过幽暗地岁月”在音乐中开始的时间，是在2分钟11秒开始。
歌词同步时间标签一般是在后缀名为lrc的文件中，如上面的就是“蓝莲花.lrc”。
另外，前面部分参数：代码ti表示标题，ar表示歌手，al表示专辑。by表示作者等等。
LRC文件可以到专门的LRC搜索网站查找，如：www.51lrc.com 也可以百度查找，或使用千千静听播放某首歌曲的时候千千静听自动到他服务器上搜索。
歌词同步时间标签也可以自己用千千静听播放，然后在歌词上记录时间，再填写到时间标签上，我一般是自己做，时间可以做到比较标准。由于歌曲版本不同或歌唱者不同，同步时间有差异，自己做就更有必要。呵呵。
5、歌词显示位置有关（紫色部分代码），作为模板使用，只要修改紫色部分代码中的2个参数就能够调整歌词显示位置，如本例的 left:80;top:170; 分别表示距左边框和顶端的距离，边调试边看效果，直到歌词显示位置满意。影响位置的参数还有几个，为了不让问题复杂化，初学者只需要调整这2种个就行。
此外，在"<v:curve to=800,1 strokecolor=blue fillcolor=blue strokeweight=1 语句中，strokecolor=blue fillcolor=blue中的blue表示歌词的颜色是蓝色，如果换成red就是红色的了，这部分的代码用关键字“fillcolor=blue”搜索就知道在什么地方。哈哈。
显示歌词同步的脚本代码
<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.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>
上面是显示同步歌词的代码，不必研究，整体复制粘贴就是
（一）编辑歌词
千千静听的歌词文件有其特定的格式，每句歌词前面都必须有类似[00:16.00]这样的时间标签，否则歌词无法正常显示。歌词可以用各种文本编辑工具进行编辑，最后保存成lrc或txt扩展名即可。不过，用其他文本编辑工具编辑歌词时需要自己手动输入时间标签，比较麻烦，您可以选择千千歌词秀编辑，轻点鼠标即可插入时间标签，轻松完成歌词编辑。
编辑方法如下：
1、在播放列表中选中您想要编辑歌词的曲目
2、在千千歌词秀显示窗口单击鼠标右键，在菜单中选择“编辑歌词”，进入歌词编辑模式。
3、点击编辑模式下歌词秀窗口中的播放键；在听到歌声的瞬间，点击暂停。
4、点击鼠标右键，在弹出菜单中选择插入时间标签，再次点击播放键。
5、在本句歌词演唱结束时点击“暂停”，在刚插入的时间标签后输入歌词内容，并将光标下移一行。
6、点击“播放”，在听到第二句歌词演唱开始的瞬间，点击“暂停”。重复4-6的步骤，直到歌词完全输入。
7、在歌词头部输入歌词[ti:]、[ar:]、[al:]、[by:]等信息增加歌词的完整性，这一步也可以在步骤3之前做，也可以不写。
8、编辑完毕，右键菜单选择“返回显示”，重新播放歌曲检查歌词编辑是否有误。
9、若检查后没有发现错误或者遗漏，则可以保存并进入时间校正；否则请返回编辑模式修改。
提示：
·不用过分在意点击“暂停”的时间是否精确，输入完毕后可以进行时间校正。
·遇到需要重复输入的歌词，点击“暂停”后，将光标移至已输入的歌词处插入时间标签即可，无需重新输入。您可以在右键菜单中选择“排列方式－〉全部展开”，即可按时间标签顺序浏览歌词。
示例：
[ti:蓝莲花]
[ar:许巍]
[al:专辑-时光.漫步]
[by:]
[00:01.00]没有什么能够阻挡
[00:05.05]你对自由地向往
[00:11.10]天马行空的生涯
[00:16.51]你的心了无牵挂
[00:22.10]穿过幽暗地岁月
[00:27.00]也曾感到彷徨
[00:32.40]当你低头地瞬间
[00:38.00]才发觉脚下的路
[00:43.10]心中那自由地世界
[00:49.20]如此的清澈高远
[00:54.00]盛开着永不凋零
[00:58.00]蓝莲花。。。
[01:05.50]。。。。。。。。。
[01:50.01]穿过幽暗地岁月
[01:55.20]也曾感到彷徨
[02:01.00]当你低头地瞬间
[02:06.10]才发觉脚下的路
[02:11.00]穿过幽暗地岁月
[02:16.50]也曾感到彷徨
[02:22.00]当你低头地瞬间
[02:27.10]才发觉脚下的路
[02:32.55]心中那自由地世界
[02:37.50]如此的清澈高远
[02:43.10]盛开着永不凋零
[02:47.40]蓝莲花。。。
[02:55.40]。。。。。。。。。
[03:16.00]啦。。。。。。
[03:37.50]啦。。。。。。
[03:59.00]啦。。。。。。
[04:18.10]帖送秋雨梧桐的朋友们
[04:23.10]祝朋友们国庆节快乐！
[04:30.10]
[04:30.40]
以上面帖子“蓝莲花”为例，介绍歌词同步音画帖子代码模板及帖子的制作过程，歌词同步音画帖子有几种形式，上面的是其中的一种，可以设置主题图片和使用FLASH来装饰帖子，可以实现多种特效，下面先看帖子的代码。
上面帖子的代码如下：
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:21px;v-text-align:left}
</style>
<body bgcolor="#000000" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0">
<table border="0" width="847" height="576">
<tr>
<td align="center" width="847"
background="http://gznjzz.blog.enorth.com.cn/attachment/pic/451779.jpg">
<EMBED style="LEFT: 10; WIDTH: 820px; POSITION: absolute; TOP: 45; HEIGHT: 300px" align=right src=http://www.zxtx.org/user/yiyi/html/flash/110.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> <EMBED style="LEFT: 500; WIDTH: 320px; POSITION: absolute; TOP: 245; HEIGHT: 100px" align=right src=http://jeep.blog.enorth.com.cn/attachment/flash/348426.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>
<p style="LEFT: 640; WIDTH: 200px; POSITION: absolute; TOP: 525; HEIGHT: 100px"> <font style=font:18pt face=楷体_gb2312 color=ffd700><b>&&&论坛</b></font></p>
</td></tr></table>
<p align="center">
<xmp id=xLyric style=display:none>
[ti:蓝莲花]
[ar:许巍]
[al:专辑-时光.漫步]
[by:]
[00:01.00]没有什么能够阻挡
[00:05.05]你对自由地向往
[00:11.10]天马行空的生涯
[00:16.51]你的心了无牵挂
[00:22.10]穿过幽暗地岁月
[00:27.00]也曾感到彷徨
[00:32.40]当你低头地瞬间
[00:38.00]才发觉脚下的路
[00:43.10]心中那自由地世界
[00:49.20]如此的清澈高远
[00:54.00]盛开着永不凋零
[00:58.00]蓝莲花。。。
[01:05.50]。。。。。。。。。
[01:50.01]穿过幽暗地岁月
[01:55.20]也曾感到彷徨
[02:01.00]当你低头地瞬间
[02:06.10]才发觉脚下的路
[02:11.00]穿过幽暗地岁月
[02:16.50]也曾感到彷徨
[02:22.00]当你低头地瞬间
[02:27.10]才发觉脚下的路
[02:32.55]心中那自由地世界
[02:37.50]如此的清澈高远
[02:43.10]盛开着永不凋零
[02:47.40]蓝莲花。。。
[02:55.40]。。。。。。。。。
[03:16.00]啦。。。。。。
[03:37.50]啦。。。。。。
[03:59.00]啦。。。。。。
[04:18.10]帖送秋雨梧桐的朋友们
[04:23.10]祝朋友们国庆节快乐！
[04:30.10]
[04:30.40]
</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://music4.tool.hexun.com/Save/Music/2008/0405/5415/M_2C60B293F24CE49B.MP3")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:80;top:170;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:20;top:30;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=400-w
y=325
}
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></p>
代码说明：
上面的帖子代码分为五个部分，一是帖子的主题图片部分（蓝色部分代码），二是装饰用FLASH部分（绿色部分代码），三是作者落款部分（黄色部分代码），四是歌词同步时间标签和音乐地址（红色部分代码），五是调整歌词显示位置有关（紫色部分代码）。
现在就上述五个部分的代码分别进行说明：
1、主题图片部分（蓝色部分代码），这里选用了一张847*576的图片，在图片参数width和height上要对应填写（width="847" height="576"），这个就无需多讲了。
2、装饰用FLASH部分（绿色部分代码），这里选用了2个FLASH，其中：
style="LEFT: 10; WIDTH: 820px; POSITION: absolute; TOP: 45; HEIGHT: 300px" 参数LEFT: 10; WIDTH: 820px;分别是FLASH距离左边框和FLASH的宽度数据；参数TOP: 45; HEIGHT: 300px分别是FLASH距离内容框顶边和FLASH的高度数据。另外一个FLASH的参数类推，可以看出，FLASH采用了定位。
装饰帖子部分要因地制宜，可有可无，以增加帖子美观为目的。
3、作者落款部分（黄色部分代码），
参数LEFT: 640; WIDTH: 200px; POSITION: absolute; TOP: 525; HEIGHT: 100px"
分别表示LEFT: 640; 距离左边框、WIDTH: 200px;文字宽度、TOP: 525; 文字距顶边距离、 HEIGHT: 100px文字占用高度。
4、歌词同步时间标签和音乐地址（红色部分代码），歌词同步时间标签用中括号表示，
例：[02:11.10]穿过幽暗地岁月
02表示分钟，11表示秒，10表示时间微调，意义不大。歌词同步时间表示当前歌词“穿过幽暗地岁月”在音乐中开始的时间，是在2分钟11秒开始。
歌词同步时间标签一般是在后缀名为lrc的文件中，如上面的就是“蓝莲花.lrc”。
另外，前面部分参数：代码ti表示标题，ar表示歌手，al表示专辑。by表示作者等等。
LRC文件可以到专门的LRC搜索网站查找，如：www.51lrc.com 也可以百度查找，或使用千千静听播放某首歌曲的时候千千静听自动到他服务器上搜索。
歌词同步时间标签也可以自己用千千静听播放，然后在歌词上记录时间，再填写到时间标签上，我一般是自己做，时间可以做到比较标准。由于歌曲版本不同或歌唱者不同，同步时间有差异，自己做就更有必要。呵呵。
5、歌词显示位置有关（紫色部分代码），作为模板使用，只要修改紫色部分代码中的2个参数就能够调整歌词显示位置，如本例的 left:80;top:170; 分别表示距左边框和顶端的距离，边调试边看效果，直到歌词显示位置满意。影响位置的参数还有几个，为了不让问题复杂化，初学者只需要调整这2种个就行。
此外，在"<v:curve to=800,1 strokecolor=blue fillcolor=blue strokeweight=1 语句中，strokecolor=blue fillcolor=blue中的blue表示歌词的颜色是蓝色，如果换成red就是红色的了，这部分的代码用关键字“fillcolor=blue”搜索就知道在什么地方。哈哈。
显示歌词同步的脚本代码
<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.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>
上面是显示同步歌词的代码，不必研究，整体复制粘贴就是
Admin- Admin
- 帖子数 : 147
注册日期 : 12-01-05 -
您在这个论坛的权限：
您不能在这个论坛回复主题