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

时间:2021-03-17 人气:0

想了解歌词编辑器和选择歌曲可播放的网页的相关内容吗，在本文为您仔细讲解的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：歌词编辑器和选择歌曲可播放的网页，下面大家一起来学习吧。

<!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>　　　　第三步：添加时间标签。</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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容