你的位置:HBcms宏博内容管理系统 建站经验 正文
内容搜索
热门内容
  1. 网站logo在线设计,免..
  2. 域名解析文件hosts文件..
  3. 教你如何做网线接头:..
  4. qq怎么截图?如何在qq..
  5. 雅虎yahoo邮箱smtp和p..
  6. 新注册126邮箱或163邮..
  7. 幻灯片式的网页图片滚..
  8. 做网站怎么赚钱?什么..
  9. com域名和cn域名net域..
  10. Google支付系统(Googl..
推荐内容
  1. 做一个商业网站要多少..
  2. 国外服务器租用(国外..
  3. 深圳做网站的公司!=深..
  4. 网络原创投稿,转载精..
  5. 美国服务器租赁Window..
  6. 699元的美国服务器出租..
  7. 添加友情链接,速度别..
  8. “原始人”卷款潜逃事..
  9. 设置Godaddy支持zend ..
  10. 网页设计中常用的CSS命..
WEB在线音乐歌词编辑器
  • 原作者:upwinder 添加时间:2007-09-06 发表时间:2007-09-06 人气:2467 来源:转载
  • 观看演示:

    http://www.upwinder.com/upload/lrceditor.htm

    以下是代码:

    <!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">
    <!--
    body,td,th {
     font-size: 12px;
    }
    -->
    </style></head>

    <body>
    <p>歌词编辑器</p>
    <p>     第一步:选择要播放的歌曲并播放</p>
    <p>    第二步:填写全部的歌词。</p>
    <p>    第三步:添加时间标签。</p>
    <p> 添加时间标记目的</p>
    <p>    1、添加时间标签(插入到光标处)    </p>
    <p>    2、转到下一行(光标转到下一个回车地方,当最后一个位置不为回车符时,直接将光标移到文本末尾) </p>
    <p>删除时间标记算法:(删除光标所在行的时间标记)</p>
    <p>删除所有时间标记算法:(替换所有的时间标记为空)</p>
    <p>1、匹配时间标记</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>添加歌词(建议:第一步填写歌词文本;第二步添加时间标签)</p>
    <p>     演唱者:
      <input name="singer" type="text" id="singer">
    </p>
    <p>     标 题:
      <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>      内 容: </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="添加时间标签" onClick="insertAtCaret(document.all('lrc'), 'hlayy');">
        <input  id="c" type="button" name="Submit2" value="删除时间标签" onClick="delTimeLable()">
        <input type="button" name="Submit3" value="删除所有时间标签" 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="点击此处生成歌词" 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>| 版权:HLAYY | 作者:HLAYY | 联系QQ:42263646
      <script language="javascript">
      function lastLrc()
      {
      /*
      [ti:一直很安静]
     [ar:阿桑]
     [al:仙剑奇侠传电视原声带]
     [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(); //创建一个文本区域的副本


     
     var slct = document.selection;
        var rng = slct.createRange();
     
        textEl.select();
        rng.setEndPoint("StartToStart", slct.createRange());
       
     
      psn = rng.text.length; //psn:光标的位置
     
     
        rng.collapse(false);
        rng.select();

     
      }

    function findNext(value)
    {
     //选择范围:以光标所在处为开始。以文本尾为结束
     //在范围内搜索指定的符号
     //i=光标开始处
     //for(i;i<文本长度;i++)
      //if(value==charAt(i))
      //break;
      //核心问题:当为回车时临近的两个坐标会显示同一值,所以,判断光标所在位置是否为‘回车’符。
      //如果是,则在判断时把光标的位置向右移一,即:加一。
      var textLength=document.all("lrc").value;
      var i=psn;//光标的位置
      var j=0;//在光标前出现回车的次数
      var z=0;//临时变量


        
      
    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:文本区域的ID;

    rng.moveStart("character",pn);

    rng.collapse(true);

    rng.select();

    }


      function insertAtCaret (textEl, text) {
     
        if (textEl.createTextRange && textEl.caretPos&&player.controls.currentPositionString!="")//当播放进度不为空,即:开始播放后
      {
        var caretPos = textEl.caretPos;
     caretPos.text="["+player.controls.currentPositionString+".00]";
     
      findNext("\r");
      } else
       
     alert('请先播放歌曲或者填写歌词文本!');
        //textEl.value = "";

     
      }
     
      function delAllTimeLable()
      {
      /*算法:
     Ł、分离换行符
     ł、找到时间标记并删除
     
     
      */
          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()
      {
      /*算法:
      找到上一个时间标记并且删除
     
     Ł、分离每行并存入数组;
     
     ł、判断光标在哪个数组里;
        取得光标位置
        光标前有多少个回车符可以得到在第几个数组
     
     Ń、判断前面有或者没有时间标记
        如果有删除
        如果没有则保持不变
     
     
     
      */
     
     
        var caretPoss = (document.all("lrc")).caretPos;
     caretPoss.text=" ";
     
     
        var textLength=document.all("lrc").value;
      var i=psn;//光标的位置
      var j=0;//在光标前出现回车的次数
      var z=0;//临时变量
      
      
        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)//如果在结尾
      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="";//清除文本区域内容
          //输出最后的内容
          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];

        }

     

     
     
      }
      //文本框按回车键产生的字符为‘\r\n’;

      </script> 
      | 时间:
     񎧗/2/27 | 版本:1.00 |</p>
    <p>暂无工作,有人推荐否?谢谢。</p>
    </body>
    </html>

  • 点这里复制本页地址发送给您QQ/MSN上的好友
  • 相关文章
  • 相关评论
  • 本文章所属分类:首页 建站经验