当前页面: 开发资料首页 → Javascript 专题 → 歌词同步关键技术
歌词同步关键技术
摘要 : 歌词同步关键技术
<tr>
<td>
词同步关键技术重大升级!
歌词时间快慢调整(全新<高效>思路) 自动跟踪引擎(arguments)
运行代码框
<textarea class=fm id=code5 rows=12 cols=78>
<head>
谱乐视听 -- 千言万语
</head>
<script language="JavaScript">
self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
</script>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
[ti:千言万语]
[ar:邓丽君]
[au:尔英]
[al:邓丽君 - 宝丽金 88 极品音色系列]
[by:www.aboutplayer.com]
[00:02.00]千言万语 - 邓丽君
[00:09.25]电影《彩云飞》插曲
[00:16.50]古月 曲 尔英 词
[00:23.70]
[00:25.20]<00:25.70>不<00:26.00>知<00:26.35>道<00:26.80>为<00:27.30>了<00:27.90>什<00:28.60>麽<00:30.20>
[00:31.35]<00:31.85>忧<00:32.20>愁<00:32.60>它<00:33.00>围<00:33.40>绕<00:34.15>着<00:34.60>我<00:36.60>
[00:37.60]<00:38.10>我<00:38.45>每<00:38.85>天<00:39.25>都<00:39.60>在<00:40.45>祈<00:41.30>祷<00:43.80>
[00:43.90]<00:44.20>快<00:44.60>赶<00:45.00>走<00:45.45>爱<00:45.95>的<00:46.50>寂<00:47.75>寞<00:48.80>
[00:48.90]<00:49.20>那<00:49.50>天<00:49.95>起<00:51.30> <00:51.90>你<00:52.25>对<00:52.65>我<00:53.00>说<00:54.40>
[00:54.90]<00:55.40>永<00:56.05>远<00:56.80>地<00:57.50>爱<00:58.60>着<00:59.10>我<01:00.70>
[01:00.85]<01:01.35>千<01:02.00>言<01:03.80>和<01:04.70>万<01:05.35>语<01:06.80>
[01:06.90]<01:07.25>随<01:08.05>风<01:09.25>云<01:10.65>掠<01:11.20>过<01:12.80>
[01:14.00]<01:14.50>不<01:14.85>知<01:15.25>道<01:15.65>为<01:16.30>了<01:16.80>什<01:17.45>麽<01:19.25>
[01:20.10]<01:20.60>忧<01:21.05>愁<01:21.40>它<01:21.90>围<01:22.35>绕<01:23.05>着<01:23.40>我<01:25.60>
[01:26.40]<01:26.90>我<01:27.25>每<01:27.65>天<01:28.05>都<01:28.50>在<01:29.50>祈<01:30.15>祷<01:32.50>
[01:32.60]<01:33.10>快<01:33.45>赶<01:33.85>走<01:34.25>爱<01:34.90>的<01:35.40>寂<01:36.70>寞<01:39.30>
[01:40.80]
[02:03.45]<02:03.95>不<02:04.25>知<02:04.70>道<02:05.10>为<02:05.75>了<02:06.30>什<02:06.95>麽<02:08.10>
[02:09.70]<02:10.20>忧<02:10.55>愁<02:10.95>它<02:11.40>围<02:11.85>绕<02:12.50>着<02:12.90>我<02:15.40>
[02:15.90]<02:16.40>我<02:16.85>每<02:17.15>天<02:17.50>都<02:17.90>在<02:18.90>祈<02:19.60>祷<02:22.10>
[02:22.20]<02:22.50>快<02:22.90>赶<02:23.30>走<02:23.75>爱<02:24.30>的<02:24.80>寂<02:26.10>寞<02:27.20>
[02:27.30]<02:27.50>那<02:27.85>天<02:28.30>起<02:29.60> <02:30.10>你<02:30.50>对<02:30.90>我<02:31.40>说<02:32.50>
[02:33.15]<02:33.65>永<02:34.25>远<02:35.05>地<02:35.75>爱<02:36.90>着<02:37.40>我<02:38.65>
[02:39.15]<02:39.65>千<02:40.35>言<02:42.15>和<02:43.05>万<02:43.55>语<02:45.30>
[02:45.40]<02:45.70>随<02:46.40>风<02:47.50>云<02:49.10>掠<02:49.70>过<02:50.90>
[02:52.40]<02:52.90>不<02:53.25>知<02:53.65>道<02:54.05>为<02:54.65>了<02:55.25>什<02:55.85>麽<02:57.55>
[02:58.50]<02:59.00>忧<02:59.40>愁<02:59.90>它<03:00.35>围<03:00.75>绕<03:01.35>着<03:01.80>我<03:03.65>
[03:04.75]<03:05.25>我<03:05.60>每<03:06.00>天<03:06.40>都<03:06.80>在<03:07.80>祈<03:08.50>祷<03:11.10>
[03:11.20]<03:11.45>快<03:12.20>赶<03:12.60>走<03:12.90>爱<03:13.50>的<03:14.10>寂<03:15.45>寞<03:18.45>
[03:19.95]
[03:21.25]网上服务由 www.aboutplayer.com 提供
[03:28.97]
<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、或输贴更有效的网路链接">
<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">
</td></tr>
<tr style="position:relative; top: -20px; z-index:6"><td nowrap height="20">
</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">
歌词加载中 </td></tr>
<tr style="position:relative; top: -20px; z-index:6;"><td nowrap height="20">
</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>
<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
]+>/.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 = ""+ this.inr[ii].n.replace(/&/g,"&").replace(//g,">").replace(/%=%/g," ") +" ";
var fall = lrcbc.getElementsByTagName("font");
for(var wi=0; wi=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.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>
</textarea>
<input style="CURSOR: hand" onfocus=this.blur() onclick="runEx('code5')" type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code5) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code5) type=button value=另存代码> [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’)。
</td>
</tr>
</table>
↑返回目录
前一篇: js“树”读取xml数据
后一篇: 基于 Ajax 的无限级菜单