Merge pull request #593 from ProudBenzene/lyrics

added lyrics
PKM-er · Jan 1, 2024 · 98c0c08 · 98c0c08
2 parents 116dad7 + b63c210
commit 98c0c08
Show file tree

Hide file tree

Showing 2 changed files with 261 additions and 0 deletions.
diff --git a/10-Obsidian/Obsidian外观/CSS 片段/Lyrics插件样式-音乐播放界面美化.md b/10-Obsidian/Obsidian外观/CSS 片段/Lyrics插件样式-音乐播放界面美化.md
@@ -0,0 +1,62 @@
+---
+uid: 20231229235957
+title: Lyrics插件样式-音乐播放界面美化
+tags:
+  - Obsidian
+  - css
+  - 美化
+  - Lyrics
+  - 音乐
+description: 美化 Lyrics 插件的歌词界面
+author: ProudBenzene
+type: advanced
+draft: false
+editable: false
+modified: 20231230000142
+---
+
+# Lyrics 插件样式 - 音乐播放界面美化
+
+## 引言
+
+[[Lyrics|Obsidian Lyrics]] 插件可以将 Obsidian 变成一个带有滚动歌词的音乐播放器，美中不足是默认样式外观较为一般，遂根据插件作者的指引进行一些自定义美化设置。
+
+## 代码
+
+```css
+body {
+    --font-lyrics: Bookerly, 方正聚珍新仿简繁;
+}
+
+body.colorful-link-animation :is(.markdown-preview-view,.markdown-rendered) .lyrics-line .lyrics-timestamp:hover {
+    animation: 2s colorful-link infinite;
+    cursor: pointer;
+}
+
+@keyframes colorful-link {
+    0% { filter: hue-rotate(0deg); }
+    100% { filter: hue-rotate(360deg); }
+}
+
+.lyrics-line p {
+    font-family: var(--font-lyrics) !important;
+    font-weight: bold;
+}
+
+.lyrics-highlighted .lyrics-text {
+    color: purple;
+    background: linear-gradient(45deg,#FD8A8A 0%,#FFBF9B 11%,#FFDD83 22%,#DFFFD8 33%,#B4E4FF 44%,#ADA2FF 55%);;
+    border-radius: 5px;
+}
+
+```
+
+> [!note] 美化
+> 1. 增加了歌词字体自定义选项
+> 2. 鼠标悬浮在时间戳上时时间戳会呈彩色变换
+> 3. 彩虹色歌词高亮
+
+
+## 效果展示
+
+![](https://cdn.pkmer.cn/images/202312300105522.gif!pkmer)
diff --git a/10-Obsidian/Obsidian社区插件/Lyrics.md b/10-Obsidian/Obsidian社区插件/Lyrics.md
@@ -0,0 +1,199 @@
+---
+uid: 20231229210706
+title: 用 Obsidian 收藏心爱的音乐——Lyrics 插件
+tags:
+  - Obsidian
+  - 插件
+  - 音乐
+  - 歌词
+description: 将 Obsidian 变成音乐播放器的插件——Lyrics
+author: ProudBenzene
+type: basic
+draft: false
+editable: false
+modified: 20231230000121
+---
+
+# 用 Obsidian 收藏心爱的音乐——Lyrics 插件
+
+## 概述
+
+> [!Note] 插件名片
+> - 插件名称：Lyrics
+> - 插件版本：1.0.7
+> - 插件作者：eatgrass
+> - 插件描述：通过添加交互式歌词显示功能，增强您的 Obsidian 音频播放器。
+> - 插件项目地址：[点我跳转](https://github.com/eatgrass/obsidian-lyrics)
+> - 插件安装：[点我跳转](obsidian://show-plugin?id=lyrics)
+
+## `.lrc` 文件
+
+听音乐比较多的朋友应该都了解 `.lrc` 文件。这是一种通用的歌词文件格式，以 `.lrc` 为扩展名的歌词文件可以在各类数码播放器中同步显示。
+
+`.lrc` 格式是一种文字格式，与电视和电影的 [字幕]( https://zh.wikipedia.org/wiki/%E5%AD%97%E5%B9%95 "字幕") 文件很相似，以下是一个简单的示例：
+
+> [02:11.106] 言葉の雨に打たれ
+> [02:11.106] 沐浴话语之雨
+> [02:15.886] 秋惜しむまま冬に落ちる
+> [02:15.886] 惜秋不尽 落入深冬
+> [02:20.763] 春の山のうしろからまた一つ煙が立つ
+> [02:20.763] 春山背后 又一缕轻烟升起
+> [02:29.237] 夏風が頬を滑る
+> [02:29.237] 夏风划过脸颊
+
+## 使用方法
+
+### 基础
+
+`lrc` 代码块中包括两个要素，**音频路径**与**歌词**：
+
+其中**音频路径**支持文件路径与 Wiki 链接：
+
+使用 Wiki 链接：
+
+````
+```lrc
+source [[audio_file.mp3]]
+[00:01.00] your .lrc format contents
+[00:02.00] ….
+```
+````
+
+使用文件路径：
+
+````
+```lrc
+source path/to/your_audio_file.mp3
+[00:01.00] your .lrc format contents
+[00:02.00] ….
+```
+````
+
+### 右键菜单命令
+
+阅读模式下右键点击歌词区域可以出现右键菜单命令：
+
+- play/pause audio player 播放/暂停音频播放器
+- toggle auto-scroll 切换自动滚动
+- toggle sentence mode 切换句子模式
+- seek 寻找
+- edit 编辑
+
+### 定制
+
+利用下面提供的 CSS 类，可以自定义自己喜欢的样式：
+
+```css
+<span class="lyrics-line" data-lyid="36" data-time="84160">
+	<span class="lyrics-timestamp" data-lyid="36" data-time="84160">01:24</span>
+	<p>Happy birthday.</p>
+</span>
+```
+
+- `.lyrics-line`：整段歌词
+- `.lyrics-line .lyrics-timestamp`：歌词的时间戳
+- `.lyrics-line p`：歌词的文本内容
+- `.lyrics-highlighted`：标记当前突出显示的歌词
+
+## 使用技巧
+
+以下示例中的示例代码如下：
+
+````
+```lrc
+source [[10 - Thoughtcrime.flac]]
+
+[ar:ヨルシカ]
+[al:盗作]
+[ti:思想犯]
+[length:253.6]
+[00:00.000] 作词 : n-buna
+[00:01.000] 作曲 : n-buna
+[00:28.280]他人に優しいあんたにこの心がわかるものか
+[00:28.280]对他人温柔以待的你  怎会明白我的心情
+[00:33.111]人を呪うのが心地良い、だから詩を書いていた
+[00:33.111]诅咒他人让我感到愉悦  所以我才写着诗歌
+[00:37.915]朝の報道ニュースにいつか載ることが夢だった
+[00:37.915]能够有朝一日登上早上报道的新闻  是我的梦想
+[00:42.912]その為に包丁を研いでる
+[00:42.912]为此我一直打磨着菜刀
+[00:46.861]
+[00:47.252]硝子を叩きつける音、何かの紙を破くこと、
+[00:47.252]砸碎玻璃的声音  撕碎不知道写着什么的纸
+[00:52.627]さよならの後の夕陽が美しいって、君だってわかるだろ
+[00:52.627]离别后的夕阳是如此的美丽  你也应该是知道的吧
+[00:58.986]
+[00:59.231]烏の歌に茜
+[00:59.231]渡鸦之歌染上晚霞
+[01:03.894]この孤独も今音に変わる
+[01:03.894]如今将这份孤独也化作音符
+[01:08.934]面影に差した日暮れ
+[01:08.934]昔日面影  被黄昏笼罩
+[01:12.727]爪先立つ、雲が焼ける、さよならが口を滑る
+[01:12.727]轻踮脚尖  晚霞满天  不经意间道出别离
+[01:22.266]
+[01:40.422]認められたい、愛したい
+[01:40.422]想要得到认可  想要去爱上他人
+[01:43.129]これが夢ってやつか
+[01:43.129]这就是所谓的梦想吗
+[01:45.018]何もしなくても叶えよ、早く、僕を満たしてくれ
+[01:45.018]即使什么也不做也想要实现啊  快点  填满这内心空无一物的我啊
+[01:49.908]他人に優しい世間にこの妬みがわかるものか
+[01:49.908]对他人温柔以待的这个社会  怎能体会这种嫉妒
+[01:54.597]いつも誰かを殴れる機会を探してる
+[01:54.597]一直都在寻找着机会能狠狠揍别人一顿
+[01:58.627]
+[01:59.298]ビール瓶で殴る街路灯、投げるギターの折れる音、
+[01:59.298]拿着啤酒瓶敲打路灯  摔在地上的吉他折断的声音
+[02:04.411]戻らない後悔の全部が美しいって、そういうのさぁ、僕だってわかるのに
+[02:04.411]所有无法挽回的后悔都如此的美丽  这种事情  明明我也知道啊
+[02:10.891]
+[02:11.106]言葉の雨に打たれ
+[02:11.106]沐浴话语之雨
+[02:15.886]秋惜しむまま冬に落ちる
+[02:15.886]惜秋不尽  落入深冬
+[02:20.763]春の山のうしろからまた一つ煙が立つ
+[02:20.763]春山背后  又一缕轻烟升起
+[02:29.237]夏風が頬を滑る
+[02:29.237]夏风划过脸颊
+[02:34.441]
+[02:42.858]他人に優しいあんたにこの孤独がわかるものか
+[02:42.858]对他人温柔以待的你  怎会明白这份孤独
+[02:47.336]死にたくないが生きられない、だから詩を書いている
+[02:47.336]并不想了结自己但也已经没法活下去了  所以我才写着诗歌
+[02:52.363]罵倒も失望も嫌悪も僕への興味だと思うから
+[02:52.363]将谩骂、失望、厌恶都当成是他人对我的感兴趣的表现
+[02:57.447]他人を傷付ける詩を書いてる
+[02:57.447]所以我才写着伤害他人的诗歌
+[03:02.045]こんな中身のない詩を書いてる
+[03:02.045]写着如此空洞的诗歌
+[03:06.491]
+[03:07.547]君の言葉が呑みたい
+[03:07.547]想要将你的话语吞下
+[03:13.365]入れ物もない両手で受けて
+[03:13.365]没有可以用来盛的东西  只好用双手接过
+[03:18.266]いつしか喉が潤う
+[03:18.266]等待着有一天
+[03:22.266]その時を待ちながら
+[03:22.266]能滋润我干渴的喉咙
+[03:27.274]
+[03:27.714]烏の歌に茜
+[03:27.714]渡鸦之歌染上晚霞
+[03:32.588]この孤独よ今詩に変われ
+[03:32.588]这份孤独啊  现在就给我化作诗歌
+[03:37.540]さよなら、君に茜
+[03:37.540]于此道别  晚霞将你染尽
+[03:41.625]僕は今、夜を待つ
+[03:41.625]如今  我等待着夜晚
+[03:46.549]また明日。口が滑る
+[03:46.549]明天再见。不小心说漏了嘴
+```
+````
+
+1. 将音频导入到 Obsidian 库中
+2. 新建一篇笔记，将音频对应的歌词文件复制粘贴到 Lyric 插件的特定代码块中（如果没有歌词文件，可以自己按照 `.lrc` 格式的样式编写文本）
+3. 在代码块的最开头声明音频文件，将音频与歌词关联起来，效果如下：![](https://cdn.pkmer.cn/images/202312292159851.gif!pkmer)
+4. 正常情况下，播放音频后，正在播放的一行音频会高亮，以及类似打字机模式的屏幕居中效果
+5. 点击前面的时间节点即可使音频跳转至该节点
+
+另外，我个人的 DIY 美化播放界面，参见 [[Lyrics插件样式-音乐播放界面美化]] 文章。