代码驿站移动版
频道导航
HTML/Xhtml
CSS
JavaScript
HTML5
PHP教程
ASP.NET
正则表达式
AJAX
ThinkPHP
Yii
MySQL
MariaDB
Oracle
MongoDB
Redis
DedeCMS
PHPCMS
帝国CMS
WordPress
Discuz
其它CMS
Zend Studio
Sublime
Notepad
Dreamweaver
Windows
Linux
Nginx
Apache
IIS
CentOS
Ubuntu
Debian
网站优化
工具资源
PHP源码
ASP.NET源码
其它源码
图标素材
按钮素材
字体素材
DedeCMS模板
帝国CMS模板
PHPCMS模板
WordPress模板
Discuz!模板
单页模板
开发软件下载
服务器软件下载
广告投放
联系我们
版权申明
软件编程
网页前端
移动开发
数据库
服务器
脚本语言
PHP代码
JAVA代码
Python代码
Android代码
当前位置:
主页
> >
歌词编辑器和选择歌曲可播放的网页
时间:2021-07-28 07:43:21 | 栏目: | 点击:次
<!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>
[Ctrl+A 全选 注:
引入外部Js需再刷新一下页面才能执行
]
您可能感兴趣的文章:
docker 容器上编译 go 程序提示找不到文件问题
如何使win2003服务器自动定时重启的图文教程
R语言运行环境安装配置详解
Prototype1.6 JS 官方下载地址
如何将本地构建好的docker镜像发布到dockerhub
相关文章
05-10
基于react hooks,zarm组件库配置开发h5表单页面的实例代码
05-10
浅谈react路由传参的几种方式
05-10
英语常用口语扫盲啦.扫盲!
05-09
R语言求一行(列表、list)数据的平均数操作
05-09
Web网络安全解析宽字节注入攻击原理
JQuery
VUE
AngularJS
MSSql
MySQL
MongoDB
Redis
Linux
Tomcat
Nginx
网站首页
广告投放
联系我们
版权申明
联系站长