Skip to content
magic-akari edited this page Oct 6, 2020 · 2 revisions

lrc maker

可能是你所能见到的最好的歌词制作工具

目录

定位

基于浏览器技术,跨平台,易于使用的滚动歌词制作工具。通过几次使用即可高效快速制作滚动歌词。

另外,因为是个人项目,所以这是一个很好的用于探索前沿 web 技术的实验。

浏览器支持情况

支持主流浏览器最新版,稍旧版本的浏览器可能会正常工作,但是没有经过测试。已经做了一些兼容工作,但是仍有可能遇到功能缺失,布局错乱等问题。不支持 IE。

界面布局

页面右上角导航栏用于切换页面,分别是编辑页面,打轴页面,Gist 页面和偏好设置。 页面下方是音频播放器界面。

  • 编辑页面用于输入歌词文本,在输入框上方包含了常用的元信息便于填写。
  • 打轴页面用于将时间标签插入到每一行歌词中,即所谓的打轴。页面默认自动滚动到所选行,可以点击右下角按钮锁定到高亮歌词。
  • Gist 页面用于把 GitHub Gist 作为仓库存取歌词。
  • 偏好设置页面可以设置语言,调节歌词输出格式,更改主题颜色,开启虚拟空格键等。

歌词滚动姬的工作方式相比于普通的网页,更接近于 app,所以用户切换页面时不用担心丢失数据和状态。

一般歌词制作流程

通常只需要一首歌的时间即可制作好歌词。

  1. 载入音频,两种方法
    • 直接将音频文件拖放到页面
    • 或者点击左下角上传按钮
  2. 输入歌词文本,两种方法
    • 在编辑页面粘贴
    • 或者直接将文本文件拖放到页面
  3. 打轴
    • 上下键选择歌词,左右键调整时间轴,空格键将时间标签插入当前行。具体热键请参考这里
  4. 保存歌词
    • 打轴页面可以直接下载
    • 编辑页面可以复制,或保存到 Github Gist
  • 歌词滚动姬以 utf-8 编码进行文本文件的读写。如果遇到乱码问题,在编辑页面复制粘贴是更好的方法。

音频格式支持

音频格式支持情况由浏览器决定。例如最新版 Chrome 浏览器可以支持 Flac。

通过链接载入音频,链接应是能直接访问的直链,由于浏览器安全策略限制,非 https 的资源可能会被浏览器拒绝。

额外支持

支持输入云音乐的歌曲链接,支持云音乐的 ncm 音频文件。

热键

按键 功能
space 插入时间标签
delete / +delete 移除时间标签
ctrl+enter / +return 播放 / 暂停
/ a 回退 5 秒
/ d 前进 5 秒
/ w / j 选择上一行
/ s / k 选择下一行
ctrl+ / + 提高播放速度
ctrl+ / + 降低播放速度
r 重置播放速度

关于移动设备

在移动设备上输出生产力是痛苦的,本项目在移动设备上进行了一些优化,包括改变页面布局,提供虚拟空格键(在编号设置页面打开),但是仍然建议在桌面设备上进行歌词制作。

关于 Gist

歌词滚动姬可以把歌词保存到 GitHub Gist 并取回。使用此功能,需要你拥有一个 GitHub 账号,然后根据提示生成一个 personal token 填入其中。

注意:personal token 应该作为一次性使用,请保管好不要泄露,如发生泄露请及时到 GitHub 设置页面中取消 token。

歌词滚动姬默认生成公开的 Gist 仓库,如果你希望使用非公开的 Gist 仓库,可以手动在 GitHub 创建一个,并将 Gist id 填入其中。

用户数据和隐私

浏览器载入音频是借助浏览器 API 直接读取本地数据,因此并没有任何数据被发送到远程服务器,也不会因此产生流量。

使用本项目与外界发生通信的情况仅发生在:

  • 填入歌曲链接时浏览器下载音频数据
  • 存取 Github Gist 数据

你可以审阅源代码并将本项目部署到本地。

部分技术细节

歌词滚动姬使用了 ESM 模块加载技术。对于不支持 ESM 的浏览器,将会使用 webpack 打包的文件作为回退处理。

对于支持 ESM 却不支持动态 import 加载的火狐浏览器,会在 service worker 里修改源文件应用 polyfill 做回退。

歌词滚动姬使用了 PWA 技术实现离线访问,同时可以被部分浏览器识别,支持安装到桌面。