打印

HTML 第四课：如何制作歌词同步音画

画儿

莲海元老

Rank: 8 Rank: 8

Medal No.1 Medal No.2 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10

发短消息
加为好友
当前离线

1^# 大中小发表于 2009-8-9 09:29 只看该作者

HTML 第四课：如何制作歌词同步音画

HTML第四课：如何制作歌词同步音画

画儿编写

　　画儿向来喜欢歌词同步音画，今天我们来共同学习这个内容。见效果：

荷花颂

点击图片可在新窗口打开

　　一、《荷花颂》音画贴代码解析：

　　1、主题图片部分（蓝色部分代码），这里选用了一张1000*650的图片，在图片参数width和height上要对应填写（width（宽）="1000" height（高）="650"）。

<html>
<head>
<TITLE>荷花颂</TITLE>
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<style>
v\:*{behavior.:url(#default#VML)}
v\:textpath{font-family:宋体;font-size:16px;v-text-align:left}
</style>
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
  <TD>
   <IMG SRC="http://blog.heshang.net/attachments/2009/07/29/4812_200907292312131.jpg（图片地址）" WIDTH=1000 HEIGHT=650 ALT=""></TD>
</TR>

</TABLE>

　　2、歌词同步时间标签和音乐地址（红色部分代码），歌词同步时间标签用中括号表示，
　　例：[02:11.10]
　　02表示分钟，11表示秒，10表示时间微调，意义不大。歌词同步时间表示当前歌词在音乐中开始的时间。
　　另外，前面部分参数：代码ti表示标题，ar表示歌手，al表示专辑。by表示作者等等。

　　LRC文件可以到专门的LRC搜索网站查找，如：www.51lrc.com也可以百度查找，或使用千千静听播放某首歌曲的时候千千静听自动到他服务器上搜索。

　　歌词同步时间标签也可以自己用千千静听播放，然后在歌词上记录时间，再填写到时间标签上，自己做比较好，时间可以做到比较标准。由于歌曲版本不同或歌唱者不同，同步时间有差异，自己做就更有必要。

<xmp id=xLyric style=display:none>

[ti:荷花颂]
[ar:童丽]
[al:对话Ⅱ 古筝与童丽的故事]
[offset:0]
[by:☆画儿☆音画☆☆]
[by:noni99]
[offset:500]
[00:00.00]专辑：对话Ⅱ 古筝与童丽的故事
[00:03.00]童丽 - 荷花颂
[00:06.00]作词：作曲：甘肃民歌
[00:09.00]☆画儿☆音画☆☆
[00:12.00]--------
[02:04.89][00:17.14]万里无云好晴天
[02:08.54][00:20.69]啊……
[02:12.42][00:24.53]看那荷花在水面
[02:32.42][02:16.87][00:45.20][00:29.49]啊…
[02:35.33][02:20.08][00:47.58][00:32.27]千万朵花儿数着它好
[02:43.21][02:27.87][00:55.43][00:40.06]人人见了心喜欢
[02:48.34][01:01.00]--
[02:51.42][01:03.56]荷花朵朵放光彩
[02:54.74][01:06.91]啊……
[02:58.57][01:10.82]薄雾青纱头上戴
[03:18.70][03:03.36][01:31.41][01:15.67]那啊…
[03:21.66][03:06.35][01:33.83][01:18.44]微风轻轻迎面吹来
[03:29.50][03:14.06][01:41.68][01:26.21]荷花点头笑颜开
[03:35.59][01:47.61]----
蓝天高绿水长
荷花朝太阳
风吹千里香
青山含笑碧波荡漾
看那荷花正开放

[04:46.30]
[04:48.30]
</xmp>

3、以下为显示歌词脚本的代码：

　　歌词显示位置（莲色部分代码），作为模板使用，只要修改紫色部分代码中的2个参数就能够调整歌词显示位置，如本例的划横线部分，分别表示距左边框和顶端的距离，边调试边看效果，直到歌词显示位置满意。
l="<div id=bxEmv style=position:absolute;left:20;top:139;width:600;height:560>"
l+="<div style=position:absolute;left:0;top:0;width:600;height:560;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:19;top:26;width:480;height:360;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=0 height=0 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:23;overflow:hidden'>"
l+="<v:curve to=700,1 strokecolor=black strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath n=t string='"+word+"' /></v:curve>"
l+="<v:curve to=700,1 strokecolor=white fillcolor=white strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath n=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:23;overflow:hidden>"
l+="<v:curve to=700,1 strokecolor=white strokeweight=3 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath n=t string='"+word+"' /></v:curve>"
l+="<v:curve to=700,1 strokecolor=blue fillcolor=blue strokeweight=1 style=position:absolute;top:14>"
l+="<v:path textpathok=t /><v:textpath n=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>

4、flash语言：红色部分

5、结尾

<META. content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>

<TD></TD></TR></TBODY></TABLE></DIV>

</BODY></HTML>

　　伟大祖国是炎黄子孙最美丽的家园，五星红旗是我们家园最亮丽的一道风景，让我们共同祈愿：祖国明天更好！

TOP

画儿

莲海元老

Rank: 8 Rank: 8

Medal No.1 Medal No.2 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10

发短消息
加为好友
当前离线

2^# 大中小发表于 2009-8-9 09:30 只看该作者

　　二、如何制作歌词同步音画：

　　下面是歌词同步音画代码，替换其中地址部分就可以了。

<html>
<head>
<TITLE>荷花颂</TITLE>
<META. HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
</head>
<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<style>
v\:*{behavior.:url(#default#VML)}
v\:textpath{font-family:宋体;font-size:16px;v-text-align:left}
</style>
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
  <TD>
   <IMG SRC="http://blog.heshang.net/attachments/2009/07/29/4812_200907291928465.jpg" WIDTH=1000 HEIGHT=600 ALT=""></TD>
</TR>

</TABLE>
<xmp id=xLyric style=display:none>

[ti:荷花颂]
[ar:童丽]
[al:对话Ⅱ 古筝与童丽的故事]
[offset:0]
[by:☆画儿音画☆]
[by:noni99]
[offset:500]
[00:00.00]☆画儿音画☆
[00:03.00]童丽 - 荷花颂
[00:06.00]作词：作曲：甘肃民歌
[00:09.00]专辑：对话Ⅱ 古筝与童丽的故事
[00:12.00]--------
[02:04.89][00:17.14]万里无云好晴天
[02:08.54][00:20.69]啊……
[02:12.42][00:24.53]看那荷花在水面
[02:32.42][02:16.87][00:45.20][00:29.49]啊…
[02:35.33][02:20.08][00:47.58][00:32.27]千万朵花儿数着它好
[02:43.21][02:27.87][00:55.43][00:40.06]人人见了心喜欢
[02:48.34][01:01.00]--
[02:51.42][01:03.56]荷花朵朵放光彩
[02:54.74][01:06.91]啊……
[02:58.57][01:10.82]薄雾青纱头上戴
[03:18.70][03:03.36][01:31.41][01:15.67]那啊…
[03:21.66][03:06.35][01:33.83][01:18.44]微风轻轻迎面吹来
[03:29.50][03:14.06][01:41.68][01:26.21]荷花点头笑颜开
[03:35.59][01:47.61]----
蓝天高绿水长
荷花朝太阳
风吹千里香
青山含笑碧波荡漾
看那荷花正开放

[04:46.30]
[04:48.30]
</xmp>

<EMBED style="LEFT: 50px; POSITION: absolute; TOP:250px" align=right src=http://xuanfei.cctv118.com/2009fla/93.swf

width=600 height=300 type=application/octet-stream ; quality="high" wmode="transparent">

<META. content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>

</BODY></HTML>

　　伟大祖国是炎黄子孙最美丽的家园，五星红旗是我们家园最亮丽的一道风景，让我们共同祈愿：祖国明天更好！

TOP

画儿

莲海元老

Rank: 8 Rank: 8

Medal No.1 Medal No.2 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10

发短消息
加为好友
当前离线

3^# 大中小发表于 2009-8-9 09:30 只看该作者

三、怎么搜歌词（最好自己编辑）
打开下面网站（任选一个）
http://www.51lrc.com/
http://www.jpwy.net/gc/
http://lrc.feiyes.net/
复制LRC歌词，粘贴到代码放歌词的位置。

　　伟大祖国是炎黄子孙最美丽的家园，五星红旗是我们家园最亮丽的一道风景，让我们共同祈愿：祖国明天更好！

TOP

画儿

莲海元老

Rank: 8 Rank: 8

Medal No.1 Medal No.2 Medal No.3 Medal No.4 Medal No.5 Medal No.6 Medal No.7 Medal No.8 Medal No.9 Medal No.10

发短消息
加为好友
当前离线

4^# 大中小发表于 2009-8-9 09:31 只看该作者

　　四、如何发布网页贴

　　1、用记事本做音画代码。方法是：点开电脑　开始－程序－附件－记事本

　　2、将编好的代码另存为后缀为.TXT或者html。

　　3、将后缀为.TXT火html的文件上传到空间。

　　4、将上传成功后获得的网址复制，粘贴到下面这组代码中：
<DIV style="LEFT: -120px; WIDTH: 1000px; POSITION: relative; TOP: 150px"><IFRAME. marginWidth=0 marginHeight=0 src="网页地址" frameBorder=0 width=1000 scrolling=no height=600></IFRAME></DIV>

　　5、发贴。

　　伟大祖国是炎黄子孙最美丽的家园，五星红旗是我们家园最亮丽的一道风景，让我们共同祈愿：祖国明天更好！

TOP