请教先生：

夜游 · 发表于 2007-1-4 19:38:38

他这个歌词和音乐同步是如何搞得？ 
<A href="http://box.zhangmen.baidu.com/m?gate=1&ct=134217728&tn=baidubox">http://box.zhangmen.baidu.com/m?gate=1&ct=134217728&tn=baidubox,蝶儿蝶儿满天飞%20%2091f%20net&word=wma,http://xinfen.w8.171kj.cn/wma/Ymgz.wma,,[%B5%FB%B6%F9%B5%FB%B6%F9%C2%FA%CC%EC%B7%C9]&si=%B5%FB%B6%F9%B5%FB%B6%F9%C2%FA%CC%EC%B7%C9;;%B8%DF%CA%A4%C3%C0;;11599;;11599&lm=16777216</A>

daily · 发表于 2007-1-4 19:48:03

不好意思，不懂

浅水游 · 发表于 2007-1-4 21:58:46

这个俺也不懂

老东北人 · 发表于 2007-1-4 23:23:46

天下 · 发表于 2007-1-5 01:50:15

</EMBED>
我给您简单说一下，其实很简单：
首先要说清楚的是：所谓的音乐和歌词同步其实是很难的，因为网络存在差异性，不同的人看相同的内容要视乎网络的实际而会出现不同程度的延时，因此只能是大概做一下。
在这里假设音乐的传输延时忽略不计。
规划我们打算演示给大家看的音乐和歌词同步的基本框架。
1、音乐的准备。一般需要准备一首大家都认为很快的歌曲，在这里我以陈慧娴的《蝶儿蝶儿满天飞》为例。音乐的地址是：<A href=\"http://xinfen.w8.171kj.cn/wma/16.wma\"><A href=\"http://xinfen.w8.171kj.cn/wma/16.wma\" target=_blank><A href=\"http://xinfen.w8.171kj.cn/wma/16.wma\" target=_blank>http://xinfen.w8&#46 ... /wma/16.wma</A></A></A>。
2、需要显示歌词的字幕大小的设计。一般需要考虑一行歌词的宽度，以及适当的高度，以便显示较多行数，以免出现歌词已走过了，而音乐还没有出来的现象。假设字幕宽500，高200。
3、首先编辑字幕。在HTML状态下编辑：

<MARQUEE scrollAmount=1 direction=up width=500 height=200>（需要编辑的歌词放在这里。</MARQUEE>
参数说明：MARQUEE定义属性，表示这是一个走马灯字幕。scrollAmount=1定义字幕走动的速度，1最小，可以改为2、3等。direction=up定义字幕走动的方向，可以改为left，right和down。width=500 height=200定义宽和高。
3、其次编辑播放器。这个前面我们已经讲过了，在这里我们再重复一下。在HTML状态下编辑：
<EMBED SRC=HTTP: volume=\"0\" autostart=\"true\" height=\"45 loop=true\" width=\"500\" 16.wma wma xinfen.w8.171kj.cn></EMBED>
参数说明：EMBED定义属性，表示这是一个播放器。width=500 height=45定义播放器界面的大小，您可以根据自己的需要修改数字的大小。loop=true表示歌曲不停循环播放（改为数字表示播放次数）。autostart=true表示歌曲自动开始播放（改为false则为手动播放）。volume=0表示播放器的音量最大。
4、往字幕里加歌词。《蝶儿蝶儿满天飞》的歌词是：
蝴蝶恋花美花却随春去春回 与君双双飞你却只能留一夜 人情似流水流到我心却是泪 爱一回痛一回 离别能教肠寸结 蝴蝶为花醉花却随风魂散飞 我心慢慢给你却将爱当宿醉 良人唤不回回到我梦都成灰 盼一些恨一些 却始终不懂后悔 蝶儿蝶儿满天飞 哦花不谢心不会飘雪 蝶儿蝶儿满天飞 哦盼和你再梦断一回 
但是如果是在HTML状态下编辑则需要在换行的地方加上 ，加地越多，空行越多。另外由于音乐一般有过门，因此还需要在第一行歌词前面加上一些 ，让音乐在过门的时候，字幕走一些空行，在歌声出来的时候才开始显示歌词，这个需要反复调整。
假设我们已经调整好了，并且填进了字幕里，最后代码是这样的：

<MARQUEE scrollAmount=1 direction=up width=500 height=200>


 蝴蝶恋花美，花却随春去春回 与君双双飞，你却只能留一夜 人情似流水，流到我心却是泪 爱一回，痛一回，离别能教肠寸结 蝴蝶为花醉，花却随风魂散飞 我心慢慢给，你却将爱当宿醉 良人唤不回，回到我梦都成灰 盼一些，恨一些，却始终不懂后悔 蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪 蝴蝶恋花美，花却随春去春回 与君双双飞，你却只能留一夜 人情似流水，流到我心却是泪 爱一回，痛一回，离别能教肠寸结 蝶儿蝶儿满天飞，OH，盼和你再梦断一回 蝴蝶为花醉，花却随风魂散飞 我心慢慢给，你却将爱当宿醉 良人唤不回，回到我梦都成灰 盼一些，恨一些，却始终不懂后悔 蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪 蝶儿蝶儿满天飞，OH，盼和你再梦断一回
</MARQUEE>
<EMBED SRC=HTTP: volume=\"0\" autostart=\"true\" height=\"45 loop=true\" width=\"500\" 16.wma wma xinfen.w8.171kj.cn></EMBED>
5、最后的效果是这样的：

<MARQUEE scrollAmount=1 direction=up width=500 height=200>
 蝴蝶恋花美，花却随春去春回 与君双双飞，你却只能留一夜 人情似流水，流到我心却是泪 爱一回，痛一回，离别能教肠寸结 蝴蝶为花醉，花却随风魂散飞 我心慢慢给，你却将爱当宿醉 良人唤不回，回到我梦都成灰 盼一些，恨一些，却始终不懂后悔 蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪 蝴蝶恋花美，花却随春去春回 与君双双飞，你却只能留一夜 人情似流水，流到我心却是泪 爱一回，痛一回，离别能教肠寸结 蝶儿蝶儿满天飞，OH，盼和你再梦断一回 蝴蝶为花醉，花却随风魂散飞 我心慢慢给，你却将爱当宿醉 良人唤不回，回到我梦都成灰 盼一些，恨一些，却始终不懂后悔 蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪 蝶儿蝶儿满天飞，OH，盼和你再梦断一回 </MARQUEE><EMBED src=http://xinfen.w8.171kj.cn/wma/16.wma width=500 height=45 type=audio/x-ms-wma volume=\"0\" autostart=\"true\" loop=\"true\"></EMBED>

夜游 · 发表于 2007-1-6 11:56:32

虽然这样也能勉强同步，但是我看百度MP3在缓冲的时候，歌词是不前进的，也就像我们看得DVD一样，当曲子暂停以后，歌词也就暂停了，我觉得很神奇，有点像我们支持歌词显示的MP3 播放器............

夜游 · 发表于 2007-1-6 12:19:52

我想上面的一首歌用了天下不少编辑调试的时间吧。
在此先表示我衷心地感谢...
辛苦了..........

我自己对这个问题想了一下，觉得可能是这种情况：设计者在编辑歌词时，引用了一些MP3 文件的信息，比如播放器播放时间等，就像电影文件的字幕包一样，做成名称一样的IDX SUB文件，与MP3文件放在同一服务器目录上，来实现同步，在连接时，仅需要做一个供字幕显示的窗口就行了.
乱猜一气，欢迎指正....

夜游 · 发表于 2007-1-6 12:25:27

这一段俺还是头一次学习呐，好好好..........

3、首先编辑字幕。在HTML状态下编辑：

<MARQUEE scrollAmount=1 direction=up width=500 height=200>（需要编辑的歌词放在这里。</MARQUEE>

参数说明：MARQUEE定义属性，表示这是一个走马灯字幕。scrollAmount=1定义字幕走动的速度，1最小，可以改为2、3等。direction=up定义字幕走动的方向，可以改为left，right和down。width=500 height=200定义宽和高。

3、其次编辑播放器。这个前面我们已经讲过了，在这里我们再重复一下。在HTML状态下编辑：

<EMBED src=http://xinfen.w8.171kj.cn/wma/16.wma width=500 height=45 loop=true autostart=true volume=0></EMBED>

参数说明：EMBED定义属性，表示这是一个播放器。width=500 height=45定义播放器界面的大小，您可以根据自己的需要修改数字的大小。loop=true表示歌曲不停循环播放（改为数字表示播放次数）。autostart=true表示歌曲自动开始播放（改为false则为手动播放）。volume=0表示播放器的音量最大。

天下 · 发表于 2007-1-6 14:56:53

夜游，I服了YOU。。。
原来您是看到了百度的歌词同步显示效果。。。
其实这个不是不可以做，就是太麻烦了，不过，既然您喜欢，我给您做一个和百度差不多一样的，下次千万不要了！哈哈哈。。。
但是，我只能把作好的代码贴在这里。为什么要这么做？因为本论坛不支持这种显示方式。。。
代码（里面已经加了一些注释），但不能拷贝回去，因为原来编辑的源代码在这里粘贴后一些命令已走形了：
<style>  </style> <script language=\"java script\"> var scrollt=0; var tflag=0;//存放时间和歌词的数组的下标 var lytext=new Array();//放存汉字的歌词 var lytime=new Array();//存放时间 var delay=10; var line=0; var scrollh=0;
function getLy()//取得歌词 { var ly=\"[00:00]蝶儿蝶儿满天飞.[00:15]制作:天下.[00:25]歌手:高胜美.[00:32]蝴蝶恋花美，花却随春去春回.[00:39]与君双双飞，你却只能留一夜.[00:46]人情似流水，流到我心却是泪.[00:52]爱一回，痛一回，离别能教肠寸结.[00:59]蝴蝶为花醉，花却随风魂散飞.[01:06]我心慢慢给，你却将爱当宿醉.[01:12]良人唤不回，回到我梦都成灰.[01:18]盼一些，恨一些，却始终不懂后悔.[01:25]蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪.[01:40]蝴蝶恋花美，花却随春去春回.[01:46]与君双双飞，你却只能留一夜.[01:52]人情似流水，流到我心却是泪.[01:58]爱一回，痛一回，离别能教肠寸结.[02:06]蝶儿蝶儿满天飞，OH，盼和你再梦断一回.[02:20]music…….[02:46]蝴蝶为花醉，花却随风魂散飞.[02:53]我心慢慢给，你却将爱当宿醉.[02:59]良人唤不回，回到我梦都成灰.[03:05]盼一些，恨一些，却始终不懂后悔.[03:12]蝶儿蝶儿满天飞，OH，花儿不谢，情不会飘雪.[03:26]蝶儿蝶儿满天飞，OH，盼和你再梦断一回…….[03:40]over\" return ly; } function show(t)//显示歌词 { var div1=document.getElementById(\"lyr\");//取得层 document.getElementById(\"lyr\").innerHTML=\" \";//每次调用清空以前的一次 if(t<lytime[lytime.length-1])//先舍弃数组的最后一个 { for(var k=0;k<lytext.length;k++) { if(lytime[k]<=t&&t<lytime[k+1]) { scrollh=k*25;//让当前的滚动条的顶部改变一行的高度 div1.innerHTML+=\"\"+lytext[k]+\" \"; } else if(t<lytime[lytime.length-1])//数组的最后一个要舍弃 div1.innerHTML+=lytext[k]+\" \"; } } else//加上数组的最后一个 { for(var j=0;j<lytext.length-1;j++) div1.innerHTML+=lytext[j]+\" \"; div1.innerHTML+=\"\"+lytext[lytext.length-1]+\" \"; } }
function scrollBar()//设置滚动条的滚动 { if(document.getElementById(\"lyr\").scrollTop<=scrollh) document.getElementById(\"lyr\").scrollTop+=1; if(document.getElementById(\"lyr\").scrollTop>=scrollh+50) document.getElementById(\"lyr\").scrollTop-=1; window.setTimeout(\"scrollBar()\",delay); }
function getReady()//在显示歌词前做好准备工作 { var ly=getLy();//得到歌词 //alert(ly); var arrly=ly.split(\".\");//转化成数组 for(var i=0;i<arrly.length;i++) sToArray(arrly); sortAr(); /*for(var j=0;j<lytext.length;j++) { document.getElementById(\"lyr\").innerHTML+=lytime[j]+lytext[j]+\" \"; }*/ scrollBar(); }
function sToArray(str)//解析如“[00:00]蝶儿蝶儿满天飞”的字符串前放入数组 { var left=0;//\"[\"的个数 var leftAr=new Array(); for(var k=0;k<str.length;k++) { if(str.charAt(k)==\"[\") { leftAr[left]=k; left++; } } if(left!=0) { for(var i=0;i<leftAr.length;i++) { lytext[tflag]=str.substring(str.lastIndexOf(\"]\")+1);//放歌词 lytime[tflag]=conSeconds(str.substring(leftAr+1,leftAr+6));//放时间 tflag++; } } //alert(str.substring(leftAr[0]+1,leftAr[0]+6)); }
function sortAr()//按时间重新排序时间和歌词的数组 { var temp=null; var temp1=null; for(var k=0;k<lytime.length;k++) { for(var j=0;j<lytime.length-k;j++) { if(lytime[j]>lytime[j+1]) { temp=lytime[j]; temp1=lytext[j]; lytime[j]=lytime[j+1]; lytext[j]=lytext[j+1]; lytime[j+1]=temp; lytext[j+1]=temp1; } } } }
function conSeconds(t)//把形如：01：25的时间转化成秒； { var m=t.substring(0,t.indexOf(\":\")); var s=t.substring(t.indexOf(\":\")+1); s=parseInt(s.replace(/\\b(0+)/gi,\"\")); if(isNaN(s)) s=0; var totalt=parseInt(m)*60+s; //alert(parseInt(s.replace(/\\b(0+)/gi,\"\"))); if(isNaN(totalt)) return 0; return totalt; } function getSeconds()//得到当前播放器播放位置的时间 { var t=getPosition(); t=t.toString();//数字转换成字符串 var s=t.substring(0,t.lastIndexOf(\".\"));//得到当前的秒 //alert(s); return s; } function getPosition()//返回当前播放的时间位置 { var mm=document.getElementById(\"MediaPlayer1\"); //var mmt=; //alert(mmt); return mm.CurrentPosition; }
function mPlay()//开始播放 { var ms=parseInt(getSeconds()); if(isNaN(ms)) show(0); else show(ms); window.setTimeout(\"mPlay()\",100) } window.setTimeout(\"mPlay()\",100) function test()//测试使用， { alert(lytime[lytime.length-1]); } </script> </head> <body onLoad=\"getReady()\"> <object id=\"MediaPlayer1\" width=\"460\" height=\"68\" classid=\"CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95\" codebase=\"<A href=\"http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715\">http://activex.microsoft ... p;#46;cab#Version=6,4,5,715</A>\" align=\"baseline\" border=\"0\" standby=\"Loading Microsoft Windows Media Player components...\" type=\"application/x-oleobject\"> <param name=\"FileName\" value=\"<A href=\"http://xinfen.w8.171kj.cn/wma/16.wma\">http://xinfen.w8&#46 ... /wma/16.wma</A>\"> <param name=\"ShowControls\" value=\"1\"> <param name=\"ShowPositionControls\" value=\"0\"> <param name=\"ShowAudioControls\" value=\"1\"> <param name=\"ShowTracker\" value=\"1\"> <param name=\"ShowDisplay\" value=\"0\"> <param name=\"ShowStatusBar\" value=\"1\"> <param name=\"AutoSize\" value=\"0\"> <param name=\"ShowGotoBar\" value=\"0\"> <param name=\"ShowCaptioning\" value=\"0\"> <param name=\"AutoStart\" value=\"1\"> <param name=\"PlayCount\" value=\"0\"> <param name=\"AnimationAtStart\" value=\"0\"> <param name=\"TransparentAtStart\" value=\"0\"> <param name=\"AllowScan\" value=\"0\"> <param name=\"EnableContextMenu\" value=\"1\"> <param name=\"ClickToPlay\" value=\"0\"> <param name=\"InvokeURLs\" value=\"1\"> <param name=\"DefaultFrame\" value=\"datawindow\">
 <embed src=\"<A href=\"http://xinfen.w8.171kj.cn/wma/16.wma\">http://xinfen.w8&#46 ... /wma/16.wma</A>\" align=\"baseline\" border=\"0\" width=\"460\" height=\"68\" type=\"application/x-mplayer2\" pluginspage=\"<A href=\"http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin\">http://www.microsoft& ... &sba=plugin</A>&\" name=\"MediaPlayer\" showcontrols=\"1\" showpositioncontrols=\"0\" showaudiocontrols=\"1\" showtracker=\"1\" showdisplay=\"0\" showstatusbar=\"1\" autosize=\"0\" showgotobar=\"0\" showcaptioning=\"0\" autostart=\"1\" autorewind=\"0\" animationatstart=\"0\" transparentatstart=\"0\" allowscan=\"1\" enablecontextmenu=\"1\" clicktoplay=\"0\" invokeurls=\"1\" defaultframe=\"datawindow\"> </embed> </object> <div id=lyr class=div>歌词加载中……</div> </body> </html>

天下 · 发表于 2007-1-6 16:07:57

可以把这个记事本文件下载回去打开，然后重命名为“**.html”文件在打开，允许弹出，就可以看到上面这个文件的演示效果了。

		自动登录	找回密码
密码			立即注册