This tool provides an easy and intuitive way to synchronize song lyrics to any audio file your browser can play. Below you will find the instructions on how you can re-sync existing LRC files as well as how you can time lyrics you found online to your favourite songs.
Although not required for using this tool, you might want to familiarize yourself with the LRC file format which this editor is designed to work with. Knowing how the file is structured could help you get a better understanding of the UI.
<auido>tags that play audio files opened on the client-side there's a chance that the audio will randomly skip to the beginning and continue playing from there, while the player continues to display the time as if nothing changed. This is actually a browser bug which I've seen happen in Chrome 58 myself; basically the browser continues to report that the playback is working fine while in reality it's not, and there's no way for me to detect when this happens via code, so watch out for that. If this happens to you reload the page and/or restart the browser.
<0:10.480>within an entry), mainly because the software I use to display my lyrics (AutoLyric) does not support it and displays the timestamps as if it was part of the lyrics. I could probably add support for it but since I don't need it there's no reason to. I can't imagine anyone besides me actually wanting to use this tool.
The interface consists of two main parts: an audio player and the lyrics editing/timing area.
The player cannot be used until a file is selected by pressing the first button and browsing for an audio file. If you provide an unsupported format you will see an error message, otherwise the file should've loaded properly, and you should be able to see the track length, name and format below the seek bar. From this point, you can use the buttons to the left or the shortcuts (shown at the bottom of this dialog) to control playback. You can also interact with the seek bar directly; clicking on or dragging along the line will move the audio position there. Once you start editing the lyrics you may notice that little white lines will appear on the seek bar; those lines represent an entry in the editor and server the purpose of giving you an overview of where each string is on the timeline. The thumb is actually slightly transparent so you can see when it passes over an entry. They don't have any added function other than looking cool.
The editor is the main part of the application. At the top you will see a series of buttons. The first is a mode selector which will switch between sync and edit mode, more on that later. The second and third buttons allow you to import/export LRC files, respectively. The fourth button opens a dialog that you can paste song lyrics into from anywhere, and you can have the lyrics imported into the editor ready for syncing. The last button is for clearing all entries in the editor to start fresh, which is essentially the same as reloading the page, but you won't have to re-select the audio file again this way.
As previously mentioned the editor has two modes, the first of which is editing mode which you see by default. Here you can edit both the timestamp and the text by simply typing in new values. The buttons on the right should be self-explanatory: the first one adds a row above the current, the next does the same but below, and then there's a button for removing the row. If you play the song while in this mode, rows with timestamps will be highlighted in green indicating that they would be displayed at the current time in the song by an application utilizing this data.
The (second) syncing mode is where the magic happens. To switch to this mode you need to have an audio file selected, because the idea is that you play the song while pressing keys to alter the timestamps in each row. In sync mode you can use additional hotkeys to do just that. At the bottom of this dialog there's a list of all shortcuts that can be used in this mode with explanations on how they work, so you should check that for more information. The button at the end of each row becomes active when there's a valid timestamp in said row, and when clicked it will move the player precisely to that position. When you switch to this mode, a "handle" is set on the first entry in the editor, indicated by the blue text & background. This handle is what dictates where the timestamp will go (or not go) once you press the appropriate keys. When the handle reaches the last entry in the editor and you try to go to the next entry the editor will switch back to edit mode, because it's assumed that you've finished syncing the lyrics and also becuase there's no next entry to go to. I felt like ignoring the key press or jumping to the start would've both been worse options.
When you use the raw lyrics import dialog you might get some extra new lines (break entries) in the editor. An entry is considered a break entry when there's a timestamp but the text is left blank. These appearing after an import is caused by empty lines being present in the lyrics. Most software will not display any lyric until the next one or display the next faded out for example.
Be sure to use the correct time format when changing timestamps in edit mode. As far as I've seen
MMM:SS.SSS is safe to use, so if you use anything else the editor will consider it invalid (indicated by the red color & background on the input). The important thing to note is that you can't use hours, only minutes, seconds and milliseconds. The milliseconds part is optional, but at the very least a timestap indicating "at 1 second" has to have a minute component, like this:
0:01. Rows that contain an invalid timestamp will not be included in exported LRC files.