Skip to content

歌词滚动姬|可能是你所能见到的最好用的歌词制作工具

License

Notifications You must be signed in to change notification settings

tgw314/lrc-maker

 
 

Repository files navigation

logo

中文

What is this

This repository is a tool which helps you create your lrc file.

why lrc-maker

It's hard to find a user-friendly and cross-platform tool to create lrc. So I made one myself.

How to use

Open lrc-maker to start. You can add the link to browser bookmark. It is easy to use. Drag and drop the file in the page to load an audio file. Use the arrow key and space key to insert the timestamp.

Development branch links:

Hotkeys

key function
space insert time stamp tag
delete / +delete remove time stamp tag
ctrl+enter / +return play / pause
/ a step backward 5 seconds
/ d step forward 5 seconds
/ w / j select previous line
/ s / k select next line
- / + adjust selected time tag
ctrl+ / + speed up playback rate
ctrl+ / + speed down playback rate
r reset playback rate

Compatibility

The most modern browsers are supported. The current version uses a lot of modern browser APIs to improve performance and improve the user experience. This project uses the ES Module to load the script code, which means that the browser version should meet the following requirements.

browser version
EDGE >= 16
Firefox >= 60
Chrome >= 61
Safari >= 11
ios_saf >= 11
The current version of Edge should be supported theoretically, but there are unexplained reasons for the code to not run after loading. This problem is left to be observed after the Edge with the V8 kernel is released.

Limited support for EDGE browsers.

The browsers which do not have ES Module support will load the fallback script. Note: The fallback is not tested. The old browsers may encounter CSS layout confusion.

Ancient browsers such as IE are no longer supported. If you are an ancient browser user, it is better to use the old version of this project.

Development

If you want to run this project on your computer locally, follow the tips.

# clone this repo
git clone https://github.com/magic-akari/lrc-maker.git

cd lrc-maker

# install dependencies
npm i

# build
npm run build

# or build with watch mode
npm start
# and run dev server
npm run dev-server

Deployment in Production

After building (npm run build), the build folder is the static website files. You can deploy it to any CDN or static file server.

You can also build a docker image using the Dockerfile at the root of this repo. It runs the build and give you a minimal nginx image.

# build image
docker build -t lrc-maker .
# create a container and serve at port 8080
docker run -d -p 8080:80 lrc-maker

Star this project ⭐

If you like give us a star ⭐ Share this project to help more people.


这个项目是什么

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

为什么会有这个项目

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

如何使用

打开歌词滚动姬,即可开始,你可以把这个链接收藏到浏览器书签。

开发分支版本链接:

热键

按键 功能
space 插入时间标签
delete / +delete 移除时间标签
ctrl+enter / +return 播放 / 暂停
/ 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
# 运行 dev-server
npm run dev-server

生产部署

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

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

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

给这个项目点一个星星 ⭐

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

About

歌词滚动姬|可能是你所能见到的最好用的歌词制作工具

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 78.2%
  • CSS 19.6%
  • HTML 1.1%
  • Other 1.1%