Skip to content

Enhance your Obsidian audio player by adding a interactive lyrics display feature.

License

Notifications You must be signed in to change notification settings

eatgrass/obsidian-lyrics

Repository files navigation

Screenshot

Screen Recording 2023-12-05 at 14 29 53

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

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] ....
```
  1. 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.

BuyMeACoffee