Liricle

Liricle is javascript library for syncing timed lyrics or commonly called LRC file format with song.

Live Demo →

Liricle now support enhanced LRC format 🎉
thanks to @itaibh for the feature request and contributions 🤘

Installation 📦

using npm:

npm install liricle

in browser:

<script src="https://cdn.jsdelivr.net/npm/liricle"></script>

Usage 🚀

Setup

create the Liricle instance

const liricle = new Liricle();

Load lyrics

from url:

liricle.load({
    url: "your-lrc-file.lrc"
});

from text:

liricle.load({
    text: `
      [01:02.03] lyric line 1
      [04:05.06] lyric line 2
      ...
    `;
});

you can call .load() method many times if you want to update the lyrics.

Sync lyrics

liricle.sync(time, continuous);

.sync() method has 2 parameters:

• time: current time from audio player or something else in seconds

  • required: yes

  • type: number

• continuous: always emit sync event. by default Liricle only emit sync event if the lyric index changes

  • required: no

  • type: boolean

  • default: false

Adjust lyrics offset

to adjust lyrics offset or speed, you can set .offset property value. the value is number in milliseconds

// positive value = speed up
liricle.offset = 200;

// negative value = slow down
liricle.offset = -200;

Listen to event

on load event

liricle.on("load", (data) => {
  // ...
});

callback function will receive an object of parsed LRC file

expand to see code

{

  // LRC tags or metadata
  tags: {
    ar: "Liricle",
    ti: "Javascript lyric synchronizer library",
    offset: 200
  },

  // lyric lines
  lines: [
    {
      time: 39.98,
      text: "Hello world",

      // if LRC format is not enhanced
      // words value will be null.
      words: [
        {
          time: 40.10,
          text: "Hello"
        },
        ......
      ]
    },
    ......
  ],

  // indicates whether the lrc format is enhanced or not.
  enhanced: true

}

on sync event

liricle.on("sync", (line, word) => {
  // ...
});

🚧 If LRC format is not enhanced the word value will be null

callback function will receive 2 arguments which represents the current lyric.
both can be object or null if none of the lyrics match the time so always check the value.

expand to see code

// both line and word objects have the same properties

{
  index: 1,
  time: 39.98,
  text: "Hello world"
}

Example

for a complete example you can see here →

Contributing

want to contribute? Let's go 🚀

Licence

distributed under the MIT License. see LICENSE for more information.