落岸天使论坛

 找回密码
 注册
搜索
论坛,不要冷落了陌生人新人注册后在此报道,奖励20羽毛:)严肃处理违规灌水行为及处罚办法
参与论坛宣传活动,获得积分勋章奖励知羽艺匠及其他模板资源下载珍惜你的ID 珍惜你的名誉
查看: 5020|回复: 26

[其他] 发一个歌词和音乐同步的网页代码简易教程

[复制链接]

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

发表于 2009-3-19 22:13:14 | 显示全部楼层 |阅读模式
第一步:首先申请一个免费的个人主页空间,存放代码文件。
我是在铭瑶网申请的。地址:http://814e.com/

第二步:到百度上搜索你喜欢的歌曲。下载到电脑上,并记录该歌曲的源文件网址。

第三步:使用千千静听,打开你下载的歌曲。在播放器右边的歌词显示地方点击鼠标右键,选择“编辑歌词”,直接保持歌词同步的文件。

第四步:打开记事本,制作代码文件,如下。这是音画贴《流年》的网页代码。不熟悉的朋友肯定看着很头晕。使用的时候,记得把我在【】里标出的说明文字去掉。

<html xmlns:v>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>流年</title>【流年就是帖子的标题,可以修改】
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:13px;v-text-align:left}【这里是歌词的字体和大小,可以修改,建议不要使用生僻的字体,以免到时候出现状况。如果字体设置过小或过大,直接修改px前边的数字即可。】
</style>
</head> <body topmargin="0" leftmargin="0">
<table border="0" width="1000" height="666" background="http://nanarenshinihao.814e.com/流年.jpg">
<tr> 【这是表格的背景图片地址,前边的1000,666是背景图片的大小,可以修改。】
<td width="781" height="108"> <DIV align=center><EMBED align=center src=http://img5.3lian.com/flash/f8/2/3.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"></DIV>【这里是在网页背景上添加透明flash,可以添加N个,我的帖子使用了两个。】
<DIV align=center><EMBED align=center src=http://imgfree.21cn.com/free/flash/35.swf width=400 height=300 type=application/octet-stream wmode="transparent" quality="high"></DIV></td>
</tr>
</table> <xmp id=xLyric style=display:none>
[offset:500]
[ti:流年]
[ar:王菲]
[al:《王菲》]
[by:百岛]
[00:00.00]
[00:02.00]流年
[00:04.00]演唱:王菲
[00:06.00]专辑:《王菲》
[00:08.00]作词:林夕
[00:10.00]作曲:陈晓娟
[00:12.00]
[00:26.03]爱上一个天使的缺点
[00:34.62]用一种魔鬼的语言
[00:41.52]上帝在云端只眨了一眨眼
[00:50.49]最后眉一皱头一点
[00:58.44]
[01:00.00]爱上一个认真的消遣
[01:08.18]用一朵花开的时间
[01:15.52]你在我旁边只打了个照面
[01:24.15]五月的晴天闪了电
[01:32.46]
[01:33.79]有生之年狭路相逢终不能幸免
[01:41.60]手心忽然长出纠缠的曲线
[01:50.39]懂事之前情动以后长不过一天
[01:58.77]留不住算不出流年
[02:06.79]
[02:25.38]遇见一场烟火的表演
[02:33.52]用一场轮回的时间
[02:40.89]紫微星流过来不及说再见
[02:49.56]已经远离我一光年
[02:58.33]
[02:59.22]有生之年狭路相逢终不能幸免
[03:07.01]手心忽然长出纠缠的曲线
[03:15.95]懂事之前情动以后长不过一天
[03:24.06]留不住算不出流年
[03:31.78]
[03:33.20]有生之年狭路相逢终不能幸免
[03:41.11]手心忽然长出纠缠的曲线
[03:49.94]懂事之前情动以后长不过一天
[03:58.28]哪一年让一生改变
[04:08.69]【这里的歌词同步文件,来自于刚才从千千静听里边直接复制的lcr歌词】
</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://eim.jjeto.com/media/music/2008060521550013.mp3") 【这里贴上歌曲的原文件,必须是.mp3后缀】
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:160;top:150;width:800;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>


第五步,制作完成网页文件之后,保持为txt格式的文件。上传到刚才注册的铭瑶网空间。

直接点击打开该文件,即可看到文件效果了。

评分

参与人数 1祝福 +3 羽毛 +8 收起 理由
jufeng102 + 3 + 8 感谢悠悠分享

查看全部评分

www.y1jy.com  优爱教育

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

 楼主| 发表于 2009-3-19 22:14:30 | 显示全部楼层
一个歌词与音乐同步的网页就做好了。

下面讲的是如何在论坛上发网页贴的方法。



第六步:发布网页贴到论坛。

网页贴发布方法...

<BR><BR><BR><BR><BR><BR><P align=center><A href="网页帖地址" target=_blank><FONT face=隶书 color=#fd0b89 size=5>点击进入看全屏</FONT></A></P><BR>

<DIV style="LEFT: -205px; WIDTH: 1000px; POSITION: relative; TOP: 10px"><IFRAME marginWidth=0 marginHeight=0 src="网页帖地址" frameBorder=0 width=1000 scrolling=no height=高度></IFRAME></DIV><BR>


这里其实是两个代码了,第一段落的代码提示的是“点击进入看全屏”的按钮链接而已。可以忽略不记,因为占地方,而且影响帖子的美观。所以,直接使用第二段的代码就可以了。

在网页贴地址那里,贴上空间上的那个txt文件地址,记得要在后边的“高度”那里填上合适的高度,和背景图片的高度一致就可以了。




好了,都全部讲解完了。
www.y1jy.com  优爱教育
回复 支持 反对

使用道具 举报

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

 楼主| 发表于 2009-3-19 22:15:31 | 显示全部楼层
www.y1jy.com  优爱教育
回复 支持 反对

使用道具 举报

1593

主题

3852

回帖

9303

积分

六翼天使

Rank: 8Rank: 8

积分
9303

终身成就奖杰出贡献奖优秀版主奖优秀会员奖突出贡献奖贴图大师奖60周年国庆纪念勋章音乐之星奖五周年纪念勋章

QQ
发表于 2009-3-19 22:17:12 | 显示全部楼层
呵呵,谢谢悠悠讲的这么详细^_^
回复 支持 反对

使用道具 举报

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

 楼主| 发表于 2009-3-19 22:22:56 | 显示全部楼层
O(∩_∩)O~。。偶也是弄了好久,才把它给闹明白了。。。网上到处转帖的教程有好些,但是。都需要自己修改,才能用的。
www.y1jy.com  优爱教育
回复 支持 反对

使用道具 举报

1593

主题

3852

回帖

9303

积分

六翼天使

Rank: 8Rank: 8

积分
9303

终身成就奖杰出贡献奖优秀版主奖优秀会员奖突出贡献奖贴图大师奖60周年国庆纪念勋章音乐之星奖五周年纪念勋章

QQ
发表于 2009-3-19 22:28:59 | 显示全部楼层

回复 5楼 悠悠 的帖子

呵呵 难得你悟的这么明白,我原来都是在编辑帖子时,使用行距之间加空格的苯方法,这下就好了
回复 支持 反对

使用道具 举报

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

 楼主| 发表于 2009-3-19 22:35:35 | 显示全部楼层
行距之间加空格?效果怎样?

上次看过无极MM的代码帖子,她的歌词同步做起来好复杂啊。。<br>和</br>之间只有一个字,这样子慢慢变色岂不是累死啊。。。

偶想下一步在研究怎么变色。。。
www.y1jy.com  优爱教育
回复 支持 反对

使用道具 举报

162

主题

4650

回帖

5065

积分

圣天使

Rank: 8Rank: 8

积分
5065

灌水天才奖新人进步奖60周年国庆纪念勋章

QQ
发表于 2009-3-19 22:39:45 | 显示全部楼层
看了半天JS代码 大概懂一点了   迷迷糊糊的  呵呵  谢谢悠悠
生活就像大便,臭不可闻......
回复 支持 反对

使用道具 举报

1593

主题

3852

回帖

9303

积分

六翼天使

Rank: 8Rank: 8

积分
9303

终身成就奖杰出贡献奖优秀版主奖优秀会员奖突出贡献奖贴图大师奖60周年国庆纪念勋章音乐之星奖五周年纪念勋章

QQ
发表于 2009-3-19 22:40:29 | 显示全部楼层
原帖由 悠悠 于 2009-3-19 22:35 发表
行距之间加空格?效果怎样?

上次看过无极MM的代码帖子,她的歌词同步做起来好复杂啊。。<br>和</br>之间只有一个字,这样子慢慢变色岂不是累死啊。。。

偶想下一步在研究怎么变色。。。

有了心得一定记住第一个告诉偶哦。呵呵
回复 支持 反对

使用道具 举报

1482

主题

3万

回帖

3万

积分

神圣天使

紫暮枫铃

Rank: 16Rank: 16Rank: 16Rank: 16

积分
36925

杰出贡献奖优秀版主奖突出贡献奖灌水天才奖新人进步奖版主勋章幸运天使奖文学创作奖优秀作品奖美女勋章五周年纪念勋章

 楼主| 发表于 2009-3-19 22:41:58 | 显示全部楼层
原帖由 于 2009-3-19 22:39 发表
看了半天JS代码 大概懂一点了   迷迷糊糊的  呵呵  谢谢悠悠


呵呵,会用就行了,用过几次,也就明白了的~呵呵,别客气
www.y1jy.com  优爱教育
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|手机版|Archiver|落岸天使论坛

GMT+8, 2024-11-5 19:39 , Processed in 0.149654 second(s), 24 queries .

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表