脚本网 > 网络编程 > 网页播放器 > 歌词编辑器和选择歌曲可播放的网页

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

<!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需再刷新一下页面才能执行]

非常全的javascript控制MediaPlayer的属性集合

来自CSDN的"无限流"分页程序

脚本网 > 网络编程 > 网页播放器 > 歌词编辑器和选择歌曲可播放的网页

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

相关文章