项目分享：滚动歌词制作工具

歌词滚动姬

这个项目是什么

这是一个滚动歌词制作工具，滚动歌词是指带有时间标签的文本。

为什么会有这个项目

原作者对于目前已有的工具不满意，无法跨平台使用，所以自己制作了一个。

如何使用

打开歌词滚动姬即可开始，你可以把这个链接收藏到浏览器书签。将文件拖放到页面中加载，使用箭头键和空格键插入时间戳。

原仓库链接：

• https://github.com/magic-akari/lrc-maker/

开发分支版本链接:

• https://magic-akari.github.io/lrc-maker/
• https://lrc-maker.vercel.app/

热键

按键	功能
space	插入时间标签
backspace / delete / ⌫	移除时间标签
ctrlenter↵ / ⌘↩	播放 / 暂停
← / A	回退 5 秒
→ / D	前进 5 秒
↑ / W / J	选择上一行
↓ / S / K	选择下一行
- / +	当前行时间标签微调
ctrl↑ / ⌘↑	提高播放速度
ctrl↓ / ⌘↓	降低播放速度
R	重置播放速度

兼容性

本项目的目标是兼容大部分现代浏览器，当前版本使用了很多的现代浏览器 API 来提升效能，改善用户体验。
本项目使用了 ES Module 来加载代码，这意味着浏览器的版本应该满足下列要求。

浏览器	版本
EDGE	>= 16
Firefox	>= 60
Chrome	>= 61
Safari	>= 11
ios_saf	>= 11

当前版本的 Edge 理论上应该支持，但是目前有不明原因导致代码加载后没有运行，这个问题留到 V8 内核的 Edge 发布后再做观察。

对 EDGE 浏览器低限度支持。

对于没有 ES Module 支持的浏览器，仍然做了回退处理以便正常使用。注意：此部分没有进行测试，旧浏览器仍然可能遇到 css 的布局错乱问题。

IE 等旧浏览器不再支持。对于这类浏览器使用者，可以使用本项目的旧版本。

本地开发

如果你想在本地计算机上运行这个项目，可以遵循下面操作。

# 克隆这个仓库
git clone https://github.com/magic-akari/lrc-maker.git

cd lrc-maker

# 安装依赖
npm i

# 构建
npm run build

# 开发模式构建
npm start

生产部署

构建（npm run build）后，build 文件夹是静态网站文件。
您可以将其部署到任何 CDN 或静态文件服务器。

您还可以使用此存储库根目录下的 Dockerfile 构建一个 docker 镜像。
它运行构建并创建最小化的 nginx 镜像。

# 构建
docker build -t lrc-maker .
# 创建一个容器并在 8080 端口提供服务
docker run -d -p 8080:80 lrc-maker

给这个项目点一个星星

如果你喜欢这个项目，请点一个星星吧，同时分享这个项目来帮助更多的人。