歌词编辑器和选择歌曲可播放的网页

页面导航:首页 > 网络编程 > 网页播放器 > 歌词编辑器和选择歌曲可播放的网页

歌词编辑器和选择歌曲可播放的网页

来源:互联网 作者:脚本宝典 时间:2015-06-21 12:03 【

!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-s

 

<!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>  
  | 时间: 
 
Tags:

相关文章

    文章评论

    
    <