BaiDu Mp3歌词同步功能实现

最新推荐文章于 2024-05-26 23:34:04 发布

zhijie435

最新推荐文章于 2024-05-26 23:34:04 发布

阅读量1.1k

点赞数

分类专栏： effictive java 文章标签： function vbscript xmlhttprequest null string object

effictive java 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现歌词动态滚动的方法，该方法通过解析歌词文件并同步播放进度，使歌词随着音乐节奏高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特点：采用2.0 java+xml技术加载歌词，并且歌词根据词曲滚动，并自动把正在演唱的歌词加重显示

前几天偶然发现百度MP3的试听歌曲可以实现歌词动态滚动，看了下源文件，呵呵，而且Only For IE。

主要是一个JS函数来实现这个效果，代码如下：

[code]
function lrcInterface(pID,lrcID)
{
var tmpOutput=document.getElementById('LrcShower');
var count=0;
tmpOutput.innerHTML=" 正在加载歌词信息，请您稍等片刻....";
var tmp=setInterval(getObject,200);
function getObject()
{
bdLRC=new bdSyncLRC();
if(bdLRC!=null)
{
 clearInterval(tmp);
 bdLRC.setPlayer(pID);
 bdLRC.setURL(lrcID);
 bdLRC.setOutput("LrcShower");
 bdLRC.Exchange();
 bdLRC.begin();
};
else
{
 if(count==25)
 {
 clearInterval(tmp);
 tmpOutput.innerHTML=" 可能是因为网络的原因，系统没有找到合适的歌词。请稍后重试";
 };
 else count++;
};
};
};
function bdSyncLRC()
{
var playerObj=null;
var playerTypeStr=null;
var lrcURL="";
var lrcShower="";
var lrcContent="";
var lrcObjArray=new Array();
this.preLRC=new Array();
this.offsetTime=0;
this.scrollMoveLen=20;
if(arguments.length>=1)this.setPlayer(arguments[0]);
if(arguments.length>=2)this.setURL(arguments[1]);
if(arguments.length>=3)this.setOutput(arguments[2]);
};
bdSyncLRC.prototype.setPlayer=function()
{
if(arguments.length>=1)
{
 arg=arguments[0];
 playerTypeStr=String(arg);
 if(typeof(arg)=="string")this.playerObj=document.getElementById(arg);
 else if(typeof(arg)=="object")this.playerObj=arg;
};
};
bdSyncLRC.prototype.getPlayer=function()
{
if(typeof(document.getElementById("this.playerObj"))=='object')return this.playerObj;
else return null;
};
bdSyncLRC.prototype.setURL=function()
{
if(arguments.length>=1)
{
 var lrcDir,lrcFileName;
 lrcDir=String(Math.floor((parseInt(arguments[0])/100)));
 lrcFileName=arguments[0]+".lrc";
 this.lrcURL="/bdlrc/"+lrcDir+"/"+lrcFileName;
};
};
bdSyncLRC.prototype.getURL=function()
{
return this.lrcURL;
};
bdSyncLRC.prototype.setContent=function()
{
if(arguments.length>=1)this.lrcContent=arguments[0];
};
bdSyncLRC.prototype.getContent=function()
{
return this.lrcContent;
};
bdSyncLRC.prototype.setLRC=function()
{
if(arguments.length>=1)this.lrcObjArray=arguments[0];
};
bdSyncLRC.prototype.getLRC=function()
{
return this.lrcObjArray;
};
bdSyncLRC.prototype.setOutput=function(showerId)
{
this.lrcShower=showerId;
};
bdSyncLRC.prototype.getOutput=function()
{
if(this.lrcShower!="")
{
 arg=this.lrcShower;
 if(typeof(arg)=="string")return document.getElementById(arg);
 else if(typeof(arg)=="object")return arg;
};
return null;
};
bdSyncLRC.prototype.multiLRC=function(lrcLine)
{
thisObj=this;
tmpVar=lrcLine.split("]");
if(tmpVar.length>=2)
{
 lrcText=tmpVar[tmpVar.length-1];
 for(j=0;j<tmpVar.length-1;j++)
 {
 lrcTime=tmpVar[j]+"]";
 thisObj.preLRC.push(lrcTime+""+lrcText);
 };
};
};
bdSyncLRC.prototype.preSyncLRC=function()
{
if(this.getContent()==null||this.getContent()=="")return;
lrcLines=this.getContent().split("/n");
tmpArr=new Array();
for(i=0;i<lrcLines.length;i++)this.multiLRC(replaceStr(lrcLines));
this.preLRC.sort();
var tmpVar="aaa";
for(i=this.preLRC.length-1;i>=0;i--)if(this.preLRC==tmpVar)
{
 tmpVar=this.preLRC;
 this.preLRC.splice(i,1);
};
else tmpVar=this.preLRC;
preTime=0;
indexLRC=1;
tmpArr[0]=new LRCItem(0,"");
for(i=0;i<this.preLRC.length;i++)
{
 if(this.preLRC.length>9)
 {
 tmpTime=getLyrcTime(this.preLRC);
 tmpLrc=getLyrc(this.preLRC);
 if(tmpTime<preTime)continue;
 preTime=tmpTime;
 var tmpItem=new LRCItem(tmpTime,tmpLrc);
 tmpArr[indexLRC++]=tmpItem;
 };
};
var tmpItem=new LRCItem(3600,"Over...");
tmpArr[indexLRC]=tmpItem;
this.setLRC(tmpArr);
};
function replaceStr(tmpStr)
{
return tmpStr.replace(/^/s*|/s*$/g,"");
};
function getLyrc(tmpStr)
{
try
{
 tmpArray=tmpStr.split("]");
 return tmpArray[tmpArray.length-1];
}
catch(e)
{
};
return"";
};
function getLyrcTime(tmpStr)
{
try
{
 tmpChar=tmpStr.split("]")[0].split("[")[1];
 tmpVar=tmpChar.split(":");
 if(tmpVar.length<2)return 0;
 min=tmpVar[1].split(".")[0];
 tmpInt=parseInt(tmpVar[0])*60+parseFloat(min);
 if(!isNaN(tmpInt))return tmpInt;
}
catch(e)
{
};
return 0;
};
function LRCItem()
{
var lrcTime=-1;
var lrcContent="";
if(arguments.length>=2)
{
 this.lrcTime=arguments[0];
 this.lrcContent=arguments[1];
};
};
bdSyncLRC.prototype.Exchange=function()
{
var xmlhttp=null;
if(window.XMLHttpRequest)
{
 xmlhttp=new XMLHttpRequest();
};
else
{
 if(window.ActiveXObject)
 {
 try
 {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 catch (ee)
 {
 xmlhttp=new ActiveXObject("MSXML.XMLHTTP");
 };
 };
};
var tmpURL=this.getURL();
thisObj=this;
var tmpStr="";
try
{
 xmlhttp.open("GET",tmpURL,false);
 xmlhttp.onreadystatechange=function()
 {
 if((xmlhttp.readyState==4)&&(xmlhttp.status==200))
 {
 tmpStr=bdBytes2Str(xmlhttp.responseBody);
 thisObj.setContent(tmpStr);
 };
 };
 xmlhttp.send(null);
}
catch(ee)
{
};
};
bdSyncLRC.prototype.begin=function()
{
thisObj=this;
tmpPlayerObj=thisObj.getPlayer();
var tmpOutput=document.getElementById('LrcShower');
var tmpI=setInterval(getlrc,100);
var count=0;
function getlrc()
{
if(typeof(thisObj.getContent())!="undefined")
{
 clearInterval(tmpI);
 thisObj.preSyncLRC();
 var tmp,i,tmpArray;
 tmpArray=thisObj.getLRC();
 tmp=" "+" "+" "+" "+" "+" "+" ";
 for(i=0;i<tmpArray.length;i++)tmp+=" "+replaceStr(tmpArray.lrcContent)+" ";
 thisObj.getOutput().innerHTML=tmp;
 getPlayingTime(thisObj.getPlayer(),thisObj);
};
else
{
 if(count==50)
 {
 clearInterval(tmpI);
 tmpOutput.innerHTML=" 可能是因为网络的原因，系统没有找到合适的歌词。请稍后重试";
 };
 else count++;
};
};
};
function getPlayingTime(playerObj,bdLRCObj)
{
try
{
 tmpbdLRCObj=bdLRCObj;
 var tmpPlayerObj=playerObj;
 if(typeof(tmpPlayerObj)=="string")tmpPlayerObj=document.getElementById(tmpPlayerObj);
 window.setTimeout("getPlayingTime(tmpPlayerObj,tmpbdLRCObj)",1000);
 bdsyncLyrc(tmpbdLRCObj);
}
catch(e)
{
 document.title="getPlayingTime..."+e.toString();
};
};
var preMatchLrcLine=-1;
function bdsyncLyrc(bdLRCObj)
{
try
{
 tmpPlayer=bdLRCObj.getPlayer();
 if(playerTypeStr=="MediaPlayer1")playerStatus=tmpPlayer.PlayState;
 else playerStatus=tmpPlayer.GetPlayState();
 if(playerStatus!=2&&playerTypeStr=="MediaPlayer1")return;
 if(tmpPlayer)
 {
 if(playerTypeStr=="MediaPlayer1")currentTime=tmpPlayer.CurrentPosition;
 else currentTime=tmpPlayer.GetPosition()/1000;
 bdLRCObj.preSyncLRC();
 tmpLrcs=bdLRCObj.getLRC();
 tmpScroll=bdLRCObj.getOutput();
 tmpScrollId=bdLRCObj.getOutput();
 perLength=bdLRCObj.scrollMoveLen;
 var tmpLrcContent=new Array(20);
 var color=new Array(21);
 var lineCount=new Array(tmpLrcs.length);
 var perLineCount=new Array(tmpLrcs.length);
 var i;
 for(i=0;i<tmpLrcs.length;i++)
 {
 lineCount=Math.floor(tmpLrcs.lrcContent.length/67);
 perLineCount=0;
 for(j=0;j<i;j++)perLineCount+=lineCount[j];
 };
 color[0]="#000000";
 color[1]="#0d0500";
 color[2]="#1a0a00";
 color[3]="#270f00";
 color[4]="#341400";
 color[5]="#411900";
 color[6]="#4e1e00";
 color[7]="#5b2300";
 color[8]="#682800";
 color[9]="#752d00";
 color[10]="#823200";
 color[11]="#8f3700";
 color[12]="#9c3c00";
 color[13]="#a94100";
 color[14]="#b64600";
 color[15]="#c34b00";
 color[16]="#d05000";
 color[17]="#dd5500";
 color[18]="#ea5a00";
 color[19]="#f75f00";
 color[20]="#ff5a00";
 for(i=0;i<20;i++)tmpLrcContent=" "+" "+" "+" "+" "+" "+" ";
 var tmpMatchLrcLine=0;
 for(j=0;j<tmpLrcs.length;j++)
 {
 nowLrc=tmpLrcs[j];
 nextLrc=tmpLrcs[(j<tmpLrcs.length-1)?j+1:j];
 nowTime=nowLrc.lrcTime+bdLRCObj.offsetTime;
 nextTime=nextLrc.lrcTime+bdLRCObj.offsetTime;
 if(nowTime<=currentTime&&currentTime<nextTime)
 {
 tmpMatchLrcLine=j;
 for(i=0;i<20;i++)tmpLrcContent+=" "+replaceStr(tmpLrcs[j].lrcContent)+" ";
 j+=1;
 tmpInt=tmpLrcs.length-j;
 for(;j<tmpLrcs.length;j++)for(i=0;
 i<20;
 i++)tmpLrcContent+=" "+replaceStr(tmpLrcs[j].lrcContent)+" ";
 if(tmpInt<8)for(j=0;
 j<=8-tmpInt;
 j++)for(i=0;
 i<20;
 i++)tmpLrcContent+=" ";
 break;
 };
 else
 {
 if(j==preMatchLrcLine)for(i=0;
 i<20;
 i++)tmpLrcContent+=" "+replaceStr(tmpLrcs[j].lrcContent)+" ";
 else for(i=0;i<20;i++)tmpLrcContent+=" "+replaceStr(tmpLrcs[j].lrcContent)+" ";
 };
 };
 if(preMatchLrcLine!=tmpMatchLrcLine)
 {
 if(Math.abs(tmpMatchLrcLine-preMatchLrcLine)>1)
 {
 tmpScroll.innerHTML=tmpLrcContent[19];
 tmpScrollId.scrollTop=(tmpMatchLrcLine+perLineCount[tmpMatchLrcLine]+1)*perLength;
 tmpScrollId.scrollTop=(tmpMatchLrcLine+perLineCount[tmpMatchLrcLine]+1)*perLength;
 };
 else
 {
 var count=0;
function scrollAdd()
{
tmpScroll.innerHTML=tmpLrcContent[19];
tmpScrollId.scrollTop+=2*(1+lineCount[preMatchLrcLine]);
count++;
if(count==10)clearInterval(loaderInterval);
};
var loaderInterval=setInterval(scrollAdd,25);
};
};
preMatchLrcLine=tmpMatchLrcLine;
};
}
catch(e)
{
document.title="bdsyncLyrc="+e.toString();
};
};

[/code]
还有一个VBScript函数，供上面函数中调用，用来解决乱码问题

 
[code]
<SCRIPT language=VBScript>
Function bdBytes2Str(vIn)
 strReturn = ""
 For i = 1 To LenB(vIn)
ThisCharCode = AscB(MidB(vIn,i,1))
 If ThisCharCode < &H80 Then
 strReturn = strReturn & Chr(ThisCharCode)
 Else
 NextCharCode = AscB(MidB(vIn,i+1,1))
 strReturn = strReturn & Chr(CLng(ThisCharCode) * &H100 + CInt(NextCharCode))
 i = i + 1
 End If
 Next
bdBytes2Str = strReturn
 End Function
</SCRIPT>
[/code]