-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlab11-lrc.php
289 lines (243 loc) · 9.1 KB
/
lab11-lrc.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<?php
//phpinfo();
ini_set("post_max_size","100M");
ini_set("memory_limit","100M");
ini_set("upload_max_filesize","100M");
ini_set("max_execution_time","600");
ini_set("max_input_time","600");
//文件要是很大就没戏了，好像这样改不了
?>
<html>
<head>
<requestFiltering>
<requestLimits maxAllowedContentLength="100000000"></requestLimits>
</requestFiltering>
<meta charset="utf-8">
<title>LRC 歌词编辑器</title>
<style>
nav ul {
position: fixed;
z-index: 99;
right: 5%;
border: 1px solid darkgray;
border-radius: 5px;
list-style:none;
padding: 0;
}
.tab {
padding: 1em;
display: block;
}
.tab:hover {
cursor: pointer;
background-color: lightgray !important;
}
td {
padding:0.2em;
}
textarea[name="edit_lyric"] {
width: 100%;
height: 50em;
}
input[type="button"] {
width: 100%;
height: 100%;
}
input[type="submit"] {
width: 100%;
height: 100%;
}
#td_submit {
text-align: center;
}
select {
display: block;
}
#lyric {
width: 35%;
height: 60%;
border: 0;
resize: none;
font-size: large;
line-height: 2em;
text-align: center;
}
</style>
</head>
<body>
<nav><ul>
<li id="d_edit" class="tab">Edit Lyric</li>
<li id="d_show" class="tab">Show Lyric</li>
</ul></nav>
<!--歌词编辑部分-->
<section id="s_edit" class="content">
<form id="f_upload" enctype="multipart/form-data" method="post">
<p>请上传音乐文件</p>
<!--TODO: 在这里补充 html 元素，使 file_upload 上传后若为音乐文件，则可以直接播放done-->
<audio controls="controls" autoplay="autoplay" id="audiomusic"></audio>
<input type="file" name="file_upload" onchange="get_URL(this);" id="file_upload">
<table>
<tr><td>Title: <input type="text" name="titleinput"></td><td>Artist: <input type="text"></td></tr>
<tr><td colspan="2"><textarea name="edit_lyric" id="edit_lyric"></textarea></td></tr>
<tr><td><input type="button" value="插入时间标签" onclick="insertTag(1);"></td><td><input type="button" value="替换时间标签" onclick="insertTag(2);"></td></tr>
<tr><td colspan="2" id="td_submit"><input type="submit" value="Submit" name="submit"></td></tr>
</table>
</form>
</section>
<?php
if($_POST["submit"]){
$_FILES["file_upload"]["name"] = $_POST["titleinput"].".mp3";
move_uploaded_file($_FILES["file_upload"]["tmp_name"],"songs/mp3/".$_FILES["file_upload"]["name"]);
file_put_contents('songs/lrc/'.$_POST["titleinput"].'.lrc',$_POST["edit_lyric"]);
}
?>
<!--歌词展示部分-->
<section id="s_show" class="content">
<select id="select" onchange="chooseMusic();">
<!--TODO: 在这里补充 html 元素，使点开 #d_show 之后这里实时加载服务器中已有的歌名-->
<option value="123">请选择歌曲</option>
<?php
$handle = opendir("./songs/mp3");
while(false!==($file=readdir($handle))){
list($filesname,$kzm)=explode(".",$file);
if($kzm=="mp3"){
echo "<option value=\"$filesname\">$filesname</option>";
}
}
?>
</select>
<textarea id="lyric" readonly="true">
</textarea>
<!--TODO: 在这里补充 html 元素，使选择了歌曲之后这里展示歌曲进度条，并且支持上下首切换-->
</section>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
</body>
<script>
// 界面部分
document.getElementById("d_edit").onclick = function () {click_tab("edit");};
document.getElementById("d_show").onclick = function () {click_tab("show");};
document.getElementById("d_show").click();
function click_tab(tag) {
for (let i = 0; i < document.getElementsByClassName("tab").length; i++) document.getElementsByClassName("tab")[i].style.backgroundColor = "transparent";
for (let i = 0; i < document.getElementsByClassName("content").length; i++) document.getElementsByClassName("content")[i].style.display = "none";
document.getElementById("s_" + tag).style.display = "block";
document.getElementById("d_" + tag).style.backgroundColor = "darkgray";
}
// Edit 部分
var edit_lyric_pos = 0;
document.getElementById("edit_lyric").onmouseleave = function () {
edit_lyric_pos = document.getElementById("edit_lyric").selectionStart;
};
// 获取所在行的初始位置。
function get_target_pos(n_pos) {
if (n_pos === undefined) n_pos = edit_lyric_pos;
let value = document.getElementById("edit_lyric").value;
let pos = 0;
for (let i = n_pos; i >= 0; i--) {
if (value.charAt(i) === '\n') {
pos = i + 1;
break;
}
}
return pos;
}
// 选中所在行。
function get_target_line(n_pos) {
let value = document.getElementById("edit_lyric").value;
let f_pos = get_target_pos(n_pos);
let l_pos = 0;
for (let i = f_pos;; i++) {
if (value.charAt(i) === '\n') {
l_pos = i + 1;
break;
}
}
return [f_pos, l_pos];
}
function get_URL(obj) {
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码
}
xmlhttp.onreadystatechange = function (ev) {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('audiomusic').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getURL.php?url="+window.URL.createObjectURL(obj.files[0]),true)
xmlhttp.send();
}
//获得插入时间
function getInsertTime() {
var seconds = document.getElementById("audiomusic").currentTime;
insertMin = parseInt(parseInt(seconds)/60);
insertSec = (parseInt(seconds)%60);
insertmSce = parseInt((parseFloat(seconds)-parseInt(seconds))*60*100/100);
return "["+insertMin+":"+insertSec+":"+insertmSce+"]";
}
function insertTag(index) {
var edit_lyric = document.getElementById("edit_lyric");
var currentTotalNum = edit_lyric.selectionStart;
var currentRowNum = 0;
for(var i=currentTotalNum-1;i>=0;i--){
if(edit_lyric.value.charAt(i)==='\n'){
break;
}else{
currentRowNum++;
}
}
var timeFlag = getInsertTime();
var n = edit_lyric.selectionStart - currentRowNum;
if(index == 1){//插入新的
var insertedContent = "";
var i = 0;
if(n>0) {
var tmp = edit_lyric.value.substring(i, i + n);
insertedContent += tmp + timeFlag;
i += n;
tmp = edit_lyric.value.substring(i, i + n);
insertedContent += tmp;
}
else{
insertedContent=timeFlag+edit_lyric.value;
}
edit_lyric.value = insertedContent;
}
if(index == 2){//替换旧的
var pre = edit_lyric.value.substring(n,edit_lyric.value.length);
var newtext = pre.replace( /\[.*]/,timeFlag);//
edit_lyric.value = edit_lyric.value.replace(pre,newtext);
}
}
function chooseMusic() {
var songname = document.getElementById("select").value;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile("songs/lrc/"+songname+".lrc",1);
alert(f.ReadAll())
document.getElementById("lyric").value = f.ReadAll();
f.close();
}
/* HINT:
* 已经帮你写好了寻找每行开头的位置，可以使用 get_target_pos()
* 来获取第一个位置，从而插入相应的歌词时间。
* 在 textarea 中，可以通过这个 DOM 节点的 selectionStart 和
* selectionEnd 获取相对应的位置。
*
* TODO: 请实现你的歌词时间标签插入效果。
*/
/* TODO: 请实现你的上传功能，需包含一个音乐文件和你写好的歌词文本。
*/
/* HINT:
* 实现歌词和时间的匹配的时候推荐使用 Map class，ES6 自带。
* 在 Map 中，key 的值必须是字符串，但是可以通过字符串直接比较。
* 每一行行高可粗略估计为 40，根据电脑差异或许会有不同。
* 当前歌词请以粗体显示。
* 从第八行开始，当歌曲转至下一行的时候，需要调整滚动条，使得当前歌
* 词保持在正中。
*
* TODO: 请实现你的歌词滚动效果。
*/
</script>
</html>