JS高手帮忙啊！！！！！

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
     <title>歌曲试听</title>
     <style>
     .player_lyric1{BORDER: #ebebeb 1px solid;OVERFLOW-Y: auto; SCROLLBAR-FACE-COLOR: #ebeee4; repeat-y; OVERFLOW-X: auto; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #f5f5f5; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #ebf5ff; SCROLLBAR-3DLIGHT-COLOR: #d9d9d9; SCROLLBAR-ARROW-COLOR: #a3a49f; SCROLLBAR-TRACK-COLOR: #f5f5f5; SCROLLBAR-DARKSHADOW-COLOR: #d9d9d9; HEIGHT: 300px;width: 280px; padding:20px 5px 10px 5px;color: blue;}
     </style>
    
     <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/LyricsDwr.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'></script>
    </head>
    
    <body>
    <table width="300" align="center" border="1">
    <tr>
    <td height="64px" style="padding: 0px;">
<object id="player" classid=CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6  width="100%" height="64" align="middle">
          <param name="url" value="${param.listenpath}"> <!--${param.listenpath} 歌曲文件路径-->
          <param name="AutoStart" value="1">
          <param name="AutoRewind" value="-1">
          <param name="AnimationAtStart" value="true">
          <param name="ShowControls" value="true">
          <param name="ClickToPlay" value="false">
          <param name="EnableContextMenu" value="false">
          <param name="EnablePositionControls" value="true">
          <param name="Balance" value="0">
          <param name="ShowStatusBar" value="true">
          <param name="AutoSize" value="1">
</object>
</td>
</tr>
<c:if test="${not empty param.lycpath}">
    <tr>
    <td height="340px" valign="middle" align="center" style="padding: 0px;">
<div id="rolllrc" class="player_lyric1">
<div id="lcrList"></div>
</div>
    </td>
</tr>
</c:if>
</table>
</body>
</html>
<c:if test="${not empty param.lycpath}">
<script>
var lycpath = "${param.lycpath}"; //歌词文件路径
//同步显示歌词代码
var lrcO;  
//歌唱时间校正
var timeOffset = 0; 
//调整总时间显示
var overalltime = 0;function lrcClass(lcrdataString)
{
this.lineDataArray = [];
this.oTime = 0;
this.lineStartSecond = -1;
this.lineEndSecond = -1;
this.correntLineNumber = -1;
this.lineSecondsArray;
this.lineCharsWidthArray;
//lrcbc.style.width = 0;

if(/\[offset\:(\-?\d+)\]/i.test(lcrdataString))
this.oTime = RegExp.$1/1000;

lcrdataString = lcrdataString.replace(/\[\:\][^$\n]*(\n|$)/g,"$1");
lcrdataString = lcrdataString.replace(/\[[^\[\]\:]*\]/g,"");
lcrdataString = lcrdataString.replace(/\[[^\[\]]*[^\[\]\d]+[^\[\]]*\:[^\[\]]*\]/g,"");
lcrdataString = lcrdataString.replace(/\[[^\[\]]*\:[^\[\]]*[^\[\]\d\.]+[^\[\]]*\]/g,"");
lcrdataString = lcrdataString.replace(/<[^<>]*[^<>\d]+[^<>]*\:[^<>]*>/g,"");
lcrdataString = lcrdataString.replace(/<[^<>]*\:[^<>]*[^<>\d\.]+[^<>]*>/g,"");

while(/\[[^\[\]]+\:[^\[\]]+\]/.test(lcrdataString))
{
lcrdataString = lcrdataString.replace(/((\[[^\[\]]+\:[^\[\]]+\])+[^\[\r\n]*)[^\[]*/,"\n");
//得到一行歌词数据
var lcrLineString = RegExp.$1;

/^(.+\])([^\]]*)$/.exec(lcrLineString); 
//得到这一行的 歌词
var charsTimeString = RegExp.$2;
//得到这一行的歌词显示时间
var lineTimeArray = RegExp.$1.slice(1,-1).split("][");
for(var x=0; x<lineTimeArray.length; x++)
{
//截取到显示的时间放到数组里
var lineTimeMinAndSec = lineTimeArray[x].split(":"); //00:25.20
//把总时间换算成秒
var second = parseInt(lineTimeMinAndSec[0],10) * 60 + parseFloat(lineTimeMinAndSec[1]);
//t:[]是存放歌词显示时间 n:charsTimeString是存放当前时间要显示的歌词 w[]没发现有什么用？？
var lineData = { t:[] , w:[] , n:charsTimeString }
// t[0] 每行歌词显示的总秒数
lineData.t[0] = second-this.oTime;
this.lineDataArray[this.lineDataArray.length] = lineData;
}
}

this.lineDataArray = this.lineDataArray.sort( function(a,b){return a.t[0]-b.t[0];});

this.showLrc = function()
{
var divHTML = "<div id=\"lcrList\" >";
for(x=0;x<this.lineDataArray.length; x++)
divHTML += (x==0)?"<span id='lrcbox_'"+x+" style='float:left;height:15px;color:#333333;width:250px;overflow:hidden; white-space:nowrap; -o-text-overflow:ellipsis;text-overflow:ellipsis;' >" +this.lineDataArray[x].n + "</span><br/>":"<span id='lrcbox_'"+x+" style='float:left;height:15px;color:#8C8C8C;width:250px;overflow:hidden; white-space:nowrap; -o-text-overflow:ellipsis;text-overflow:ellipsis;' >" +this.lineDataArray[x].n + "</span><br/>";
document.getElementById("lcrList").innerHTML = divHTML + "</div>";
document.all.rolllrc.scrollTop= this.correntLineNumber * 18;
}

//加载要显示的内容
this.run = function(playTimeSecond)
{
if(playTimeSecond<this.lineStartSecond || playTimeSecond>=this.lineEndSecond)
{
var ii;
//找到要显示的行
for(ii=this.lineDataArray.length-1; ii>=0 && this.lineDataArray[ii].t[0]>playTimeSecond; ii--)
{
}
if(ii<0)
{
return;
}
this.lineSecondsArray = this.lineDataArray[ii].t;
this.lineCharsWidthArray = this.lineDataArray[ii].w;
this.lineStartSecond = this.lineDataArray[ii].t[0];
this.lineEndSecond = (ii<this.lineDataArray.length-1)?this.lineDataArray[ii+1].t[0]:player.currenplayTimeSeconddia.duration;
if(this.correntLineNumber==ii-1)
{
this.rollshowlrc()
}
this.correntLineNumber = ii;
}
}

this.rollshowlrc = function()
{
for(x=0;x<this.lineDataArray.length; x++)
{
if (x-1== this.correntLineNumber)
{
var spans1 = document.getElementById("lcrList").getElementsByTagName("span");
spans1[x].style.color = "green";

//设置span 高度为15px 每次移动15px的 高度，下面的判断是 保证从第4行开始滚动条才开始滚动
if(this.correntLineNumber >= 3)
{
document.all.rolllrc.scrollTop= (this.correntLineNumber-3) * 15;
}
}
else
{
var spans2 = document.getElementById("lcrList").getElementsByTagName("span");
spans2[x].style.color = "#8C8C8C";
}
}
}
}var lrcobj = new lrcClass("");
var lrcRoll_timeid = null;
function lrcrun()
{
lrcRoll_timeid = setInterval("lrcRoll()",10);  //数据还未过来，设置0.01秒调一次lrcRoll() 显示方法
}
var flaglrc = true;
function lrcRoll()
{
if(player.currentMedia != null)
{
if(flaglrc)
{
lrcobj.showLrc();
flaglrc = false;
}
if(!flaglrc)
lrcobj.run(player.controls.currentPosition + timeOffset);
}
}//通过LyricsDwr.loadLrcAndPath（）方法获取歌词信息，${param.lycpath}为歌词文件路径，把得到的歌词数据拿出来 lrcobj = new lrcClass(data); 就OK了。
if(lycpath != null)
LyricsDwr.loadLrcAndPath("${param.lycpath}",function (data){
if(data != null && data != ""){
flaglrc = true;
lrcobj = new lrcClass(data); 
    lrcrun();
}
else
lcrList.innerHTML = "上传的歌词为空!";
});
else
lcrList.innerHTML = "没有歌词!";
</script>
</c:if>

解决方案 »

  1.   

    楼上的用什么语言写的，我用ASP。NET C#
      

  2.   

    回3楼
    我用的是JSP，看来还是不符合你的要求啊。不过你要是对JSP有所了解的话，你可以看看也许对你也有帮助。
    因为我的项目中我做的就是播放器，此功能我已经实现，个人觉得也很完美；总共写了2000多行的代码，我只是把歌词显示的这部分代码粘贴出来而已，其实还有很多呢。