English · 中文

LRC Maker ·

What is this

This is a tool for creating scrolling lrc files, which refers to text with time tags.

Why lrc-maker

I'm not satisfied with the existing tools, they can't be used across platforms. So I have created one by myself.

How to use

Click lrc-maker to start. You can add the link to browser bookmark. Drag and drop the file in the page to load it and use the arrow key and space key to insert the timestamp.

Development branch links:

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

Hotkeys

key	function
space	insert time stamp tag
backspace / delete / ⌫	remove time stamp tag
ctrlenter↵ / ⌘↩	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

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 ⭐ Also share this project to help more people.

---