Screenshot

Description

Enhance your audio player by adding a interactive lyrics display feature.
Now you can navigate through the player using the lyrics for a more engaging and organized listening experience. It allows you to seamlessly review your audio notes and highlights.

Usage

Basic

Include an audio source and .lrc format lyrics in the lrc code block.
You can specify the source of the audio file either as a filepath or as an internal link.

1. Using an internal link source:

```lrc
source [[audio_file.mp3]]
[00:01.00] your .lrc format contents
[00:02.00] ....
```

2. Using a filepath source:

```lrc
source path/to/your_audio_file.mp3
[00:01.00] your .lrc format contents
[00:02.00] ....
```

Context Menu

In the Reading View, right-click on the area where lyrics are displayed to use context menu.

• play/pause audio player
• toggle auto-scroll
• toggle sentence mode
• seek
• edit

Styling

Customize your own styles by utilizing the CSS classes provided below.

<span class="lyrics-wrapper lyrics-highlighted" >
    <span data-lyid="35" data-time="538120" class="lyrics-timestamp">08:58</span>
    <span class="lyrics-text">
        Lyrics Text ...
    </span >
</span>

• lyrics-wrapper: the entire lyrics line.
• lyrics-timestamp: timestamp of the lyrics.
• lyrics-text: text content of the lyrics.
• lyrics-highlighted: mark the current highlighted lyrics.

---