百度MP3音乐与歌词同步,是怎么做的?(网页)
发布网友
发布时间：2022-07-05 00:20
共5个回答
热心网友
时间：2023-11-29 02:54
处理：
1、JSP生成网页的时候，将音乐播放器插件的ID命名为WMA，当然，你可以随便命名，只是这里便于说明。
2、读取XML或LRC内容，利用Ajax加载到id为lrc的div中。
并将XML或LRC的每行的歌词存到数组testmp3中(此数组当然是二维数组，数据组分别播放时间与歌词内容)
好了，到此，准备工作就做好了，下面就是重点---歌词同步。
3、相关语句：
一、定义函数getWMAtime
二、利用Interval=setInterval("getWMAtime()",900)，意思就是每隔900毫秒调用getWMAtime这个函数，并将其放入Interval中。
如果要用到“上一曲”“下一曲”，可以将其做为了一个函数，
将音乐的地址赋给WMA.URL，用WMA.controls.play();播放，用WMA.controls.stop();停止播放，用WMA.controls.pause();暂停播放。改变了音乐地址后，记得用Ajax载入新的歌词！
另：
getWMAtime函数的内容为读取当前词曲的播放时间
当前的播放时间：WMA.controls.currentPosition;
歌曲总时间：WMA.currentMedia.ration;
读取当前的时候后，与数组中时间项进行对比，相同(由于其它原因，可能会出现不相同的情况，因此则用“>=”)则用Ajax对id为lrc的div进行更改，具体怎么改那就随便你咯，一般就是改变一下指定行的颜色。
如果前当播放时间==歌曲总时间，那么就用clearInterval(Interval)，停止Interval继续调用。
好了，一个简单的JS的歌词同步播放器就完工啦
热心网友
时间：2023-11-29 02:55
热心网友
时间：2023-11-29 02:55
歌词文件就是每句歌词前面加个时间标示的txt类文件
我个人认为是先将歌词读进内存
在播放mp3时不停扫描内存
到达特定的时间显示歌词
热心网友
时间：2023-11-29 02:56
我不会啊，我想你可以多学学网页制作方面的知识
热心网友
时间：2023-11-29 02:56
<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>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<span id="lrcdata"><!--
[ti:]
[ar:]
[al:]
[by:]
[00:00.63]邓丽君
[00:04.13]漫步人生路
[00:05.88]寒川制作
[00:09.06]悠然小居
[00:24.37]在你身边路虽远
[00:29.62]末疲倦
[00:32.25]伴你漫行
[00:34.76]一段接一段
[00:37.17]越过高峰
[00:39.25]另一峰却又见
[00:42.31]目标推远
[00:44.06]让理想永远在前面
[00:47.78]路纵崎岖
[00:50.29]亦不怕受磨练
[00:53.14]愿一生中
[00:54.78]苦痛快乐也体验
[00:58.18]愉快悲哀
[01:00.80]在身边转又转
[01:03.97]风中赏雪
[01:05.51]雾里赏花
[01:06.82]快乐回旋
[01:08.79]母用计较
[01:10.76]快欣赏身边
[01:12.29]美丽每一天
[01:14.25]还愿确信
[01:16.01]美景良辰在脚边
[01:20.05]愿将欢笑声
[01:22.25]盖掩苦痛那一面
[01:24.98]悲也好 喜也好
[01:27.49]每天找到新发现
[01:30.12]让疾风吹呀吹
[01:32.75]尽管给我俩考验
[01:35.37]小雨点
[01:37.01]放心洒
[01:50.02]早已决心向着前
[01:56.99]路纵崎岖
[02:08.81]亦不怕受磨练
[02:12.13]愿一生中
[02:14.76]苦痛快乐也体验
[02:16.39]愉快悲哀
[02:20.01]在身边转又转
[02:22.74]风中赏雪
[02:24.27]雾里赏花
[02:25.69]快乐回旋
[02:27.55]母用计较
[02:29.52]快欣赏身边
[02:30.94]美丽每一天
[02:33.02]还愿确信
[02:34.88]美景良辰在脚边
[02:38.38]愿将欢笑声
[02:41.01]盖掩苦痛那一面
[02:43.52]悲也好 喜也好
[02:46.26]每天找到新发现
[02:48.88]让疾风吹呀吹
[02:51.51]尽管给我俩考验
[02:54.24]小雨点
[02:56.87]放心洒
[02:59.39]早已决心向着前
[03:02.45]悠然小居
[03:17.77]寒川制作
[03:30.78]欢迎光临
--></span>
<center>
<object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="aboutplayer" width="480" height="240">
<param name="url" value="http://www.ai18.net/DLJMP3/漫步人生路.mp3">
<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 lrc0;
var lrc1;
var min;
lrcobj = new lrcClass(lrcdata.innerHTML.slice(4,-3));
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.ration;
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(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("寒川");
lrcwt1.innerText = "";
lrcwt2.innerText = "";
lrcwt3.innerText = "";
lrcwt4.innerText = "";
lrcwt5.innerText = "";
lrcwt6.innerText = "";
lrcwt7.innerText = "";
lrcfilter.innerText = "";
lrcwt8.innerText = "";
lrcwt9.innerText = "";
lrcwt10.innerText = "";
lrcwt11.innerText = "";
lrcwt12.innerText = "";
lrcwt13.innerText = "";
}
function lrcrun()
{
with(aboutplayer)
{
lrcobj.run(controls.currentPosition);
}
if(arguments.length==0) setTimeout("lrcrun()",10);
}
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);
}
window.onerror = function()
{return true;}
lrcrun();
</script>
</body>
</html>
