lrc maker

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

• 定位
• 浏览器支持情况
• 界面布局
• 一般歌词制作流程
• 音频格式支持
• 热键
• 关于移动设备
• 关于 Gist
• 用户数据和隐私
• 部分技术细节

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

另外,因为是个人项目,所以这是一个很好的用于探索前沿 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	重置播放速度

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

歌词滚动姬可以把歌词保存到 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 技术实现离线访问,同时可以被部分浏览器识别,支持安装到桌面。