歌詞編輯器和選擇歌曲可播放的網(wǎng)頁

更新時(shí)間：2007年03月06日 00:00:00 作者：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>歌詞編輯器</title> <style type="text/css">  </style></head> <body> <p>歌詞編輯器</p> <p> 　　　　第一步：選擇要播放的歌曲并播放</p> <p>　　　　第二步：填寫全部的歌詞。</p> <p>　　　　第三步：添加時(shí)間標(biāo)簽。</p> <p> 添加時(shí)間標(biāo)記目的</p> <p>　　　　1、添加時(shí)間標(biāo)簽(插入到光標(biāo)處)　　　 </p> <p>　　　　2、轉(zhuǎn)到下一行(光標(biāo)轉(zhuǎn)到下一個(gè)回車地方，當(dāng)最后一個(gè)位置不為回車符時(shí)，直接將光標(biāo)移到文本末尾)　</p> <p>刪除時(shí)間標(biāo)記算法：（刪除光標(biāo)所在行的時(shí)間標(biāo)記）</p> <p>刪除所有時(shí)間標(biāo)記算法：（替換所有的時(shí)間標(biāo)記為空）</p> <p>1、匹配時(shí)間標(biāo)記</p> <p>2、替換</p> <p>播放器</p> 　　　　 <object classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" id="player" width="480" height="240"> <param name="volume" value="100"> <param name="enablecontextmenu" value="0"> <param name="enableerrordialogs" value="0"> </object> <p>　　　　選擇歌曲：   <input type="file" name="file" onChange="PlayFile(this.value)"> </p> <p>歌曲信息</p> <p>    　　　　歌曲名：<span id="musicName" style="height:20">播放后顯示</span></p> <p>添加歌詞（建議：第一步填寫歌詞文本；第二步添加時(shí)間標(biāo)簽）</p> <p>　　　　 演唱者：   <input name="singer" type="text" id="singer"> </p> <p>　　　　 標(biāo)　題：   <input name="title" type="text" id="title"> </p> <p>　　　　 編輯人：   <input name="pepole" type="text" id="pepole"> </p> <p>　　　　 ?！≥嫞?   <input name="sing" type="text" id="sing"> </p> <p> 　　　　 內(nèi)　容： </p> <p>     　　　　       <textarea name="text" cols="50" rows="10" id="lrc"  onChange="storeCaret(this)" onKeyUp="storeCaret(this)" onClick="storeCaret(this)"></textarea> </p>   <p>     　　　　       <input id="a" type="button" name="Submit" value="添加時(shí)間標(biāo)簽" onClick="insertAtCaret(document.all('lrc'), 'hlayy');">     <input  id="c" type="button" name="Submit2" value="刪除時(shí)間標(biāo)簽" onClick="delTimeLable()">     <input type="button" name="Submit3" value="刪除所有時(shí)間標(biāo)簽" id="b" onClick="delAllTimeLable()"> </p>   <p>生成歌詞　 </p>   <p> 　　　　         <textarea name="last" cols="50" rows="10" id="lastLrc" readonly="true"></textarea> </p>   <p>　　　　     <input type="button" name="Submit4" value="點(diǎn)擊此處生成歌詞" onClick="lastLrc();">     <input type="button" name="Submit5" value="全選" onClick="document.all('lastLrc').select();">    </p>   <p>快捷鍵：（方便添加歌詞）</p>   <p>　　　　1、播放歌曲</p>   <p>　　　　2、停止播放</p>   <p>　　　　3、暫停播放</p> <p>｜　版權(quán)：HLAYY?。∽髡撸篐LAYY?。÷?lián)系QQ：42263646   <script language="javascript">   function lastLrc()   {      /*      [ti:一直很安靜]     [ar:阿桑]     [al:仙劍奇?zhèn)b傳電視原聲帶]     [by:hlayy]     */            document.all("lastLrc").value="[ti:"+document.all("title").value+"]\r"+                                 　"[ar:"+document.all('singer').value+"]\r"+                                   "[al:"+document.all('sing').value+"]\r"+                                   "[by:"+document.all('pepole').value+"]\r"+                                   document.all('lrc').value;                                          }      function storeCaret(textEl) {          if (textEl.createTextRange)           textEl.caretPos = document.selection.createRange().duplicate(); //創(chuàng)建一個(gè)文本區(qū)域的副本          var slct = document.selection;      var rng = slct.createRange();           textEl.select();      rng.setEndPoint("StartToStart", slct.createRange());                 psn = rng.text.length; //psn:光標(biāo)的位置                 rng.collapse(false);      rng.select();       } function findNext(value) {     //選擇范圍：以光標(biāo)所在處為開始。以文本尾為結(jié)束     //在范圍內(nèi)搜索指定的符號     //i=光標(biāo)開始處     //for(i;i<文本長度;i++)         //if(value==charAt(i))         //break;         //核心問題：當(dāng)為回車時(shí)臨近的兩個(gè)坐標(biāo)會顯示同一值，所以，判斷光標(biāo)所在位置是否為'回車'符。         //如果是，則在判斷時(shí)把光標(biāo)的位置向右移一，即：加一。         var textLength=document.all("lrc").value;         var i=psn;//光標(biāo)的位置         var j=0;//在光標(biāo)前出現(xiàn)回車的次數(shù)         var z=0;//臨時(shí)變量                           if(value==textLength.charAt(i))     i=i+1;         // document.all("b").value=textLength.charAt(i);     //else     // document.all("b").value=textLength.charAt(i);                    for(z;z<i;z++)         {         if(value==textLength.charAt(z))              ++j;                               }              for(i;i<textLength.length;i++)         {          if(value==textLength.charAt(i))          {             movePoint(i-j+1);             //document.all("a").value="zhixing";              break;                        }                           }         //document.all("c").value=textLength.length;         //document.all("b").value=i;         if(i==textLength.length&&value!=textLength.charAt(i))         movePoint(textLength.length);         //document.write('yes');             } function PlayFile(url) {   player.url = url;//歌曲地址（"player"為播放器ID）   player.controls.play();//播放歌曲   musicName.innerText=player.currentMedia.getItemInfo("Title");//顯示歌曲信息（歌曲名） } function movePoint(value)  {  var pn = parseInt(value); //pn:移動到的位置 if(isNaN(pn))  return;  var rng = lrc.createTextRange(); //lrc:文本區(qū)域的ID； rng.moveStart("character",pn);  rng.collapse(true);  rng.select();  }   function insertAtCaret (textEl, text) {        if (textEl.createTextRange && textEl.caretPos&&player.controls.currentPositionString!="")//當(dāng)播放進(jìn)度不為空，即：開始播放后      {     var caretPos = textEl.caretPos;     caretPos.text="["+player.controls.currentPositionString+".00]";              findNext("\r");   } else             alert('請先播放歌曲或者填寫歌詞文本！');     //textEl.value = "";        }       function delAllTimeLable()   {   /*算法：  Ł、分離換行符  ł、找到時(shí)間標(biāo)記并刪除         */          var originLrc=document.all("lrc").value;        var last_Lrc;        last_Lrc=originLrc.split("\n");        var z=0;        //document.all("a").value=originLrc.length;        //document.all("c").value=last_Lrc.length;        //document.all("b").value=psn;                      for(z;z<last_Lrc.length;z++)        {        //last_Lrc[z]=last_Lrc[z].substring((last_Lrc[z].lastIndexOf("]"))+1,last_Lrc[z].length);       var start=last_Lrc[z].lastIndexOf("]")+1;       var end=last_Lrc[z].length;       last_Lrc[z]=last_Lrc[z].substring(start,end);        }                                document.all("lrc").value="";                var t=0;        for(t;t<last_Lrc.length;t++)        {        if(t!=last_Lrc.length-1)        document.all("lrc").value+=last_Lrc[t]+"\n";        else               document.all("lrc").value+=last_Lrc[t];                //document.all("b").value=document.all("lrc").value.length;        }   }      function delTimeLable()   {   /*算法：   找到上一個(gè)時(shí)間標(biāo)記并且刪除     Ł、分離每行并存入數(shù)組；     ł、判斷光標(biāo)在哪個(gè)數(shù)組里；           取得光標(biāo)位置           光標(biāo)前有多少個(gè)回車符可以得到在第幾個(gè)數(shù)組     Ń、判斷前面有或者沒有時(shí)間標(biāo)記     如果有刪除     如果沒有則保持不變            */                       var caretPoss = (document.all("lrc")).caretPos;     caretPoss.text=" ";                     var textLength=document.all("lrc").value;         var i=psn;//光標(biāo)的位置         var j=0;//在光標(biāo)前出現(xiàn)回車的次數(shù)         var z=0;//臨時(shí)變量                          var originLrc=document.all("lrc").value;        var last_Lrc;        last_Lrc=originLrc.split("\n");          if('\r'==textLength.charAt(i))     i=i+1;                    for(z;z<i;z++)         {         if('\r'==textLength.charAt(z))              ++j;                               }                  var start=last_Lrc[j].lastIndexOf("]");         if(start!=-1)         last_Lrc[j]=last_Lrc[j].substring(start+1,last_Lrc[j].length);                           //去掉空格         var start_1=last_Lrc[j].lastIndexOf(" ");         if(start_1!=-1)         {         if(start_1==0)//如果在開頭         last_Lrc[j]=last_Lrc[j].substring(start_1+1,last_Lrc[j].length);         else if(start_1==last_Lrc[j].length-1)//如果在結(jié)尾         last_Lrc[j]=last_Lrc[j].substring(0,last_Lrc[j].length-1);         else//如果在中間         last_Lrc[j]=last_Lrc[j].substring(0,start_1)+last_Lrc[j].substring(start_1+1,last_Lrc[j].length);         }                                                    document.all("lrc").value="";//清除文本區(qū)域內(nèi)容       //輸出最后的內(nèi)容                var t=0;        for(t;t<last_Lrc.length;t++)        {        if(t!=last_Lrc.length-1)        document.all("lrc").value+=last_Lrc[t]+"\n";        else               document.all("lrc").value+=last_Lrc[t];        }         }   //文本框按回車鍵產(chǎn)生的字符為'\r\n'；   </script>　   ｜　時(shí)間：  񎧗/2/27?。“姹荆?.00?。?/p> <p>暫無工作，有人推薦否？謝謝。</p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]