lrc歌词同步播放器代码发布
相关参数请在代码里面修改,演示页面http://qijuzhu.cn/mp3/mp3.html
代码如下:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>lrc歌词同步播放器代码发布</title>
<style>
<!–
#lrcollbox td {
font-size: 16px;
}
#lrcollbox font {
font-size: 16px;
}
#aboutplayer {
clear: both;
float: left;
margin: 0px;
}
#lrcoll td {
color:#000000;
cursor:default;
}
#lrcbox {
color:#FF0000;
}
#lrcbc { color:#FF6666;}
#lrcfilter {
filter: alpha(opacity=”30″);
}
body {
margin-left: 自动;
margin-top: 0px;
margin-right: 自动;
margin-bottom: 0px;
}
#lrcollbox {
height:300px;
width:448px;
background-color:#FFFFFF;
clear: both;
float: left;
border: 1px solid #c1c1c1;
overflow: hidden;
}
–>
</style>
</head>
<body>
<center>
<object classid=”clsid:6bf52a52-394a-11d3-b153-00c04f79faa6″ id=”aboutplayer” width=”450″ height=”64″><param name=”url” value=”/mp3/guiji.mp3″><param name=”volume” value=”100″><param name=”enablecontextmenu” value=”0″><param name=”enableerrordialogs” value=”0″></object>
<div id=”lrcollbox”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%” id=”lrcoll” style=”oncontextmenu=”return false”>
<tr><td nowrap=”true” height=”25″ align=”center” id=”lrcwt1″></td></tr>
<tr><td nowrap=”true” height=”25″ align=”center” id=”lrcwt2″></td></tr>
<tr><td nowrap=”true” height=”25″ align=”center” id=”lrcwt3″></td></tr>
<tr><td nowrap=”true” height=”25″ align=”center” id=”lrcwt4″></td></tr>
<tr><td nowrap=”true” height=”25″ align=”center”>
<table border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr><td nowrap=”true” height=”25″><span id=”lrcwt5″ style=”height:0px”></span></td></tr><tr><td nowrap=”true” height=”25″><div id=”lrcfilter” style=”overflow:hidden; width:100%; color:#FFFF33; height:0px”></div></td></tr></table></td></tr><tr><td nowrap=”true” height=”25″ align=”center”><table border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td nowrap=”true” height=”25″><span id=”lrcbox” style=”height:0px”>未添加歌词</span></td></tr><tr><td nowrap=”true” height=”25″><div id=”lrcbc” style=”overflow:hidden; height:0px; width:0″></div></td></tr></table>
</td></tr><tr >
<td nowrap=”true” height=”25″ align=”center” id=”lrcwt6″></td></tr><tr>
<td nowrap=”true” height=”25″ align=”center” id=”lrcwt7″></td></tr><tr >
<td nowrap=”true” height=”25″ align=”center” id=”lrcwt8″></td></tr><tr >
<td nowrap=”true” height=”25″ align=”center” id=”lrcwt9″></td></tr></table></div>
<span id=”lrcdata”><!–
[ti:轨迹]
[ar:周杰伦]
[al:寻找周杰伦]
[00:03.00]~轨迹~
词:黄俊郎 曲:周杰伦
[00:06.00]周杰伦
[00:14.00]
[00:18.68]怎么隐藏我的悲伤
[00:24.70]失去你的地方
[00:31.11]你的发香散得匆忙
[00:37.44]我已经跟不上
[02:39.79][00:43.91]闭上眼睛还能看见
[02:46.15][00:50.22]你离去的痕迹
[02:52.38][00:56.61]在月光下一直找寻
[02:58.88][01:03.08]那想念的身影
[03:05.68][01:09.73]如果说分手是苦痛的起点
[03:11.27][01:15.42]那在终点之前我愿意再爱一遍
[03:18.39][01:22.39]想要对你说的不敢说的爱
[03:24.67][01:28.54]会不会有人可以明白
[04:00.17][03:30.82][01:34.81]我会发着呆然后忘记你
[04:07.32][03:37.13][01:41.20]接着紧紧闭上眼
[04:13.67][03:43.54][01:47.51]想着那一天会有人代替
[04:20.50][03:50.41][01:54.31]让我不再想念你
[03:57.58]
[04:26.38][02:00.16]我会发着呆然后微微笑
[04:32.65][02:06.51]接着紧紧闭上眼
[04:39.01][02:12.78]又想那一年你温柔的脸
[04:45.92][02:19.74]在我忘记之前
[02:26.03]
[04:51.71]心里的眼泪模糊了视线
[04:58.61]你会看不见
[05:08.94]
~~End~~–></span>
<script>lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
var lrc0;
var lrc1;
var min;
function lrcClass(tt)
{
this.inr = [];
this.min = [];
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;
}
for(var ii=0; ii<this.inr.length-1; ii++)
this.min[ii] = Math.floor((this.inr[ii+1].t[0]-this.inr[ii].t[0])*10);
this.min.sort(function(a,b){return a-b});
min = this.min[0]/2;
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-5);
lrcwt2.innerText = this.retxt(ii-4);
lrcwt3.innerText = this.retxt(ii-3);
lrcwt4.innerText = this.retxt(ii-2);
lrcwt5.innerText = this.retxt(ii-1);
lrcfilter.innerText = this.retxt(ii-1);
lrcwt6.innerText = this.retxt(ii+1);
lrcwt7.innerText = this.retxt(ii+2);
lrcwt8.innerText = this.retxt(ii+3);
lrcwt9.innerText = this.retxt(ii+4);
this.print(this.retxt(ii));
if(this.dlt==ii-1)
{
clearTimeout(lrc0);
if(lrcoll.style.pixelTop!=0) lrcoll.style.top = 0;
golrcoll(0);
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 100;
golrcolor(0);
}
else if(parseInt(lrcoll.style.top)!=-20)
{
clearTimeout(lrc0);
lrcoll.style.top = -20;
clearTimeout(lrc1);
lrcfilter.filters.alpha.opacity = 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(“qijuzhu.cn”);
}
function golrcoll(s)
{
lrcoll.style.top = -(s++)*2;
if(s<=9)
lrc0= setTimeout(“golrcoll(“+s+”)”,min*10);
}
function golrcolor(t)
{
lrcfilter.filters.alpha.opacity = 110-(t++)*10;
if(t<=10)
lrc1= setTimeout(“golrcolor(“+t+”)”,min*10);
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition);
}
if(arguments.length==0) setTimeout(“lrcrun()”,10);
}
lrcrun();
window.onerror = function()
{return true;}</script>
</body>
</html>
近期评论