Skip to content

Latest commit

 

History

History
88 lines (69 loc) · 3.37 KB

Lab11.md

File metadata and controls

88 lines (69 loc) · 3.37 KB

LAB 11 要求

本 LAB 相关的文件为lab11.html,内容极多请尽早开始。

DDL:2018年6月19日 23:59:59

名词解释

时间标签: [00:01:23.45] 指歌曲开始后一分二十三秒四五的位置。

lrc文件: 常见的带有时间格式的歌词文件,其每一行以时间标签开始。一般与对应歌曲文件同名。如 Burn My Dread.mp3 对应 Burn My Dread.lrc

代码结构

edit

d_edit 点击后,页面显示编辑歌词界面,即 s_edit 部分。

HTML

这里少了一段在选择文件之后实时加载相应的音乐部分的代码,请找到对应的 TODO 位置,完成代码。

JS

请完成这里的音乐标签插入效果。

如某一行内容为 君はね 確かにあの時 私のそばにいた 当光标在此行任意位置的时候,点击“插入时间标签”,根据歌曲当前时间,利用 JavaScript 将其补为如 [00:00:00.00]君はね 確かにあの時 私のそばにいた

如果跨行,以选中位置起始位置为准。

PHP

请完成歌词文件编辑后的歌曲和歌词的上传保存工作。

歌词以文本格式存储,文件后缀名为 .lrc,其余和 mp3 文件同名。

show

d_show 点击后,页面显示编辑歌词界面,即 s_show 部分。

HTML

这里少了一段在下拉框选择歌曲名之后实时加载相应的音乐部分的代码,请找到对应的 TODO 位置,完成代码。此处需要支持上下首切换,使用 button 按钮即可。

JS

下拉框部分在无上一首歌时,使“上一首”按钮不可点击,“下一首”按钮同理。

当选中一首歌的时候,音乐加载的同时,在 textarea 中加载对应的歌词文件,歌词文件的时间标签隐藏,只显示对应的歌词。

当歌曲播放到对应时间的时候,将对应行歌词加粗,第八行以后的部分请调整滚动条使其居中,但若是最后几行,则可不必(当然你也滚不动滚动条)。如果歌曲播放过程中进度条被点击,则至播放到新一行之前,可不调整歌词;但播放到新一行的时候,需要把原加粗的文字取消加粗。

PHP

请完成打开此部分的时候,下拉框中显示所有服务器端包含的歌曲。

若歌曲文件为 Burn My Dread.mp3,显示 Burn My Dread

减少工作量的部分

不必检查 lrc 文件是否合法,如果时间标签都不存在不滚动即可。若有的行有有的行没有的文件,它产生的任何效果都不必在意。

不用修改 CSS 部分,我知道它很丑,但是它比较简单易看。

如果这个 html 文件对你来说非常麻烦,你也可以修改成 php 文件。submit 类型的按钮点击后会刷新页面,请注意(当然你可以改成 button 类型)。

GitHub 上有相当丰富的代码样例,且都比要求实现的复杂,可以作为参考。

展示部分:

代码:https://github.com/LiuZhichao/lyric/

演示:http://liuzhichao.github.io/lyric/

编辑部分:

演示:http://www.lrcgc.com/diy/

最后

恭喜 Microsoft 喜提 GitHub。

有任何疑问欢迎联系助教。

Email:

王婕

杨森

花楠