歌词同步关键技术

　歌词同步关键技术

作者：aboutplayer　时间： 2006-01-13　文档类型：原创　来自：蓝色理想

歌词同步关键技术重大升级！

歌词时间快慢调整（全新<高效>思路）
自动跟踪引擎（arguments）

运行代码框
<html> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312> <title>谱乐视听 -- 千言万语</title> <STYLE type=text/css> TD { FONT-SIZE: 9pt; LINE-HEIGHT: 17px; } BODY{ FONT-SIZE: 9pt; LINE-HEIGHT: 17px; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } #lrcollbox td, #lrcollbox font {font-family: 黑体; font-size: 16px;} #lrcoll td { color:#0080C0; cursor: default; } #lrcbox { color:#00FF00 } #lrcfilter { filter: alpha(opacity=0) } #lrcbc { color:#FFFF33 } </STYLE> </head> <script language="JavaScript"> self.moveTo(0,0); self.resizeTo(screen.availWidth,screen.availHeight); </script> <base onmouseover="window.status=' aboutplayer.com 别忘了把地址告诉你QQ上的朋友哦！'; return true;"> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <span id="lrcdata"></span> <center> <div><input type="button" style="height:20; width:90; font-size:9pt" title="时间整体提前0.5秒/次" onclick="ff()" value="歌词调整(+)"> <input type="button" value="歌词调整(-)" title="时间整体滞后0.5秒/次" style="height:20; width:90; font-size:9pt" onclick="bb()"> <input type="file" name="file" onchange="loadfile(this.value)" style="cursor:default; height:20; width:290; font-size:9pt" title="1、播放你本地的这首歌曲
2、或输贴更有效的网路链接"></div> <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240"> <param name="url" value="http://aboutplayer.com/play.asp?id=6&action=url"> <param name="volume" value="100"> <param name="enablecontextmenu" value="0"> <param name="enableerrordialogs" value="0"> </object> <div id="lrcollbox" style="overflow:hidden; height:260; width:480; background-color:#000000;"> <table border="0" cellspacing="0" cellpadding="0" width="100%" id="lrcoll" style="position:relative; top: -20px;" oncontextmenu="return false;"> <tr><td nowrap height="20" align="center" id="lrcwt1"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt2"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt3"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt4"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt5"></td></tr> <tr><td nowrap height="20" align="center" id="lrcwt6"></td></tr> <tr><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"><span id="lrcwt7" style="height:20"></span></td></tr> <tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20"><div id="lrcfilter" style="overflow:hidden; width:100%; color:#FFFF33; height:20"></div></td></tr> </table> </td></tr> <tr style="position:relative; top: -20px"><td nowrap height="20" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tr><td nowrap height="20"><span id="lrcbox" style="height:20">歌词加载中</span></td></tr> <tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20"><div id="lrcbc" style="overflow:hidden; height:20; width:0;"></div></td></tr> </table> </td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt8"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt9"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt10"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt11"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt12"></td></tr> <tr style="position:relative; top: -40px;"><td nowrap height="20" align="center" id="lrcwt13"></td></tr> </table> </div> </center> <script language="JavaScript"> var lrcO; ffbb = 0; lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3)); function lrcClass(tt) { this.inr = []; this.oTime = 0; this.dts = -1; this.dte = -1; this.dlt = -1; this.ddh; this.fjh; lrcbc.style.width = 0; if(/\[offset\:(\-?\d+)\]/i.test(tt)) this.oTime = RegExp.$1/1000; tt = tt.replace(/\[\:\][^$\n]*(\n|$)/g,"$1"); tt = tt.replace(/\[[^\[\]\:]*\]/g,""); tt = tt.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,""); tt = tt.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,""); tt = tt.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,""); 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; } } this.inr = this.inr.sort( function(a,b){return a.t[0]-b.t[0];} ); 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) { if(tme<this.dts || tme>=this.dte) { 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.dts = this.inr[ii].t[0]; this.dte = (ii<this.inr.length-1)?this.inr[ii+1].t[0]:aboutplayer.currentMedia.duration; lrcwt1.innerText = this.retxt(ii-7); lrcwt2.innerText = this.retxt(ii-6); lrcwt3.innerText = this.retxt(ii-5); lrcwt4.innerText = this.retxt(ii-4); lrcwt5.innerText = this.retxt(ii-3); lrcwt6.innerText = this.retxt(ii-2); lrcwt7.innerText = this.retxt(ii-1); lrcfilter.innerText = this.retxt(ii-1); lrcwt8.innerText = this.retxt(ii+1); lrcwt9.innerText = this.retxt(ii+2); lrcwt10.innerText = this.retxt(ii+3); lrcwt11.innerText = this.retxt(ii+4); lrcwt12.innerText = this.retxt(ii+5); lrcwt13.innerText = this.retxt(ii+6); this.print(this.retxt(ii)); if(this.dlt==ii-1) { clearTimeout(lrcO); golrcoll(0); golrcolor(0); } this.dlt = 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[i].n; } this.print = function(txt) { lrcbox.innerText = txt; lrcbc.innerText = txt; } this.print("www.aboutplayer.com"); lrcwt1.innerText = ""; lrcwt2.innerText = ""; lrcwt3.innerText = ""; lrcwt4.innerText = ""; lrcwt5.innerText = ""; lrcwt6.innerText = ""; lrcwt8.innerText = ""; lrcwt9.innerText = ""; lrcwt10.innerText = ""; lrcwt11.innerText = ""; lrcwt12.innerText = ""; lrcwt13.innerText = ""; } function loadfile(url) { aboutplayer.url = url; aboutplayer.controls.play(); file.select(); document.selection.clear(); onfocus=file.blur(); } function bb() { ffbb = ffbb - 0.5; } function ff() { ffbb = ffbb + 0.5; } function lrcrun() { with(aboutplayer) { lrcobj.run(controls.currentPosition + ffbb); } if(arguments.length == 0) setTimeout("lrcrun()",10); } function golrcoll(s) { lrcoll.style.top = -2-(s++)*3; if(s<=6) lrcO = setTimeout("golrcoll("+s+")",100); } function golrcolor(t) { lrcfilter.filters.alpha.opacity = 100-(t++)*10; if(t<=10) setTimeout("golrcolor("+t+")",60); } function killErrors() { return true; } window.onerror = killErrors; lrcrun(); </script> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

论坛UBB代码中轻松实现歌词同步

Windows Media Player 格式：
1、[wmp=http://www.aboutplayer.com/a.wmv]歌词内容[/wmp]
2、[wmp=http://www.aboutplayer.com/a.wma]歌词内容[/wmp]
3、[wmp=http://www.aboutplayer.com/a.mp3]歌词内容[/wmp]
……
Real Player 格式：
1、[rmp=http://www.aboutplayer.com/a.rm]歌词内容[/rmp]
2、[rmp=http://www.aboutplayer.com/a.ra]歌词内容[/rmp]
3、[rmp=http://www.aboutplayer.com/a.mp3]歌词内容[/rmp]
……

实例：

[wmp=mms://222.77.177.180/mp3/2005-09-21/f528b693-e3cc-457d-8aab-6886d5c8f80a.wma][ti:美丽的神话]
[ar:孙楠&韩红]
[al:忘不了你]
[by:rodick]
[04:41.88][01:48.65][00:02.63]美丽的神话
[00:09.91]rodick 制作
[00:16.47]梦中的人熟悉的脸孔
[00:23.72]你是我守候的温柔
[00:31.00]就算泪水淹没天地
[00:38.40]我不会放手，每一刻孤独的承受
[00:53.12]只因我曾许下承诺
[01:00.43]你我之间熟悉的感动
[01:07.86]爱就要苏醒
[02:57.49][01:14.30]万世沧桑唯有爱是永远的神话
[03:04.48][01:21.48]潮起潮落始终不悔真爱的相约
[03:11.88][01:28.95]几番苦痛的纠缠多少黑夜挣扎
[03:19.20][01:36.29]紧握双手让我和你再也不离分
[01:59.32]枕上雪冰封的爱恋
[02:06.65]真心相摇篮才能融解
[02:13.87]风中摇曳炉上的火
[02:21.37]不灭亦不休
[02:28.80]等待花开春去春又来
[02:36.02]无情岁月笑我痴狂
[02:43.37]心如钢铁任世界荒芜
[02:50.70]思念永相随
[03:56.09][03:26.57]悲欢岁月唯有爱是永远的神话
[04:03.24][03:33.82]谁都没有遗忘古老，古老的誓言
[04:10.64][03:41.28]你的泪水化为漫天飞舞的彩蝶
[04:18.05][03:48.63]爱是翼下之风两心相随自在飞
[04:28.19]你是我心中唯一美丽的神话[/wmp]

注意事项：
1、兼容视频、音频播放；
2、一个主题及其所有回复中只能设置一首媒体，建议放在主题帖；
3、媒体路径可以是绝对路径（如‘http://aboutplayer.com/a.wmv’），也可以是相对路径（如‘../mp3/a.wma’）。

演示：
1、Windows Media Player
2、Real Player

经典论坛讨论帖：
http://www.blueidea.com/bbs/NewsDetail.asp?id=2422658

出处：蓝色理想
责任编辑：moby

◎进入论坛网络编程版块参加讨论

相关文章

用flash实现基于搜索引擎搜索

FLASH打造LRC歌词播放器

Window Media Player 播放器

Skins Factory播放器界面设计欣赏

站点最新

站点最新列表

疯狂的程序员第五十回

疯狂的程序员第四十九回

疯狂的程序员第四十八回

疯狂的程序员第四十七回

疯狂的程序员第四十六回

疯狂的程序员第四十五回

疯狂的程序员第四十四回

疯狂的程序员第四十三回

疯狂的程序员第四十二回

疯狂的程序员第四十一回

栏目最新

栏目最新列表

火星人的耳机

公司正式宣布创业失败

用corelDEAW 12打造唇膏

二行代码解决全部网页木马

一行代码解决iframe挂马

Photoshop制作星空爆炸效果

CorelDraw 12打造休闲裤

Firework如何画特殊的切角图形

Firework打造韩式风格的手提袋

flash实例:打造佛光效果