蓝色理想 - 歌词同步关键技术

　歌词同步关键技术

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

歌词时间快慢调整（全新<高效>思路）
自动跟踪引擎（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

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

站点最新

站点最新列表

实现一个日期下拉菜单

54款PS笔刷及相对应图示

UNIX家族及类UNIX系统

普通A4纸玩出的艺术

js“树”读取xml数据

歌词同步关键技术

防刷新重复提交、防后退方法

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

基于 Ajax 的无限级菜单

饼干05年作品选登

栏目最新

栏目最新列表

实现一个日期下拉菜单

js“树”读取xml数据

歌词同步关键技术

防刷新重复提交、防后退方法

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

基于 Ajax 的无限级菜单

Phtoshop五步制作水晶按钮

权限控制算法

[PHP]配置,使用Smarty技术

Php 安全错误 Top 7