`easylrc::Render`

Rendering lyrics to multiple formats is processed and discribed here.

Formats reference

For showing full features example we'll use first and cut parts of eLRC from song "TV Girl - Taking What's Not Yours", as it has two voices.

HTML

render_html()

Primarily supported

Example output

Target timestamp - 11200 ms.

Command - ezlrc -rhtml "Taking What's Not Yours - TV Girl.flac" 11200

More examples in CLI name="__codelineno-0-1" href="#__codelineno-0-1"><div class="easylrc-lyrics"> <div class="easylrc-group-v2"> <p class="easylrc-line easylrc-v2" data-timestamp="9558" id="easylrc-current"> <span class="easylrc-current-words"> <span class="easylrc-word" data-timestamp="9558">Thievin',</span> <span class="easylrc-word" data-timestamp="10090">stealin',</span> <span class="easylrc-word" data-timestamp="10500">taking</span> <span class="easylrc-word" data-timestamp="10795">what's</span> <span class="easylrc-word" data-timestamp="11099">not</span> </span> <span class="easylrc-word" data-timestamp="11414">yours</span> </p> <p class="easylrc-line easylrc-v2" data-timestamp="11651"> .. and so on </p> .. and so on </div> <div class="easylrc-group-v1"> ... and so on </div> ... and so on class="p"></div>

Classes, IDs and Values

Common

easylrc-lyrics - main block with lyrics content inside, wrapping all of the output.
easylrc-group-v1 / easylrc-group-v2 - voice group container. Groups consecutive lines belonging to the same voice. If no voice provided, defaults to easylrc-group-v1.
easylrc-line - class for a single line.
easylrc-v1 / easylrc-v2 - specifies to what voice either line belongs. If no voice provided, defaults to easylrc-v1.
easylrc-current - line that is being currently played.
data-timestamp="<int>" - contains timestamp of current word/line.

eLRC exclusive

easylrc-word - block for single word.
easylrc-current-words - block of words that are being currently played. Contains span blocks with easylrc-word.

Current tags separation

What's the point of easylrc-current and easylrc-current-words being separate?

easylrc-current is for line exactly, and is an ID, because there can be only one active line at the time; while easylrc-current-words being an class and is for separate words, for a case, when for example, you would make current line bigger than others, but only highlighted text more bright color.

Example

HTML CSS

<div class="easylrc-lyrics">
    <div class="easylrc-group-v1">
        <p class="easylrc-line easylrc-v1" data-timestamp="5000">
            <span class="easylrc-word" data-timestamp="5000">This</span>
            <span class="easylrc-word" data-timestamp="5500">is</span>
            <span class="easylrc-word" data-timestamp="6000">the</span>
            <span class="easylrc-word" data-timestamp="6500">first</span>
            <span class="easylrc-word" data-timestamp="7000">line</span>
        </p>
        <p class="easylrc-line easylrc-v1" data-timestamp="10500" id="easylrc-current">
            <span class="easylrc-current-words">
                <span class="easylrc-word" data-timestamp="10500">Here</span>
                <span class="easylrc-word" data-timestamp="11000">comes</span>
            </span>
            <span class="easylrc-word" data-timestamp="11500">the</span>
            <span class="easylrc-word" data-timestamp="12000">second</span>
            <span class="easylrc-word" data-timestamp="12500">line</span>
        </p>
        <p class="easylrc-line easylrc-v1" data-timestamp="15200">
            <span class="easylrc-word" data-timestamp="15200">And</span>
            <span class="easylrc-word" data-timestamp="15500">now</span>
            <span class="easylrc-word" data-timestamp="16000">the</span>
            <span class="easylrc-word" data-timestamp="16500">third</span>
            <span class="easylrc-word" data-timestamp="17000">line</span>
        </p>
    </div>
</div>

@font-face {
    font-family: 'Geologica';
    font-style: normal;
    font-weight: 400;
    src: url("https://static.0x20.fun/fonts/GeologicaNerdFont-Medium.ttf");
}

.easylrc-lyrics {
    background-color: black;
    color: gray;
    font-family: Geologica, sans-serif;
    font-weight: 500;
    font-size: larger;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0.5rem 1rem;
}

.easylrc-line {
    margin: 0;
}

.easylrc-v1 {
    text-align: left;
}

.easylrc-v2 {
    text-align: right;
}

#easylrc-current {
    font-size: x-large;
}

.easylrc-current-words {
    font-weight: 600;
    color: white;
}

This is the first line

Here comes the second line

And now the third line

JSON

render_json()

Primarily supported

Example output

eLRCLRC

Target timestamp - 11200 ms.

Command - ezlrc -rjson "Taking What's Not Yours - TV Girl.flac" 11200

[
    {
        "type": "ext",
        "timestamp": 9558,
        "current": true,
        "voice": 2,
        "text": "Thievin', stealin', taking what's not yours",
        "words": [
            {
                    "timestamp": 9558,
                    "current": true,
                    "text": "Thievin',"
            },
            {
                    "timestamp": 10090,
                    "current": true,
                    "text": "stealin',"
            },
            {
                    "timestamp": 10500,
                    "current": true,
                    "text": "taking"
            },
            {
                    "timestamp": 10795,
                    "current": true,
                    "text": "what's"
            },
            {
                    "timestamp": 11099,
                    "current": true,
                    "text": "not"
            },
            {
                    "timestamp": 11414,
                    "current": false,
                    "text": "yours"
            }
        ]
    },
    ... and so on
]

Target timestamp - 60000ms.

Command - ezlrc -rjson song.lrc 60000

[
    {
        "type": "std",
        "timestamp": 60000,
        "current": true,
        "voice": 1,
        "text": "First line"
    },
    {
        "type": "std",
        "timestamp": 120000,
        "current": false,
        "voice": 1,
        "text": "Second line"
    },
    {
        "type": "std",
        "timestamp": 210000,
        "current": false,
        "voice": 1,
        "text": "Third line"
    }
]

More examples in CLI

Blocks

Common

Key	Type	Only options	Description	Reference
`"type"`	string	`"std"` \| `"ext"`	Type of lyrics	easylrc::lrc_type_t
`"timestamp"`	integer		Timestamp of lyrics	easylrc::std_line_t easylrc::ext_line_t
`"current"`	boolean		Is this line current?
`"voice"`	integer		Current voice index	easylrc::ext_line_t
`"text"`	string		Whole line text	easylrc::std_line_t easylrc::ext_line_t

eLRC exclusive

Key	Type	Description	Reference
`"words"`	json array	Separate words group	easylrc::ext_line_t

`"words": []`

Key	Type	Description	Reference
`"timestamp"`	integer	Timestamp of word	easylrc::ext_word_t
`"current"`	boolean	Is this word current?
`"text"`	string	Word text contents	easylrc::ext_word_t

XML

render_xml()

Partial support

This feature exists for edge cases and is not primarily supported.

Example output

Target timestamp - 11200 ms.

Command - ezlrc -rxml "Taking What's Not Yours - TV Girl.flac" 11200

<lyric>
    <v2>
        <line current="true" timestamp="9558">
            <current-words>
                <word timestamp="9558">Thievin',</word>
                <word timestamp="10090">stealin',</word>
                <word timestamp="10500">taking</word>
                <word timestamp="10795">what's</word>
                <word timestamp="11099">not</word>
            </current-words>
            <word timestamp="11414">yours</word>
        </line>
        <line current="false" timestamp="11651">
            <word timestamp="11651">Taking</word>
            <word timestamp="12020">what's</word>
            <word timestamp="12329">not</word>
            <word timestamp="12645">yours,</word>
            <word timestamp="12948">taking</word>
            <word timestamp="13245">what's</word>
            <word timestamp="13549">not</word>
            <word timestamp="13864">yours</word>
        </line>
        ... and so on
    </v2>
    <v1>
        <line current="false" timestamp="28682">
            <word timestamp="28682">I</word>
            <word timestamp="28861">don't</word>
            <word timestamp="29069">really</word>
            <word timestamp="29265">know</word>
            <word timestamp="29438">if</word>
            <word timestamp="29747">she</word>
            <word timestamp="29949">cares</word>
            <word timestamp="30306">or</word>
            <word timestamp="30419">not</word>
        </line>
        ... and so on
    </v1>
    ... and so on
</lyric>

More examples in CLI

Blocks and Values

Common

lyrics - just sets start and end of the lyrics table. Can be changed with custom_tag argument of the library function or ezlrc CLI utility.
v1 / v2 - voice group container. Groups consecutive lines belonging to the same voice. If no voice provided defaults to <v1>.
line - contains one line's text in case of LRC, conatins <word>s in case of eLRC.
- current="<boolean>" - shows if this line is the one currently played.
- timestamp="<int>" - line's timestamp.

eLRC exclusive

word - block for single word.
- timestamp="<int>" - word's timestamp.
current-words - block of words that are being currently played. Contains word blocks.

Usage

Having ready unparsed LRC content

To use easylrc::Render module, you have to include <easylrc/render.h>

#include <easylrc/render.h>
#include <string>  // for std::string

// create out object
easylrc::Render render;

// so we have out lrc
std::string lrc = "
[01:00]First line
[02:00]Second line
[03:30]Third line
"

// let's set out timestamp to 2000ms (2s) for example
unsigned int timestamp = 2000;

// parse it!
std::string parsed = render.render_html(lrc, timestamp);

// output it to console :P
std::cout << parsed << std::endl;

Getting from file

To use easylrc::Parser module, you have to include <easylrc/parser.h>

#include <easylrc/parser.h>
#include <easylrc/render.h>
#include <string> // for std::string
#include <iostream> // for std::cout

// create our objects
easylrc::Parser parser;
easylrc::Render render;

// set path to file which we extract lyrics from
std::string path = "/path/to/file.flac";

// let's set out timestamp to 12000ms (12s) for example
unsigned int timestamp = 12000;

// load file
parser.load_lrc(path);

// parse it!
std::string parsed = render.render_json(parser.get(), timestamp);

// we can now clear parser's memory as we won't call it anymore
parser.clear();

// output it to console :P
std::cout << parsed << std::endl;