JS实现滚动歌词-带高亮当前歌词

JS实现滚动歌词，带高亮当前歌词htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8title音乐歌词同步测试/titlestyle!--.div{width:460px;height:200px;overflow-y:scroll;padding-top:80px;text-align:left;padding-left:100px;line-height:25px;font-size:13px;padding-bottom:50px;}--/stylescriptlanguage=javascriptvarscrollt=0;vartflag=0;//存放时间和歌词的数组的下标varlytext=newArray();//放存汉字的歌词varlytime=newArray();//存放时间vardelay=10;varline=0;varscrollh=0;functiongetLy()//取得歌词{varly=[00:00]21个人.[00:10]制作:小黑.[00:20]歌手:游鸿明.[02:02][00:24]没想到是你.[00:29]看着，想着，说着失去.[02:12][00:35]想结束关系，又觉得可惜.[02:20][00:44]你红着双眼，试着，做着，想着改变.[02:30][00:54]但激情沉淀，结局更明显.[02:41][01:04]我看过温柔凋萎.[02:46][01:09]也听过诺言.[02:48][01:11]似玻璃破碎.[02:50]][01:14]我看过情人憔悴.[02:56][01:19]就好像刺猬为分离流泪.[03:00][01:23]伤心人负心人.[03:03][01:26]天下人痴情人.[03:05][01:28]只要是被伤心的人喝一杯.[01:33]自已人爱别人.[01:36]什么人狠心人.[01:38]不要再等,喝醉的灵魂.[03:46][01:45]music…….[02:06]谈著想著说著失去.[03:10]自已人爱别人.[03:12]什么人狠心人.[03:15]不要再等.[03:18]喝醉的灵魂.[03:56][03:23]多情人无心人.[03:59][03:25]无情人多伤人.[04:01][03:28]只要是被伤心的人喝一杯.[04:06][03:32]有心人无缘人.[04:08][03:34]有缘人断肠人.[04:11][03:37]何必再问新人换旧人.[04:20]musicagain…….returnly;}functionshow(t)//显示歌词{vardiv1=document.getElementById(lyr);//取得层document.getElementById(lyr).innerHTML=;//每次调用清空以前的一次if(tlytime[lytime.length-1])//先舍弃数组的最后一个{for(vark=0;klytext.length;k++){if(lytime[k]=t&&tlytime[k+1]){scrollh=k*25;//让当前的滚动条的顶部改变一行的高度div1.innerHTML+=fontcolor=redstyle=font-weight:bold+lytext[k]+/fontbr;}elseif(tlytime[lytime.length-1])//数组的最后一个要舍弃div1.innerHTML+=lytext[k]+br;}}else//加上数组的最后一个{for(varj=0;jlytext.length-1;j++)div1.innerHTML+=lytext[j]+br;div1.innerHTML+=fontcolor=redstyle=font-weight:bold+lytext[lytext.length-1]+/fontbr;}}functionscrollBar()//设置滚动条的滚动{if(document.getElementById(lyr).scrollTop=scrollh)document.getElementById(lyr).scrollTop+=1;if(document.getElementById(lyr).scrollTop=scrollh+50)document.getElementById(lyr).scrollTop-=1;window.setTimeout(scrollBar(),delay);}functiongetReady()//在显示歌词前做好准备工作{varly=getLy();//得到歌词//alert(ly);vararrly=ly.split(.);//转化成数组for(vari=0;iarrly.length;i++)sToArray(arrly[i]);sortAr();/*for(varj=0;jlytext.length;j++){document.getElementById(lyr).innerHTML+=lytime[j]+lytext[j]+br;}*/scrollBar();}functionsToArray(str)//解析如“[02:02][00:24]没想到是你”的字符串前放入数组{varleft=0;//[的个数varleftAr=newArray();for(vark=0;kstr.length;k++){if(str.charAt(k)==[){leftAr[left]=k;left++;}}if(left!=0){for(vari=0;ileftAr.length;i++){lytext[tflag]=str.substring(str.lastIndexOf(])+1);//放歌词lytime[tflag]=conSeconds(str.substring(leftAr[i]+1,leftAr[i]+6));//放时间tflag++;}}//alert(str.substring(leftAr[0]+1,leftAr[0]+6));}functionsortAr()//按时间重新排序时间和歌词的数组{vartemp=null;vartemp1=null;for(vark=0;klytime.length;k++){for(varj=0;jlytime.length-k;j++){if(lytime[j]lytime[j+1]){temp=lytime[j];temp1=lytext[j];lytime[j]=lytime[j+1];lytext[j]=lytext[j+1];lytime[j+1]=temp;lytext[j+1]=temp1;}}}}functionconSeconds(t)//把形如：01：25的时间转化成秒；{varm=t.substring(0,t.indexOf(:));vars=t.substring(t.indexOf(:)+1);s=parseInt(s.replace(/\b(0+)/gi,));if(isNaN(s))s=0;vartotalt=parseInt(m)*60+s;//alert(parseInt(s.replace(/\b(0+)/gi,)));if(isNaN(totalt))return0;returntotalt;}functiongetSeconds()//得到当前播放器播放位置的时间{vart=getPosition();t=t.toString();//数字转换成字符串vars=t.substring(0,t.lastIndexOf(.));//得到当前的秒//alert(s);returns;}functiongetPosition()//返回当前播放的时间位置{varmm=document.getElementById(MediaPlayer1);//varmmt=;//alert(mmt);returnmm.CurrentPosition;}functionmPlay()//开始播放{varms=parseInt(getSeconds());if(isNaN(ms))show(0);elseshow(ms);window.setTimeout(mPlay(),100)}window.setTimeout(mPlay(),100)functiontest()//测试使用，{alert(lytime[lytime.length-1]);}/script/headbodyonLoad=getReady()objectid=MediaPlayer1width=460height=68classid=CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95codebase==6,4,5,715align=baselineborder=0standby=LoadingMicrosoftWindowsMediaPlayercomponents...type=application/x-oleobjectparamname=FileNamevalue==ShowControlsvalue=1paramname=ShowPositionControlsvalue=0paramname=ShowAudioControlsvalue=1paramname=ShowTrackervalue=1paramname=ShowDisplayvalue=0paramname=ShowStatusBarvalue=1paramname=AutoSizevalue=0paramname=ShowGotoBarvalue=0paramname=ShowCaptioningvalue=0paramname=AutoStartvalue=1paramname=PlayCountvalue=0paramname=AnimationAtStartvalue=0paramname=TransparentAtStartvalue=0paramname=AllowScanvalue=0paramname=EnableContextMenuvalue=1paramname=ClickToPlayvalue=0paramname=InvokeURLsvalue=1paramname=DefaultFramevalue=datawindowembedsrc==baselineborder=0width=460height=68type=application/x-mplayer2pluginspage==windows&sbp=mediaplayer&ar=media&sba=plugin&name=MediaPlayershowcontrols=1showpositioncontrols=0showaudiocontrols=1showtracker=1showdisplay=0showstatusbar=1autos