LRC Editor & Timing Tool

Audio Player
 
/

String Timing

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.

  • Due to weird handling of HTML5 <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.
  • The tool isn't capable of handling the insertion or moving of mid-lyric timestamps (denoted by e.g. <00:10.48> 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. Adding support for this would also be difficult given the editing interface I've already made, so this is unlikely to be supported by this tool in the future.

User Interface

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 functionality besides 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. These are drop-down buttons that present additional options when pressed. For example, an option in the Import drop-down opens a dialog that you can paste song lyrics into and have the inserted into the editor ready for syncing. The fourth button lets you edit the metadata that will be added to the LRC file when exported using the appropriate option. 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. You can hold down Alt while clicking the syncing mode button to set the handle on the current (green) entry instead. 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 press ⏎ Enter the editor will switch back to edit mode, because it's assumed that you've finished syncing the lyrics and also because there's no next entry to go to. Moving around with the arrow key will not cause an automatic mode switch.

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 MM:SS.ss (minutes, seconds, 100ths of a second) 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 timestamp 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.

Keyboard Shortcuts

Player controls (Always usable)

  •  Spacebar  Play/Pause
  • . Stop
  • Page Up / Page Down Increase volume / Decrease volume
    Steps of 5% by default, holding ⇧ Shift changes step to 10%, Alt to 1%.
  • 🠔 / 🠖 Seek
    Steps of 2.5 seconds by default, holding ⇧ Shift changes step to 5 seconds.

Editor controls (Only in sync mode)

  • ⏎ Enter Set timestamp to current audio position & move down
  • Ctrl ⏎ Enter Add break entry above with current timestamp & move down
  • 🠕 / 🠗 Move to next/previous entry
  • Delete Clear timestamp of current entry & move down