观看演示：
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>