From 676814ca4b688ca1c46141834c7cbc9d921253a6 Mon Sep 17 00:00:00 2001
From: Septs <github@septs.pw>
Date: Sun, 7 Aug 2022 12:59:52 +0800
Subject: [PATCH] refactor audio player

---
 assets/customize.js                         |  19 +++
 content/docs/honpen/appendix-1/_index.md    |  15 +--
 content/docs/honpen/chapter-4/_index.md     |  28 ++--
 content/docs/sokko-boi/appendix-1/_index.md |  63 +--------
 content/docs/sokko-boi/appendix-3/_index.md |  10 +-
 content/docs/sokko-boi/chapter-3/_index.md  |  44 +++----
 content/docs/sokko-boi/chapter-4/_index.md  |  40 +++---
 content/docs/sokko-boi/chapter-7/_index.md  |   8 +-
 data/honpen-track.yaml                      |  33 +++++
 data/sokko-boi-appendix.yaml                |  15 +++
 data/sokko-boi-track.yaml                   | 135 ++++++++++++++++++++
 layouts/shortcodes/audio.html               |  12 +-
 layouts/shortcodes/track-index.html         |  23 ++++
 13 files changed, 300 insertions(+), 145 deletions(-)
 create mode 100644 data/honpen-track.yaml
 create mode 100644 data/sokko-boi-appendix.yaml
 create mode 100644 data/sokko-boi-track.yaml
 create mode 100644 layouts/shortcodes/track-index.html

diff --git a/assets/customize.js b/assets/customize.js
index 06b2f47..3022276 100644
--- a/assets/customize.js
+++ b/assets/customize.js
@@ -12,3 +12,22 @@ Array.from(document.getElementsByTagName("audio")).forEach(function (
     });
   });
 });
+
+var trackList = document.querySelector(".track-list");
+if (trackList) {
+  trackList.addEventListener("click", function (event) {
+    if (event.target.tagName !== "A") return;
+    event.preventDefault();
+    event.stopPropagation();
+    var href = event.target.href;
+
+    var player = document.querySelector(".audio-player");
+
+    player.querySelector("figcaption > b").textContent =
+      event.target.dataset.caption;
+
+    var audio = player.querySelector("audio");
+    audio.src = href;
+    audio.play();
+  });
+}
diff --git a/content/docs/honpen/appendix-1/_index.md b/content/docs/honpen/appendix-1/_index.md
index 9641bf1..33154fe 100644
--- a/content/docs/honpen/appendix-1/_index.md
+++ b/content/docs/honpen/appendix-1/_index.md
@@ -4,20 +4,7 @@ weight: 101
 description: 附录 1：CD 收录内容 - 成为女孩子的声音！
 ---
 
-```csv
-编号,介绍
-{{< track-link "honpen-track/01.mp3" >}},序
-{{< track-link "honpen-track/02.mp3" >}},介绍
-{{< track-link "honpen-track/03.mp3" >}},VIP 店长台词演绎
-{{< track-link "honpen-track/04.mp3" >}},阶段 1 - 锻炼本音
-{{< track-link "honpen-track/05.mp3" >}},假声练习
-{{< track-link "honpen-track/06.mp3" >}},阶段 2 - 锻炼假声
-{{< track-link "honpen-track/07.mp3" >}},阶段 3 - 紧紧的连接本音和假声
-{{< track-link "honpen-track/08.mp3" >}},阶段 4 - 学会女声
-{{< track-link "honpen-track/09.mp3" >}},熟练学会颤音吧
-{{< track-link "honpen-track/10.mp3" >}},学习哨音
-{{< track-link "honpen-track/11.mp3" >}},学习男声
-```
+{{< track-index honpen-track >}}
 
 ---
 
diff --git a/content/docs/honpen/chapter-4/_index.md b/content/docs/honpen/chapter-4/_index.md
index de51dab..211664a 100644
--- a/content/docs/honpen/chapter-4/_index.md
+++ b/content/docs/honpen/chapter-4/_index.md
@@ -94,13 +94,13 @@ description: 第四章 具体的练习方法 - 成为女孩子的声音！
 
 ## 锻炼本音 {#original-voice}
 
-{{< audio "honpen-track/01.mp3" "序" >}}
+{{< audio honpen-track 1 >}}
 
-{{< audio "honpen-track/02.mp3" "介绍" >}}
+{{< audio honpen-track 2 >}}
 
-{{< audio "honpen-track/03.mp3" "VIP 店长台词演绎" >}}
+{{< audio honpen-track 3 >}}
 
-{{< audio "honpen-track/05.mp3" "假声的引导方法" >}}
+{{< audio honpen-track 5 >}}
 
 ## （阶段 0）听一些歌吧 {#stage-0}
 
@@ -161,9 +161,11 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 **发出本音吧**
 
-{{< audio "honpen-track/04.mp3" >}}
+首先请先发出 CD 中【音轨 4】一样的本音。
 
-首先请先发出 CD 中【音轨 4】一样的本音。使用你正常说话时使用的声音发出“啊——”吧。容易发出的较低的声音，三秒左右就可以了。
+{{< audio honpen-track 4 >}}
+
+使用你正常说话时使用的声音发出“啊——”吧。容易发出的较低的声音，三秒左右就可以了。
 
 即使是说本音，在这个状态下也有各种各样的发声。比如关紧喉咙的。让气息更多露出的，过于抬升喉结的。嘴过于张开的。发音变得很暧昧的……。
 
@@ -186,7 +188,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 锻炼了本音之后，接下来是“假声”。多数的男性，可能会有“我可发不出假声啊”这样的挫折。但是，完全没有放弃的必要哦！
 
-{{< audio "honpen-track/06.mp3" "阶段 2 - 锻炼假声" >}}
+{{< audio honpen-track 6 >}}
 
 实际上，假声和女声之间并没有直接的关系。因为女性并不是常常使用假声说话呢。大多数的人，和男性一样以本音在讲话。
 但是，直接上没有关系的东西，男性发出女声上有间接的，深刻伴随着的关系。并不仅仅是有着直接关系的东西会触碰到事情的根源。
@@ -299,7 +301,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 这是作出混声的练习。一口气，从本音顺滑地连接到假声吧。这个时候，为了让转换点不那么明显，还需要很多的练习。
 
-{{< audio "honpen-track/07.mp3" "阶段 3 - 紧紧的连接本音和假声" >}}
+{{< audio honpen-track 7 >}}
 
 **从假声顺滑地移动到本音**
 
@@ -309,7 +311,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 终于到了本书的正题，现在开始进入到“女声”的领域。虽然不会成为一般的练习，但请和直到 阶段 3 为止的练习平行进行吧。
 
-{{< audio "honpen-track/08.mp3" "阶段 4 - 学会女声" >}}
+{{< audio honpen-track 8 >}}
 
 从现在开始，让我们进入到为了习得女声的练习当中吧。虽然 阶段 1 到 阶段 3 之间可以作为普通的嗓音训练使用，因为在这个阶段是专门为女声特化的内容，
 并没有提升歌唱能力的益处。同时，仅仅在这个阶段中，因为为了能得到理想的发声，因此包含着不适合普通练习的方法。
@@ -513,7 +515,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 ## 熟练使用颤音吧 {#use-trill}
 
-{{< audio "honpen-track/09.mp3" "熟练学会颤音吧" >}}
+{{< audio honpen-track 9 >}}
 
 关于颤音，虽然在这个阶段没有记住的必要，对于感受到实际效果和维持自己的动力也是有效果的。在这里作为参考进行解说吧。
 
@@ -547,7 +549,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 {{< tabs "vibrato"  >}}
 {{< tab "颤音练习 1" >}}
 
-{{< audio "honpen-track/09.mp3" >}}
+{{< audio honpen-track 9 >}}
 
 跟随 CD 说“wow”吧【音轨 09】
 
@@ -573,7 +575,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 ## 以超高音发出哨音 {#whistle-voice}
 
-{{< audio "honpen-track/10.mp3" "学习哨音" >}}
+{{< audio honpen-track 10 >}}
 
 在这里，对极端的高音进行练习。虽然对于用处还是十分微妙的，但是挑战高音的事情是十分有益的。
 
@@ -597,7 +599,7 @@ CD 的声音，对各声音的特征都容易捕捉，比起理想的状态来
 
 ## 相反发出像男性的声音 {#male-voice}
 
-{{< audio "honpen-track/11.mp3" "学习男声" >}}
+{{< audio honpen-track 11 >}}
 
 熟悉了自己的女声的话，反而会出现担心自己就成为女声的事情了。这时候反而进行“男声”的练习的话，享受这时候的反转吧。顺利的话，可以演绎出女声和男声的对话哦。
 
diff --git a/content/docs/sokko-boi/appendix-1/_index.md b/content/docs/sokko-boi/appendix-1/_index.md
index e0510c2..6b7db8e 100644
--- a/content/docs/sokko-boi/appendix-1/_index.md
+++ b/content/docs/sokko-boi/appendix-1/_index.md
@@ -7,68 +7,7 @@ description: 附录 1：CD 收录内容 - 成为女孩子的声音！即效嗓
 
 ## CD 中音轨的构成如下 {#cd-tracks}
 
-### 本音的练习 {#original-voice}
-
-```csv
-编号,介绍
-{{< track-link "sokko-boi-track/01.mp3" >}},腹式呼吸练习 1
-{{< track-link "sokko-boi-track/02.mp3" >}},腹式呼吸练习 2
-{{< track-link "sokko-boi-track/03.mp3" >}},断音换气
-{{< track-link "sokko-boi-track/04.mp3" >}},唇颤音
-{{< track-link "sokko-boi-track/05.mp3" >}},舌颤音
-{{< track-link "sokko-boi-track/06.mp3" >}},哼唱
-{{< track-link "sokko-boi-track/07.mp3" >}},发声练习“啊”
-{{< track-link "sokko-boi-track/08.mp3" >}},高音域的哼唱
-{{< track-link "sokko-boi-track/09.mp3" >}},高音域的“啊”
-{{< track-link "sokko-boi-track/10.mp3" >}},样式 1
-{{< track-link "sokko-boi-track/11.mp3" >}},样式 2
-{{< track-link "sokko-boi-track/12.mp3" >}},样式 3
-{{< track-link "sokko-boi-track/13.mp3" >}},样式 4
-{{< track-link "sokko-boi-track/14.mp3" >}},样式 5
-{{< track-link "sokko-boi-track/15.mp3" >}},样式 6
-{{< track-link "sokko-boi-track/16.mp3" >}},样式 7
-{{< track-link "sokko-boi-track/17.mp3" >}},样式 8
-{{< track-link "sokko-boi-track/18.mp3" >}},样式 9
-{{< track-link "sokko-boi-track/19.mp3" >}},样式 10
-{{< track-link "sokko-boi-track/20.mp3" >}},样式 11
-{{< track-link "sokko-boi-track/21.mp3" >}},样式 12
-{{< track-link "sokko-boi-track/22.mp3" >}},样式 13
-```
-
-### 假声的练习 {#falsetto}
-
-```csv
-编号,介绍
-{{< track-link "sokko-boi-track/23.mp3" >}},唇颤音
-{{< track-link "sokko-boi-track/24.mp3" >}},舌颤音
-{{< track-link "sokko-boi-track/25.mp3" >}},发声练习“哈”
-{{< track-link "sokko-boi-track/26.mp3" >}},高音域的“哈”
-{{< track-link "sokko-boi-track/27.mp3" >}},样式 1
-{{< track-link "sokko-boi-track/28.mp3" >}},样式 2
-{{< track-link "sokko-boi-track/29.mp3" >}},样式 3
-{{< track-link "sokko-boi-track/30.mp3" >}},样式 4
-{{< track-link "sokko-boi-track/31.mp3" >}},样式 5
-{{< track-link "sokko-boi-track/32.mp3" >}},样式 6
-{{< track-link "sokko-boi-track/33.mp3" >}},样式 7
-{{< track-link "sokko-boi-track/34.mp3" >}},样式 8
-{{< track-link "sokko-boi-track/35.mp3" >}},样式 9
-{{< track-link "sokko-boi-track/36.mp3" >}},样式 10
-{{< track-link "sokko-boi-track/37.mp3" >}},样式 11
-{{< track-link "sokko-boi-track/38.mp3" >}},样式 12
-{{< track-link "sokko-boi-track/39.mp3" >}},样式 13
-{{< track-link "sokko-boi-track/40.mp3" >}},混声练习 1
-{{< track-link "sokko-boi-track/41.mp3" >}},混声练习 2
-```
-
-### 其他的练习 {#more}
-
-```csv
-编号,介绍
-{{< track-link "sokko-boi-track/42.mp3" >}},演技练习 1
-{{< track-link "sokko-boi-track/43.mp3" >}},演技练习 2
-{{< track-link "sokko-boi-track/44.mp3" >}},演技练习 3
-{{< track-link "sokko-boi-track/45.mp3" >}},演技练习 4
-```
+{{< track-index sokko-boi-track >}}
 
 ## 音轨下载 {#download-link}
 
diff --git a/content/docs/sokko-boi/appendix-3/_index.md b/content/docs/sokko-boi/appendix-3/_index.md
index 0881d39..4974f64 100644
--- a/content/docs/sokko-boi/appendix-3/_index.md
+++ b/content/docs/sokko-boi/appendix-3/_index.md
@@ -36,7 +36,7 @@ CV：{{< wiki "伊藤加奈惠" >}}
 
 ## 音轨 17 出发前广播 七尾方面（松前 绪花） {#track-17}
 
-{{< audio "sokko-boi-appendix/17.mp3" >}}
+{{< audio sokko-boi-appendix 17 >}}
 
 ```quote
 本日は、のと鉄道をご利用いただき
@@ -76,7 +76,7 @@ CV：{{< wiki "小见川千明" >}}
 
 ## 音轨 18 出发前广播 七尾方面（鹤来 民子） {#track-18}
 
-{{< audio "sokko-boi-appendix/18.mp3" >}}
+{{< audio sokko-boi-appendix 18 >}}
 
 ```quote
 本日は、のと鉄道をご利用いただき
@@ -116,7 +116,7 @@ CV：{{< wiki "丰崎爱生" >}}
 
 ## 音轨 19 出发前广播 七尾方面（押水 菜子） {#track-19}
 
-{{< audio "sokko-boi-appendix/19.mp3" >}}
+{{< audio sokko-boi-appendix 19 >}}
 
 ```quote
 本日は、のと鉄道をご利用いただき
@@ -158,7 +158,7 @@ CV：{{< wiki "户松遥" >}}
 
 ## 音轨 20 出发前广播 七尾方面（和仓 结名） {#track-20}
 
-{{< audio "sokko-boi-appendix/20.mp3" >}}
+{{< audio sokko-boi-appendix 20 >}}
 
 ```quote
 こにちは、本日はのと鉄道をご利用いただき
@@ -196,7 +196,7 @@ CV：{{< wiki "能登麻美子" >}}
 
 ## 音轨 21 出发前广播 七尾方面（轮岛 巴） {#track-21}
 
-{{< audio "sokko-boi-appendix/21.mp3" >}}
+{{< audio sokko-boi-appendix 21 >}}
 
 ```quote
 本日は、のと鉄道をご利用いただきありがとうございます
diff --git a/content/docs/sokko-boi/chapter-3/_index.md b/content/docs/sokko-boi/chapter-3/_index.md
index ccc1a40..86fe258 100644
--- a/content/docs/sokko-boi/chapter-3/_index.md
+++ b/content/docs/sokko-boi/chapter-3/_index.md
@@ -26,7 +26,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 1】一边进行实践。
 
-{{< audio "sokko-boi-track/01.mp3" "腹式呼吸练习 1" >}}
+{{< audio sokko-boi-track 1 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -58,7 +58,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 2】一边进行实践。
 
-{{< audio "sokko-boi-track/02.mp3" "腹式呼吸练习 2" >}}
+{{< audio sokko-boi-track 2 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -86,7 +86,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 3】一边进行实践。
 
-{{< audio "sokko-boi-track/03.mp3" "断音换气" >}}
+{{< audio sokko-boi-track 3 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -117,7 +117,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 4】一边进行实践。
 
-{{< audio "sokko-boi-track/04.mp3" "唇颤音" >}}
+{{< audio sokko-boi-track 4 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -143,7 +143,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 5】一边进行实践。
 
-{{< audio "sokko-boi-track/05.mp3" "舌颤音" >}}
+{{< audio sokko-boi-track 5 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -172,7 +172,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 以下的练习，请一边听添付 CD 的【音轨 6】一边进行实践。
 以下“嗯”的部分，请尝试保持在闭紧嘴的状态下发声。
 
-{{< audio "sokko-boi-track/06.mp3" "哼唱" >}}
+{{< audio sokko-boi-track 6 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -195,7 +195,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 7】一边进行实践。
 
-{{< audio "sokko-boi-track/07.mp3" "发声练习“啊”" >}}
+{{< audio sokko-boi-track 7 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -221,7 +221,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 以下的练习，请一边听添付 CD 的【音轨 8】一边进行实践。
 和一样以“嗯”的发音进行发声吧。
 
-{{< audio "sokko-boi-track/08.mp3" "高音域的哼唱" >}}
+{{< audio sokko-boi-track 8 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -240,7 +240,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 接下来，移动到添付 CD 的【音轨 9】进行。
 
-{{< audio "sokko-boi-track/09.mp3" "高音域的“啊”" >}}
+{{< audio sokko-boi-track 9 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -268,7 +268,7 @@ description: 第三章 尝试着进行发声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 10】一边进行实践。
 
-{{< audio "sokko-boi-track/10.mp3" "样式 1" >}}
+{{< audio sokko-boi-track 10 >}}
 
 ```quote
 nā（Mi 音 1 拍）
@@ -294,7 +294,7 @@ nā（Mi 音 1 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 11】一边进行实践。
 
-{{< audio "sokko-boi-track/11.mp3" "样式 2" >}}
+{{< audio sokko-boi-track 11 >}}
 
 ```quote
 nā（Mi 音 1 拍）
@@ -320,7 +320,7 @@ nā（Mi 音 1 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 12】一边进行实践。
 
-{{< audio "sokko-boi-track/12.mp3" "样式 3" >}}
+{{< audio sokko-boi-track 12 >}}
 
 ```quote
 nā nā nā nā nā nā nā nā
@@ -339,7 +339,7 @@ nā nā nā nā nā nā nā nā nā（Mi 音各半拍）
 
 以下的练习，请一边听添付 CD 的【音轨 13】一边进行实践。
 
-{{< audio "sokko-boi-track/13.mp3" "样式 4" >}}
+{{< audio sokko-boi-track 13 >}}
 
 ```quote
 妈（Mi 音各 1 拍）
@@ -361,7 +361,7 @@ nā nā nā nā nā nā nā nā nā（Mi 音各半拍）
 
 以下的练习，请一边听添付 CD 的【音轨 14】一边进行实践。
 
-{{< audio "sokko-boi-track/14.mp3" "样式 5" >}}
+{{< audio sokko-boi-track 14 >}}
 
 ```quote
 妈 妈（Mi 音各 1 拍）
@@ -383,7 +383,7 @@ nā nā nā nā nā nā nā nā nā（Mi 音各半拍）
 
 以下的练习，请一边听添付 CD 的【音轨 15】一边进行实践。
 
-{{< audio "sokko-boi-track/15.mp3" "样式 6" >}}
+{{< audio sokko-boi-track 15 >}}
 
 ```quote
 妈 妈 妈 妈（Mi 音各半拍）
@@ -405,7 +405,7 @@ nā nā nā nā nā nā nā nā nā（Mi 音各半拍）
 
 以下的练习，请一边听添付 CD 的【音轨 16】一边进行实践。
 
-{{< audio "sokko-boi-track/16.mp3" "样式 7" >}}
+{{< audio sokko-boi-track 16 >}}
 
 ```quote
 啦——————（Mi 音 8 拍）
@@ -426,7 +426,7 @@ nā nā nā nā nā nā nā nā nā（Mi 音各半拍）
 
 以下的练习，请一边听添付 CD 的【音轨 17】一边进行实践。
 
-{{< audio "sokko-boi-track/17.mp3" "样式 8" >}}
+{{< audio sokko-boi-track 17 >}}
 
 ```quote
 nā nā nā nā nā nā nā nā nā（Mi 音全 9 拍）
@@ -450,7 +450,7 @@ nā nā nā nā nā nā nā nā nā（Re 音全 9 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 18】一边进行实践。
 
-{{< audio "sokko-boi-track/18.mp3" "样式 9" >}}
+{{< audio sokko-boi-track 18 >}}
 
 ```quote
 妈（Mi 音）
@@ -472,7 +472,7 @@ nā nā nā nā nā nā nā nā nā（Re 音全 9 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 19】一边进行实践。
 
-{{< audio "sokko-boi-track/19.mp3" "样式 10" >}}
+{{< audio sokko-boi-track 19 >}}
 
 ```quote
 啦 蕾 哩 咯（Mi 音各半拍）
@@ -494,7 +494,7 @@ nā nā nā nā nā nā nā nā nā（Re 音全 9 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 20】一边进行实践。
 
-{{< audio "sokko-boi-track/20.mp3" "样式 11" >}}
+{{< audio sokko-boi-track 20 >}}
 
 ```quote
 啦累哩咯啦累哩咯啦累哩咯
@@ -513,7 +513,7 @@ nā nā nā nā nā nā nā nā nā（Re 音全 9 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 21】一边进行实践。
 
-{{< audio "sokko-boi-track/21.mp3" "样式 12" >}}
+{{< audio sokko-boi-track 21 >}}
 
 ```quote
 撒 sei 诗 苏 sei 嗖 撒 嗖
@@ -533,7 +533,7 @@ nā nā nā nā nā nā nā nā nā（Re 音全 9 拍）
 
 以下的练习，请一边听添付 CD 的【音轨 22】一边进行实践。
 
-{{< audio "sokko-boi-track/22.mp3" "样式 13" >}}
+{{< audio sokko-boi-track 22 >}}
 
 ```quote
 撒 sei 诗苏 sei 嗖撒嗖撒 sei 诗苏 sei 嗖撒嗖
diff --git a/content/docs/sokko-boi/chapter-4/_index.md b/content/docs/sokko-boi/chapter-4/_index.md
index f9e2693..85ac705 100644
--- a/content/docs/sokko-boi/chapter-4/_index.md
+++ b/content/docs/sokko-boi/chapter-4/_index.md
@@ -117,7 +117,7 @@ description: 第四章 尝试着进行假声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 23】一边进行实践。
 
-{{< audio "sokko-boi-track/23.mp3" "唇颤音" >}}
+{{< audio sokko-boi-track 23 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -132,7 +132,7 @@ description: 第四章 尝试着进行假声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 24】一边进行实践。
 
-{{< audio "sokko-boi-track/24.mp3" "舌颤音" >}}
+{{< audio sokko-boi-track 24 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -155,7 +155,7 @@ description: 第四章 尝试着进行假声练习吧 - 成为女孩子的声音
 以音阶上的 `So#` 音进行发声。
 请伴随着 CD 的声音进行发声。
 
-{{< audio "sokko-boi-track/25.mp3" "发声练习“哈”" >}}
+{{< audio sokko-boi-track 25 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -179,7 +179,7 @@ description: 第四章 尝试着进行假声练习吧 - 成为女孩子的声音
 
 以下的练习，请一边听添付 CD 的【音轨 26】一边进行实践。
 
-{{< audio "sokko-boi-track/26.mp3" "高音域的“哈”" >}}
+{{< audio sokko-boi-track 26 >}}
 
 ```quote
 吸入空气（4 拍）
@@ -205,7 +205,7 @@ description: 第四章 尝试着进行假声练习吧 - 成为女孩子的声音
 虽然是和第三章的练习相近，在这里以假声进行练习。同时，发声将会主要以日语中的ほ（hō）行进行，在这一点上也和前面有所不同。请一边听添付 CD 的【音轨 27】一边进行实践。
 所有的音都以音阶上的 Mi 音发出。
 
-{{< audio "sokko-boi-track/27.mp3" "样式 1" >}}
+{{< audio sokko-boi-track 27 >}}
 
 ```quote
 hō（1 拍）
@@ -232,7 +232,7 @@ hō（1 拍）
 以下的练习，请一边听添付 CD 的【音轨 28】一边进行实践。
 所有的音都以音阶上的 Mi 音发出。
 
-{{< audio "sokko-boi-track/28.mp3" "样式 2" >}}
+{{< audio sokko-boi-track 28 >}}
 
 ```quote
 hō（1 拍）
@@ -259,7 +259,7 @@ hō（1 拍）
 以下的练习，请一边听添付 CD 的【音轨 29】一边进行实践。
 （以音阶上的 Mi 音各半拍）
 
-{{< audio "sokko-boi-track/29.mp3" "样式 3" >}}
+{{< audio sokko-boi-track 29 >}}
 
 ```quote
 hō hō hō hō hō hō hō hō
@@ -279,7 +279,7 @@ hō hō hō hō hō hō hō hō hō
 以下的练习，请一边听添付 CD 的【音轨 30】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/30.mp3" "样式 4" >}}
+{{< audio sokko-boi-track 30 >}}
 
 ```quote
 哈（Mi 音 1 拍）
@@ -302,7 +302,7 @@ hō hō hō hō hō hō hō hō hō
 以下的练习，请一边听添付 CD 的【音轨 31】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/31.mp3" "样式 5" >}}
+{{< audio sokko-boi-track 31 >}}
 
 ```quote
 哈 哈（Mi 音各 1 拍）
@@ -325,7 +325,7 @@ hō hō hō hō hō hō hō hō hō
 以下的练习，请一边听添付 CD 的【音轨 32】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/32.mp3" "样式 6" >}}
+{{< audio sokko-boi-track 32 >}}
 
 ```quote
 哈 哈 哈 哈（Mi 音各 1 拍）
@@ -348,7 +348,7 @@ hō hō hō hō hō hō hō hō hō
 以下的练习，请一边听添付 CD 的【音轨 33】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/33.mp3" "样式 7" >}}
+{{< audio sokko-boi-track 33 >}}
 
 ```quote
 哈————————（Mi 音 1 拍）
@@ -372,7 +372,7 @@ hō hō hō hō hō hō hō hō hō
 以下的练习，请一边听添付 CD 的【音轨 34】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/34.mp3" "样式 8" >}}
+{{< audio sokko-boi-track 34 >}}
 
 ```quote
 拂 拂拂 拂拂 拂拂 拂拂（Mi 音全 9 拍）
@@ -399,7 +399,7 @@ hō hō hō hō hō hō hō hō hō
 因为是以假声追寻音阶，难度稍有提高。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/35.mp3" "样式 9" >}}
+{{< audio sokko-boi-track 35 >}}
 
 ```quote
 hī（Mi 音）
@@ -427,7 +427,7 @@ hī hī（Fa# Mi 音）
 以下的练习，请一边听添付 CD 的【音轨 36】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/36.mp3" "样式 10" >}}
+{{< audio sokko-boi-track 36 >}}
 
 ```quote
 啦 蕾 哩 咯（Mi 音各半拍）
@@ -450,7 +450,7 @@ Mi~Si 的音阶各为一组进行练习。
 以下的练习，请一边听添付 CD 的【音轨 37】一边进行实践。
 练习逐渐提高了音的数量，虽然假声的集中变得更加困难，但在这里反而不放弃，集中练习于此，将会能够发出更加自然的假声。
 
-{{< audio "sokko-boi-track/37.mp3" "样式 11" >}}
+{{< audio sokko-boi-track 37 >}}
 
 ```quote
 咔 keī kī 扣咔 keī kī 扣咔 keī kī 扣咔 keī kī 扣
@@ -475,7 +475,7 @@ Mi~Si 的音阶各为一组进行练习。
 如果发不出声音的话，请不要勉强，稍作休息吧。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/38.mp3" "样式 12" >}}
+{{< audio sokko-boi-track 38 >}}
 
 ```quote
 撒 sei 诗 苏 sei 嗖 撒 嗖
@@ -496,7 +496,7 @@ Mi~Si 的音阶各为一组进行练习。
 以下的练习，请一边听添付 CD 的【音轨 39】一边进行实践。
 全部以本音的音阶上的音发声。
 
-{{< audio "sokko-boi-track/39.mp3" "样式 13" >}}
+{{< audio sokko-boi-track 39 >}}
 
 ```quote
 他 teī 吃粗偷他偷他 teī 吃粗偷他偷
@@ -556,13 +556,13 @@ Mi~Si 的音阶各为一组进行练习。
 包括轻松的发声练习。
 首先请像添付 CD 的【音轨 40】一样找到音阶以“啊——”发声。
 
-{{< audio "sokko-boi-track/40.mp3" "混声练习 1" >}}
+{{< audio sokko-boi-track 40 >}}
 
 **尝试发出混声**
 
 接下来进行从本音发声中途转换到假声的发声练习。请像添付 CD 的【音轨 41】一样发声。
 
-{{< audio "sokko-boi-track/41.mp3" "混声练习 2" >}}
+{{< audio sokko-boi-track 41 >}}
 
 （先以本音）啊———（中途转换成假声）———
 
@@ -574,7 +574,7 @@ Mi~Si 的音阶各为一组进行练习。
 向本音中掺杂少许呼吸的话，应该可以进行良好的转换。
 因为掌握技巧是最重要的，所以只有跟随着【音轨 41】反复进行练习。
 
-{{< audio "sokko-boi-track/41.mp3" "混声练习 2" >}}
+{{< audio sokko-boi-track 41 >}}
 
 ## 其他的言语练习 {#more}
 
diff --git a/content/docs/sokko-boi/chapter-7/_index.md b/content/docs/sokko-boi/chapter-7/_index.md
index 9df17fd..ba72478 100644
--- a/content/docs/sokko-boi/chapter-7/_index.md
+++ b/content/docs/sokko-boi/chapter-7/_index.md
@@ -380,7 +380,7 @@ Windows 10：开始菜单 → 所有程序 → [语音录音机](https://support
 
 伴随着添付 CD 的【音轨 42】尝试着说出吧。
 
-{{< audio "sokko-boi-track/42.mp3" "演技练习 1" >}}
+{{< audio sokko-boi-track 42 >}}
 
 {{< tabs acting-1 >}}
 {{< tab "样式 1" >}}
@@ -420,7 +420,7 @@ Windows 10：开始菜单 → 所有程序 → [语音录音机](https://support
 
 伴随着添付 CD 的【音轨 43】尝试着说出吧。
 
-{{< audio "sokko-boi-track/43.mp3" "演技练习 2" >}}
+{{< audio sokko-boi-track 43 >}}
 
 {{< tabs acting-2 >}}
 {{< tab "样式 1" >}}
@@ -460,7 +460,7 @@ Windows 10：开始菜单 → 所有程序 → [语音录音机](https://support
 
 伴随着添付 CD 的【音轨 44】尝试着说出吧。
 
-{{< audio "sokko-boi-track/44.mp3" "演技练习 3" >}}
+{{< audio sokko-boi-track 44 >}}
 
 {{< tabs acting-3 >}}
 {{< tab "样式 1" >}}
@@ -500,7 +500,7 @@ Windows 10：开始菜单 → 所有程序 → [语音录音机](https://support
 
 伴随着添付 CD 的【音轨 45】尝试着说出吧。
 
-{{< audio "sokko-boi-track/45.mp3" "演技练习 4" >}}
+{{< audio sokko-boi-track 45 >}}
 
 {{< tabs acting-4 >}}
 {{< tab "样式 1" >}}
diff --git a/data/honpen-track.yaml b/data/honpen-track.yaml
new file mode 100644
index 0000000..18d249e
--- /dev/null
+++ b/data/honpen-track.yaml
@@ -0,0 +1,33 @@
+1:
+  path: honpen-track/01.mp3
+  caption: 序
+2:
+  path: honpen-track/02.mp3
+  caption: 介绍
+3:
+  path: honpen-track/03.mp3
+  caption: VIP 店长台词演绎
+4:
+  path: honpen-track/04.mp3
+  caption: 阶段 1 - 锻炼本音
+5:
+  path: honpen-track/05.mp3
+  caption: 假声练习
+6:
+  path: honpen-track/06.mp3
+  caption: 阶段 2 - 锻炼假声
+7:
+  path: honpen-track/07.mp3
+  caption: 阶段 3 - 紧紧的连接本音和假声
+8:
+  path: honpen-track/08.mp3
+  caption: 阶段 4 - 学会女声
+9:
+  path: honpen-track/09.mp3
+  caption: 熟练学会颤音吧
+10:
+  path: honpen-track/10.mp3
+  caption: 学习哨音
+11:
+  path: honpen-track/11.mp3
+  caption: 学习男声
diff --git a/data/sokko-boi-appendix.yaml b/data/sokko-boi-appendix.yaml
new file mode 100644
index 0000000..9ad10c0
--- /dev/null
+++ b/data/sokko-boi-appendix.yaml
@@ -0,0 +1,15 @@
+17:
+  path: sokko-boi-appendix/17.mp3
+  caption: 出発前アナウンス 七尾行き（松前 緒花）
+18:
+  path: sokko-boi-appendix/18.mp3
+  caption: 出発前アナウンス 七尾行き（鶴来 民子）
+19:
+  path: sokko-boi-appendix/19.mp3
+  caption: 出発前アナウンス 七尾行き（押水 菜子）
+20:
+  path: sokko-boi-appendix/20.mp3
+  caption: 出発前アナウンス 七尾行き（和倉 結名）
+21:
+  path: sokko-boi-appendix/21.mp3
+  caption: 出発前アナウンス 七尾行き（輪島 巴）
diff --git a/data/sokko-boi-track.yaml b/data/sokko-boi-track.yaml
new file mode 100644
index 0000000..0f107f0
--- /dev/null
+++ b/data/sokko-boi-track.yaml
@@ -0,0 +1,135 @@
+1:
+  path: sokko-boi-track/01.mp3
+  caption: （本音）腹式呼吸练习 1
+2:
+  path: sokko-boi-track/02.mp3
+  caption: （本音）腹式呼吸练习 2
+3:
+  path: sokko-boi-track/03.mp3
+  caption: （本音）断音换
+4:
+  path: sokko-boi-track/04.mp3
+  caption: （本音）唇颤音
+5:
+  path: sokko-boi-track/05.mp3
+  caption: （本音）舌颤音
+6:
+  path: sokko-boi-track/06.mp3
+  caption: （本音）哼唱
+7:
+  path: sokko-boi-track/07.mp3
+  caption: （本音）发声练习“啊”
+8:
+  path: sokko-boi-track/08.mp3
+  caption: （本音）高音域的哼唱
+9:
+  path: sokko-boi-track/09.mp3
+  caption: （本音）高音域的“啊”
+10:
+  path: sokko-boi-track/10.mp3
+  caption: （本音）样式 1
+11:
+  path: sokko-boi-track/11.mp3
+  caption: （本音）样式 2
+12:
+  path: sokko-boi-track/12.mp3
+  caption: （本音）样式 3
+13:
+  path: sokko-boi-track/13.mp3
+  caption: （本音）样式 4
+14:
+  path: sokko-boi-track/14.mp3
+  caption: （本音）样式 5
+15:
+  path: sokko-boi-track/15.mp3
+  caption: （本音）样式 6
+16:
+  path: sokko-boi-track/16.mp3
+  caption: （本音）样式 7
+17:
+  path: sokko-boi-track/17.mp3
+  caption: （本音）样式 8
+18:
+  path: sokko-boi-track/18.mp3
+  caption: （本音）样式 9
+19:
+  path: sokko-boi-track/19.mp3
+  caption: （本音）样式 10
+20:
+  path: sokko-boi-track/20.mp3
+  caption: （本音）样式 11
+21:
+  path: sokko-boi-track/21.mp3
+  caption: （本音）样式 12
+22:
+  path: sokko-boi-track/22.mp3
+  caption: （本音）样式 13
+23:
+  path: sokko-boi-track/23.mp3
+  caption: （假声）唇颤音
+24:
+  path: sokko-boi-track/24.mp3
+  caption: （假声）舌颤音
+25:
+  path: sokko-boi-track/25.mp3
+  caption: （假声）发声练习“哈”
+26:
+  path: sokko-boi-track/26.mp3
+  caption: （假声）高音域的“哈”
+27:
+  path: sokko-boi-track/27.mp3
+  caption: （假声）样式 1
+28:
+  path: sokko-boi-track/28.mp3
+  caption: （假声）样式 2
+29:
+  path: sokko-boi-track/29.mp3
+  caption: （假声）样式 3
+30:
+  path: sokko-boi-track/30.mp3
+  caption: （假声）样式 4
+31:
+  path: sokko-boi-track/31.mp3
+  caption: （假声）样式 5
+32:
+  path: sokko-boi-track/32.mp3
+  caption: （假声）样式 6
+33:
+  path: sokko-boi-track/33.mp3
+  caption: （假声）样式 7
+34:
+  path: sokko-boi-track/34.mp3
+  caption: （假声）样式 8
+35:
+  path: sokko-boi-track/35.mp3
+  caption: （假声）样式 9
+36:
+  path: sokko-boi-track/36.mp3
+  caption: （假声）样式 10
+37:
+  path: sokko-boi-track/37.mp3
+  caption: （假声）样式 11
+38:
+  path: sokko-boi-track/38.mp3
+  caption: （假声）样式 12
+39:
+  path: sokko-boi-track/39.mp3
+  caption: （假声）样式 13
+40:
+  path: sokko-boi-track/40.mp3
+  caption: 混声练习 1
+41:
+  path: sokko-boi-track/41.mp3
+  caption: 混声练习 2
+42:
+  path: sokko-boi-track/42.mp3
+  caption: 演技练习 1
+43:
+  path: sokko-boi-track/43.mp3
+  caption: 演技练习 2
+44:
+  path: sokko-boi-track/44.mp3
+  caption: 演技练习 3
+45:
+  path: sokko-boi-track/45.mp3
+  caption: 演技练习 4
diff --git a/layouts/shortcodes/audio.html b/layouts/shortcodes/audio.html
index b504d8f..22f3cf5 100644
--- a/layouts/shortcodes/audio.html
+++ b/layouts/shortcodes/audio.html
@@ -1,11 +1,13 @@
-{{- $resource := resources.Get (.Get 0) -}}
+{{- $name := .Get 0 -}}
+{{- $index := .Get 1 | string -}}
+{{- $track := (index (index .Site.Data $name) $index) -}}
 <figure class="audio-player">
-  {{- with (.Get 1) }}
-  <figcaption><b>{{ . }}</b></figcaption>
-  {{- end }}
+  <figcaption>
+    <b>音轨 {{ $index }}：{{ $track.caption }}</b>
+  </figcaption>
   <audio
     controls loop
-    src="{{ $resource.Permalink }}"
+    src="{{ (resources.Get $track.path).Permalink }}"
     crossorigin="anonymous"
     preload="metadata"
   >
diff --git a/layouts/shortcodes/track-index.html b/layouts/shortcodes/track-index.html
new file mode 100644
index 0000000..9adf54a
--- /dev/null
+++ b/layouts/shortcodes/track-index.html
@@ -0,0 +1,23 @@
+{{- $name := .Get 0 -}}
+<table class="track-list">
+<thead><tr><th>编号</th><th>介绍</th></tr></thead>
+<tbody>
+{{- range sort (index .Site.Data $name) -}}
+{{- $index := path.BaseName .path | strings.TrimPrefix "0" -}}
+<tr>
+  <td><a href="{{ (resources.Get .path).Permalink }}" target="player" data-caption="音轨 {{ $index }}：{{ .caption }}">音轨 {{ $index }}</a></td>
+  <td>{{ .caption }}</td>
+</tr>
+{{- end -}}
+</tbody>
+</table>
+<figure class="audio-player">
+  <figcaption>
+    <b>N/A</b>
+  </figcaption>
+  <audio
+    controls
+    crossorigin="anonymous"
+    preload="metadata"
+  >
+</figure>
\ No newline at end of file