-
-
Notifications
You must be signed in to change notification settings - Fork 98
可能是你所能见到的最好的歌词制作工具
基于浏览器技术,跨平台,易于使用的滚动歌词制作工具。通过几次使用即可高效快速制作滚动歌词。
另外,因为是个人项目,所以这是一个很好的用于探索前沿 web 技术的实验。
支持主流浏览器最新版,稍旧版本的浏览器可能会正常工作,但是没有经过测试。已经做了一些兼容工作,但是仍有可能遇到功能缺失,布局错乱等问题。不支持 IE。
页面右上角导航栏用于切换页面,分别是编辑页面,打轴页面,Gist 页面和偏好设置。 页面下方是音频播放器界面。
- 编辑页面用于输入歌词文本,在输入框上方包含了常用的元信息便于填写。
- 打轴页面用于将时间标签插入到每一行歌词中,即所谓的打轴。页面默认自动滚动到所选行,可以点击右下角按钮锁定到高亮歌词。
- Gist 页面用于把 GitHub Gist 作为仓库存取歌词。
- 偏好设置页面可以设置语言,调节歌词输出格式,更改主题颜色,开启虚拟空格键等。
歌词滚动姬的工作方式相比于普通的网页,更接近于 app,所以用户切换页面时不用担心丢失数据和状态。
通常只需要一首歌的时间即可制作好歌词。
- 载入音频,两种方法
- 直接将音频文件拖放到页面
- 或者点击左下角上传按钮
- 输入歌词文本,两种方法
- 在编辑页面粘贴
- 或者直接将文本文件拖放到页面
- 打轴
- 上下键选择歌词,左右键调整时间轴,空格键将时间标签插入当前行。具体热键请参考这里。
- 保存歌词
- 打轴页面可以直接下载
- 编辑页面可以复制,或保存到 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 技术实现离线访问,同时可以被部分浏览器识别,支持安装到桌面。