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:

2. Using a filepath source:

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.