求[js歌词滚动效果]

本帖最后由 charrys 于 2011-05-18 11:12:15 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

function Hit5(lastTime,newTime)
{
var num =()newTime -lastTime)*1000;
    setTimeout(function()
    {
        $("div").innerHtml();
        Hit5(newTime,nextTime);
    },
    num
    );
}
思路是这样,但是没想好该怎么把歌词传递进来, 哥们一起想想
记录开始时间，然后用setTimeout间隔100毫秒或者10毫秒执行查看过去了多少时间，然后判断该显示那条歌词
LZ参考下:
http://topic.csdn.net/u/20101209/13/4d96a12e-242e-429c-9161-144ba8a467a2.html
滚动  高亮么?那样的话你可以控制在方法外设置一个变量
然后每次执行一次setTimeout的时候在里面+1每一条歌词作为一个div
然后执行setTimeout的时候对应的div改变一下样式
其实后来我又改进了,不过要懂点java知识了,因为我用到后台服务了.
还是参考下吧:
http://topic.csdn.net/u/20110107/19/7427a7df-ea1f-4c70-997b-fa44261f42bb.html
IE ONLY
<html> <head>
<meta http-equiv=Content-Type content=text/html; charset=GB2312>
<title>歌词同步</title>
<style>

</style>
<script language="javascript">
var scrollt=0;
var tflag=0;//存放时间和歌词的数组的下标
var lytext=new Array();//放存汉字的歌词
var lytime=new Array();//存放时间
var delay=10;
var line=0;
var scrollh=0;
function getLy(){//取得歌词
  var ly="[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]music again……."
  return ly;
}function show(t){//显示歌词
  var div1=document.getElementById("lyr");//取得层
  document.getElementById("lyr").innerHTML=" ";//每次调用清空以前的一次
  if(t <lytime[lytime.length-1]){//先舍弃数组的最后一个
    for(var k=0;k <lytext.length;k++){
      if(lytime[k] <=t&&t <lytime[k+1]){
        scrollh=k*25;//让当前的滚动条的顶部改变一行的高度
        div1.innerHTML+=" <font color=red style=font-weight:bold>"+lytext[k]+" </font> <br>";
      }
      else if(t <lytime[lytime.length-1])//数组的最后一个要舍弃
        div1.innerHTML+=lytext[k]+" <br>";
    }
  }
  else{//加上数组的最后一个
    for(var j=0;j <lytext.length-1;j++)
      div1.innerHTML+=lytext[j]+" <br>";
      div1.innerHTML+=" <font color=red style=font-weight:bold>"+lytext[lytext.length-1]+" </font> <br>";
  }
}function scrollBar(){//设置滚动条的滚动
  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);
}function getReady(){//在显示歌词前做好准备工作
  var ly=getLy();//得到歌词
//alert(ly);
  var arrly=ly.split(".");//转化成数组
  for(var i=0;i <arrly.length;i++)
    sToArray(arrly[i]);
sortAr();
/*
for(var j=0;j <lytext.length;j++){
  document.getElementById("lyr").innerHTML+=lytime[j]+lytext[j]+" <br>";
}
*/
scrollBar();
}function sToArray(str){//解析如“[02:02][00:24]没想到是你”的字符串前放入数组
  var left=0;//"["的个数
  var leftAr=new Array();
  for(var k=0;k <str.length;k++){
    if(str.charAt(k)=="["){
      leftAr[left]=k;
      left++;
    }
  }
  if(left!=0){
    for(var i=0;i <leftAr.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));
}function sortAr(){//按时间重新排序时间和歌词的数组
  var temp=null, temp1=null;
  for(var k=0;k <lytime.length;k++){
    for(var j=0;j <lytime.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;
      }
    }
  }
}
function conSeconds(t){//把形如：01：25的时间转化成秒；
  var m=t.substring(0,t.indexOf(":"));
  var s=t.substring(t.indexOf(":")+1);
  s=parseInt(s.replace(/\b(0+)/gi,""));
  if(isNaN(s)) s=0;
  var totalt=parseInt(m)*60+s;
//alert(parseInt(s.replace(/\b(0+)/gi,"")));
  if(isNaN(totalt)) return 0;
  return totalt;
}function getSeconds(){//得到当前播放器播放位置的时间
  var t=getPosition();
  t=t.toString();//数字转换成字符串
  var s=t.substring(0,t.lastIndexOf("."));//得到当前的秒
//alert(s);
  return s;
}function getPosition(){//返回当前播放的时间位置
  var mm=document.getElementById("MediaPlayer1");
  //var mmt=;
  //alert(mmt);
  return mm.CurrentPosition;
}function mPlay(){//开始播放
  var ms=parseInt(getSeconds());
  if(isNaN(ms))
    show(0);
  else
    show(ms);
  window.setTimeout("mPlay()",100)
}window.setTimeout("mPlay()",100);function test(){//测试使用，
  alert(lytime[lytime.length-1]);
}
</script>
</head>
<body onLoad="getReady()">
<object id="MediaPlayer1" width="460" height="68" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
align="baseline" border="0" standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<param name="FileName" value="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3">
<param name="ShowControls" value="1">
<param name="ShowPositionControls" value="0">
<param name="ShowAudioControls" value="1">
<param name="ShowTracker" value="1"><param name="ShowDisplay" value="0">
<param name="ShowStatusBar" value="1">
<param name="AutoSize" value="0">
<param name="ShowGotoBar" value="0">
<param name="ShowCaptioning" value="0">
<param name="AutoStart" value="1">
<param name="PlayCount" value="0">
<param name="AnimationAtStart" value="0">
<param name="TransparentAtStart" value="0">
<param name="AllowScan" value="0">
<param name="EnableContextMenu" value="1">
<param name="ClickToPlay" value="0">
<param name="InvokeURLs" value="1">
<param name="DefaultFrame" value="datawindow">
<embed src="http://data1.act3.qq.com/2008-09-02/13/d930d8efa0b39f0c9c90bf4bc7010586.mp3" align="baseline" border="0" width="460" height="68"
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin&"
name="MediaPlayer" showcontrols="1" showpositioncontrols="0"
showaudiocontrols="1" showtracker="1" showdisplay="0"
showstatusbar="1"
autosize="0"
showgotobar="0" showcaptioning="0" autostart="1" autorewind="0"
animationatstart="0" transparentatstart="0" allowscan="1"
enablecontextmenu="1" clicktoplay="0" invokeurls="1"
defaultframe="datawindow">
</embed>
</object><div id=lyr class=div>歌词加载中…… </div>
</body>
</html>
怎么又沉了。。
我用这句来控制滚动位置的
不知道有没有错
$2("lrc_detail").scrollTop=atime*20; //atime是第N行，20是行高.