Lyrics

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

Installation

Obsidian Community Plugins

obsidian://show-plugin?id=lyrics

Basic Usage

Include an audio source and subtitle contents in the lrc code block.

Supported Subtitle Format

• LRC
• SRT

Specifying the Audio Source

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
1
00:02:16,612 --> 00:02:19,376
Your .srt format contents

2
00:02:19,482 --> 00:02:21,609
Hello ==Lyrics==
```

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-line" data-lyid="36" data-time="84160">
    <span class="lyrics-timestamp" data-lyid="36" data-time="84160">01:24</span>
    <div class="lyrics-text">
        <p>Hello Lyrics</p>
    </div>
</span>

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

---