liricle
v4.0.5
Published
javascript lyric synchronizer library
Downloads
97
Readme
Liricle
Liricle is javascript library for syncing timed lyrics or commonly called LRC file format with song.
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
{
// 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 benull
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.
// 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.