Home
Maybe the best lrc maker
- What is this
- Browser support
- Layout
- Lrc making workflow
- Audio format support
- Hotkeys
- About mobile devices
- About Gist
- User data and privacy
- Some technical details
This project is based on web technology. It is built for cross-platform, easy-to-use lrc maker. You can quickly and efficiently create scrolling lrc file with a few uses.
This project is a personal project. It is a good experiment for exploring cutting-edge web technologies.
This project supports the latest version of the mainstream browsers. It may work with a slightly older version of the browser (not tested). There is some workaround for older browsers while you may still run into some problems such as missing features and layout errors. IE is not supported.
The navigation bar in the upper right corner of the page is used to switch between pages, edit page, synchronize page, Gist page, and preferences page.
The audio player interface is at bottom of the page.
- The edit page is used to input lyrics text. The input box above the textarea is used to input the meta information easily.
- The synchronize page is used to insert a time tag into each line of lyrics. The page automatically scrolls to the selected line by default. You can click the lock button to trace the highlighted line.
- The Gist page is used to access GitHub Gist as a repository for lyrics.
- The preferences page allows you to set the language, adjust the lyrics output format, change the theme color, or other settings.
lrc-maker works more like app than web page. Thus you should feel free to switch the pages for users' data or page status has saved into browsers.
Usually only one song is needed to make the lyrics.
- Load audio, there are two ways
- Drag and drop audio file in the page
- click the upload button
- Load lyric text,two ways
- Paste the lyric text on the edit page
- Drag and drop text file in the page
- Synchronize
- Use arrow key to select previous/next line or step forward/backward 5 seconds, use space key to insert time stamp tag. More hotkeys here
- Save lrc file
- Download on the synchronize page
- Copy from edit page，or save to Github Gist
- lrc-maker use utf-8 to read and write file
Audio format support is determined by the browser. For example, the latest version of Chrome supports Flac format.
lrc-maker support audio link that can be accessed directly. Due to browser security policy restrictions, resources other than https may be rejected by the browser.
lrc-maker supports song links to Netease Cloud Music, or ncm encrypted audio files.
| 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 |
| ctrl+↑ / ⌘+↑ | speed up playback rate |
| ctrl+↓ / ⌘+↓ | speed down playback rate |
| r | reset playback rate |
It is pain to make lrc file on mobile devices. This project has been optimized on mobile devices, including changing the page layout, providing a virtual space bar, but it is still recommended to make lyrics on the desktop devices.
lrc-maker can save the lyrics to GitHub Gist and retrieve them. To use this feature, you need to have a GitHub account and a generated personal token from Github.
Note: The personal token should be used as a one-time use. Please keep it in a safe place. Go to the GitHub settings page to revoke the token if leaked.
lrc-maker generates a public Gist repository by default. If you want to use a private Gist repository, you can manually create one in GitHub and fill in the Gist id.
The browser loads the audio directly by reading the local data via the browser API, so no data is sent to the remote server and no traffic is generated.
The use of this project to communicate with the remote server only occurs in:
- Browser downloads audio data when filling in song links
- Access Github Gist data
You can review the source code and deploy the project locally.
lrc-maker uses the ESM module loading script code. For browsers that do not support ESM, webpack-packaged files will be used as fallback processing.
For Firefox browsers that support ESM but do not support dynamic import loading, the source file is modified in the service worker to apply polyfill to do the fallback.
lrc-maker uses PWA technology for offline access, and can be recognized by some browsers to support installation to the desktop.