歌词同步关键技术

　歌词同步关键技术

作者：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播放器界面设计欣赏


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule