网上找到的播放+歌词,歌词中时间格式为[00:00],我想改成目前通用的[00:00.00],怎么改才好。谢谢。555。=================================Orig Code:
<html><head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>音乐歌词同步测试</title>
<style>
<!--
.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;
}
-->
</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;
var 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> 

解决方案 »

  1.   

    这样的?
    <html> <head> 
    <meta http-equiv=Content-Type content=text/html; charset=utf-8> 
    <title>音乐歌词同步测试 </title> 
    <style> 
    <!-- 
    .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; 

    --> 
    </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() //取得歌词 
    {
    ly = "[00:00:00]21个人.[00:00:10]制作:小黑.[00:00:20]歌手:游鸿明.[00:02:02][00:00:24]没想到是你.[00:00:29]看着,想着,说着失去.[00:02:12][00:00:35]想结束关系,又觉得可惜.[00:02:20][00:00:44]你红着双眼,试着,做着,想着改变. [00:02:30][00:00:54]但激情沉淀,结局更明显.[00:02:41][00:01:04]我看过温柔凋萎.[00:02:46][00:01:09]也听过诺言. [00:02:48][00:01:11]似玻璃破碎.[00:02:50][00:01:14]我看过情人憔悴.[00:02:56][00:01:19]就好像刺猬为分离流泪. [00:03:00][00:01:23]伤心人负心人.[00:03:03][00:01:26]天下人痴情人.[00:03:05][00:01:28]只要是被伤心的人喝一杯. [00:01:33]自已人爱别人.[00:01:36]什么人狠心人.[00:01:38]不要再等,喝醉的灵魂.[00:03:46][00:01:45]music……. [00:02:06]谈著想著说著失去.[00:03:10]自已人爱别人.[00:03:12]什么人狠心人.[00:03:15]不要再等.[00:03:18]喝醉的灵魂. [00:03:56][00:03:23]多情人无心人.[00:03:59][00:03:25]无情人多伤人.[00:04:01][00:03:28]只要是被伤心的人喝一杯. [00:04:06][00:03:32]有心人无缘人.[00:04:08][00:03:34]有缘人断肠人.[00:04:11][00:03:37]何必再问新人换旧人. [00: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] + 9)); //放时间 
                tflag++;
            }
        }
        //alert(str.substring(leftAr[0]+1,leftAr[0]+6)); 
    }
    function sortAr() //按时间重新排序时间和歌词的数组 
    {
        var temp = null;
        var 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的时间转化成秒; 
    {
    v = 0;
    if(/(\d+):(\d+):(\d+)/.test(t)){
    v = parseInt(RegExp.$1,10) * 3600 + parseInt(RegExp.$2, 10) * 60 + parseInt(RegExp.$3, 10);;
    }
    return v;
    }
    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.   


    <html> <head> 
    <meta http-equiv=Content-Type content=text/html; charset=utf-8> 
    <title>音乐歌词同步测试 </title> 
    <style> 
    <!-- 
    .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; 

    --> 
    </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.000]21个人.[00:10.0]制作:小黑.[00:20.00]歌手:游鸿明.[02:02.00][00:24.00]没想到是你.[00:29.00]看着,想着,说着失去.[02:12.00][00:35.00]想结束关系,又觉得可惜.[02:20.00][00:44.00]你红着双眼,试着,做着,想着改变. [02:30.00][00:54.00]但激情沉淀,结局更明显.[02:41.00][01:04.00]我看过温柔凋萎.[02:46.00][01:09.00]也听过诺言. [02:48.00][01:11.00]似玻璃破碎.[02:50.00]][01:14.00]我看过情人憔悴.[02:56.00][01:19.00]就好像刺猬为分离流泪. [03:00.00][01:23.00]伤心人负心人.[03:03.00][01:26.00]天下人痴情人.[03:05.00][01:28.00]只要是被伤心的人喝一杯. [01:33.00]自已人爱别人.[01:36.00]什么人狠心人.[01:38.00]不要再等,喝醉的灵魂.[03:46.00][01:45.00]music……. [02:06.00]谈著想著说著失去.[03:10.00]自已人爱别人.[03:12.00]什么人狠心人.[03:15.00]不要再等.[03:18.00]喝醉的灵魂. [03:56.00][03:23.00]多情人无心人.[03:59.00][03:25.00]无情人多伤人.[04:01.00][03:28.00]只要是被伤心的人喝一杯. [04:06.00][03:32.00]有心人无缘人.[04:08.00][03:34.00]有缘人断肠人.[04:11.00][03:37.00]何必再问新人换旧人. [04:20.00]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(/\.[^\d]/); //转化成数组 
        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, str.indexOf("]", leftAr[i]))); //放时间 
    tflag++;
            }
        }
        //alert(str.substring(leftAr[0]+1,leftAr[0]+6)); 
    }
    function sortAr() //按时间重新排序时间和歌词的数组 
    {
        var temp = null;
        var 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的时间转化成秒; 
    {
    v = 0;
    if(/(\d+):(\d+)\.(\d+)/.test(t)){
    v = parseInt(RegExp.$1,10) * 60 + parseInt(RegExp.$2, 10) + parseInt(RegExp.$3) / 1000;
    }
    return v;
    }
    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> 
      

  3.   

    这个呢?
    <html> <head> 
    <meta http-equiv=Content-Type content=text/html; charset=utf-8> 
    <title>音乐歌词同步测试 </title> 
    <style> 
    <!-- 
    .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; 

    --> 
    </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.000]21个人.[00:10.0]制作:小黑.[00:20.00]歌手:游鸿明.[02:02.00][00:24.00]没想到是你.[00:29.00]看着,想着,说着失去.[02:12.00][00:35.00]想结束关系,又觉得可惜.[02:20.00][00:44.00]你红着双眼,试着,做着,想着改变. [02:30.00][00:54.00]但激情沉淀,结局更明显.[02:41.00][01:04.00]我看过温柔凋萎.[02:46.00][01:09.00]也听过诺言. [02:48.00][01:11.00]似玻璃破碎.[02:50.00]][01:14.00]我看过情人憔悴.[02:56.00][01:19.00]就好像刺猬为分离流泪. [03:00.00][01:23.00]伤心人负心人.[03:03.00][01:26.00]天下人痴情人.[03:05.00][01:28.00]只要是被伤心的人喝一杯. [01:33.00]自已人爱别人.[01:36.00]什么人狠心人.[01:38.00]不要再等,喝醉的灵魂.[03:46.00][01:45.00]music……. [02:06.00]谈著想著说著失去.[03:10.00]自已人爱别人.[03:12.00]什么人狠心人.[03:15.00]不要再等.[03:18.00]喝醉的灵魂. [03:56.00][03:23.00]多情人无心人.[03:59.00][03:25.00]无情人多伤人.[04:01.00][03:28.00]只要是被伤心的人喝一杯. [04:06.00][03:32.00]有心人无缘人.[04:08.00][03:34.00]有缘人断肠人.[04:11.00][03:37.00]何必再问新人换旧人. [04:20.00]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(); //得到歌词 
        var arrly = ly.split(/\.[^\d]/); //转化成数组     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();
    str = "[" + str.replace(/^\s*\[/, "");    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, str.indexOf("]", leftAr[i]))); //放时间 
    tflag++;
            }
        }
        //alert(str.substring(leftAr[0]+1,leftAr[0]+6)); 
    }
    function sortAr() //按时间重新排序时间和歌词的数组 
    {
        var temp = null;
        var 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的时间转化成秒; 
    {
    v = 0;
    if(/(\d+):(\d+)\.(\d+)/.test(t)){
    v = parseInt(RegExp.$1,10) * 60 + parseInt(RegExp.$2, 10) + parseInt(RegExp.$3) / 1000;
    }
    return v;
    }
    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> 
      

  4.   

    雾水雾水
    1、歌词似乎慢了一拍;
    2、如果置换成其它内容,例如歌词如下(现在的歌词lrc基本都是如下格式):
    [00:00.00]歌词段一[00:05:00]歌段词二[00:08.00]歌词段三[00:10.00]歌词
    会显示错误
      

  5.   

    我最开始的意思就是要支持显示这样的格式(网上的lrc文件都是这样的格式):[分:秒:毫秒*10]歌词行。55555。
      

  6.   

    网上得来的lrc文件应该是以\n换行的.
    <html> <head> 
    <meta http-equiv=Content-Type content=text/html; charset=utf-8> 
    <title>音乐歌词同步测试 </title> 
    <style> 
    <!-- 
    .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; 

    --> 
    </style> 
    <textarea id="lyc" rows="3" cols="90">
    [00:00.00]21个人
    [00:06.00]演唱:游鸿明
    [02:00.00][00:24.00]没想到是你 谈着想着说着失去
    [02:09.00][00:32.00]想结束关系 又觉得可惜
    [02:19.00][00:42.00]你红着双眼 试着做着想着改变
    [02:28.00][00:51.00]但激情沉淀 结局更明显
    [02:40.00][01:02.00]我看过温柔凋萎
    [02:45.00][01:07.00]也听过诺言 似玻璃破碎
    [02:50.00][01:13.00]我看过情人憔悴
    [02:54.00][01:17.00]就好像刺 为分离流泪
    [03:00.00][01:22.00]伤心人 负心人 天下人 痴情人
    [03:05.00][01:27.00]只要是被伤心的人喝一杯
    [03:09.00][01:32.00]自已人 爱别人 什么人 狠心人
    [03:14.00][01:37.00]不要再等 喝醉的灵魂
    [03:55.00][03:21.00]多情人 无心人 无情人 多伤人
    [04:01.00][03:26.00]只要是被伤心的人喝一杯
    [04:05.00][03:31.00]有心人 无缘人 有缘人 断肠人
    [04:11.00][03:36.00]何必再问 新人换旧人
    </textarea>
    <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.000]21个人.[00:10.0]制作:小黑.[00:20.00]歌手:游鸿明.[02:02.00][00:24.00]没想到是你.[00:29.00]看着,想着,说着失去.[02:12.00][00:35.00]想结束关系,又觉得可惜.[02:20.00][00:44.00]你红着双眼,试着,做着,想着改变. [02:30.00][00:54.00]但激情沉淀,结局更明显.[02:41.00][01:04.00]我看过温柔凋萎.[02:46.00][01:09.00]也听过诺言. [02:48.00][01:11.00]似玻璃破碎.[02:50.00]][01:14.00]我看过情人憔悴.[02:56.00][01:19.00]就好像刺猬为分离流泪. [03:00.00][01:23.00]伤心人负心人.[03:03.00][01:26.00]天下人痴情人.[03:05.00][01:28.00]只要是被伤心的人喝一杯. [01:33.00]自已人爱别人.[01:36.00]什么人狠心人.[01:38.00]不要再等,喝醉的灵魂.[03:46.00][01:45.00]music……. [02:06.00]谈著想著说著失去.[03:10.00]自已人爱别人.[03:12.00]什么人狠心人.[03:15.00]不要再等.[03:18.00]喝醉的灵魂. [03:56.00][03:23.00]多情人无心人.[03:59.00][03:25.00]无情人多伤人.[04:01.00][03:28.00]只要是被伤心的人喝一杯. [04:06.00][03:32.00]有心人无缘人.[04:08.00][03:34.00]有缘人断肠人.[04:11.00][03:37.00]何必再问新人换旧人. [04:20.00]music again……." ;
    var ly = document.getElementById("lyc").value;
    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(); //得到歌词 
        var arrly = ly.split("\n");//ly.split(/\.[^\d]/); //转化成数组     for (var i = 0; i < arrly.length; i++)
        sToArray(arrly[i]);
        sortAr();
        scrollBar();
    }
    function sToArray(str) //解析如“[02:02][00:24]没想到是你”的字符串前放入数组 
    {
        var left = 0; //"["的个数 
        var leftAr = new Array();
    str = "[" + str.replace(/^\s*\[/, "");
    if(str.length < 6) return;

        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, str.indexOf("]", leftAr[i]))); //放时间 
    tflag++;
            }
        }
        //alert(str.substring(leftAr[0]+1,leftAr[0]+6)); 
    }
    function sortAr() //按时间重新排序时间和歌词的数组 
    {
        var temp = null;
        var 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的时间转化成秒; 
    {
    v = 0;
    if(/(\d+):(\d+)\.(\d+)/.test(t)){
    v = parseInt(RegExp.$1,10) * 60 + parseInt(RegExp.$2, 10) + parseInt(RegExp.$3) / 1000;
    }
    return v;
    }
    function getSeconds() //得到当前播放器播放位置的时间 
    {
        var t = getPosition();
        t = t.toString(); //数字转换成字符串 
        var s = t.substring(0, t.lastIndexOf(".")); //得到当前的秒 
        return s;
    }
    function getPosition() //返回当前播放的时间位置 
    {
        var mm = document.getElementById("MediaPlayer1");
        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>