Skip to content

Commit 216f93d

Browse files
author
NightVoyager
committed
feat: 添加 audio-player, audio-player, audio-player
1 parent 5b4478d commit 216f93d

File tree

5 files changed

+918
-0
lines changed

5 files changed

+918
-0
lines changed

‎.DS_Store‎

-2 KB
Binary file not shown.

‎config.toml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,11 @@ hasCJKLanguage = true
363363
dismiss = "同意"
364364
link = "了解更多"
365365

366+
# 自定义 Partial 配置
367+
[params.customPartials]
368+
# 在文章内容前插入音频播放器
369+
postContentBefore = ["audio-player.html"]
370+
366371
# 搜索配置
367372
[params.search]
368373
enable = true

‎layouts/partials/audio-player.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{{- /*
2+
TTS Audio Player for FixIt Theme
3+
Usage: Add `ttsAudio: /audio/your-file.mp3` to post front matter
4+
*/ -}}
5+
{{- $audio := .Params.ttsAudio -}}
6+
{{- if $audio -}}
7+
{{- /* Get next/prev posts for continuous playback */ -}}
8+
{{- $nextPost := "" -}}
9+
{{- $prevPost := "" -}}
10+
{{- $nextAudio := "" -}}
11+
{{- $prevAudio := "" -}}
12+
13+
{{- with .NextInSection -}}
14+
{{- $nextPost = .RelPermalink -}}
15+
{{- $nextAudio = .Params.ttsAudio -}}
16+
{{- end -}}
17+
18+
{{- with .PrevInSection -}}
19+
{{- $prevPost = .RelPermalink -}}
20+
{{- $prevAudio = .Params.ttsAudio -}}
21+
{{- end -}}
22+
23+
<div class="article-audio-player" id="article-audio-player">
24+
<div class="audio-player-header">
25+
<span class="audio-player-icon">
26+
<i class="fa-solid fa-headphones"></i>
27+
</span>
28+
<span class="audio-player-title">{{ T "audioPlayer.title" | default "Listen to this article" }}</span>
29+
<button class="audio-player-close" id="audio-player-close" title="{{ T "audioPlayer.close" | default "Close" }}">
30+
<i class="fa-solid fa-times"></i>
31+
</button>
32+
</div>
33+
34+
<div class="audio-player-body">
35+
<audio id="article-audio" preload="metadata">
36+
<source src="{{ $audio }}" type="audio/mpeg">
37+
{{ T "audioPlayer.notSupported" | default "Your browser does not support the audio element." }}
38+
</audio>
39+
40+
<div class="audio-controls">
41+
{{- /* Previous button */ -}}
42+
<button class="audio-btn audio-btn-prev" id="audio-prev"
43+
{{ if not $prevAudio }}disabled{{ end }}
44+
data-prev-url="{{ $prevPost }}"
45+
data-prev-audio="{{ $prevAudio }}"
46+
title="{{ T "audioPlayer.prev" | default "Previous article" }}">
47+
<i class="fa-solid fa-backward-step"></i>
48+
</button>
49+
50+
{{- /* Rewind 10s */ -}}
51+
<button class="audio-btn audio-btn-rewind" id="audio-rewind" title="{{ T "audioPlayer.rewind" | default "Rewind 10s" }}">
52+
<i class="fa-solid fa-rotate-left"></i>
53+
<span class="audio-btn-label">10</span>
54+
</button>
55+
56+
{{- /* Play/Pause */ -}}
57+
<button class="audio-btn audio-btn-play" id="audio-play" title="{{ T "audioPlayer.play" | default "Play" }}">
58+
<i class="fa-solid fa-play" id="play-icon"></i>
59+
</button>
60+
61+
{{- /* Forward 10s */ -}}
62+
<button class="audio-btn audio-btn-forward" id="audio-forward" title="{{ T "audioPlayer.forward" | default "Forward 10s" }}">
63+
<i class="fa-solid fa-rotate-right"></i>
64+
<span class="audio-btn-label">10</span>
65+
</button>
66+
67+
{{- /* Next button */ -}}
68+
<button class="audio-btn audio-btn-next" id="audio-next"
69+
{{ if not $nextAudio }}disabled{{ end }}
70+
data-next-url="{{ $nextPost }}"
71+
data-next-audio="{{ $nextAudio }}"
72+
title="{{ T "audioPlayer.next" | default "Next article" }}">
73+
<i class="fa-solid fa-forward-step"></i>
74+
</button>
75+
</div>
76+
77+
{{- /* Progress bar */ -}}
78+
<div class="audio-progress-container">
79+
<span class="audio-time" id="audio-current-time">0:00</span>
80+
<div class="audio-progress" id="audio-progress">
81+
<div class="audio-progress-bar" id="audio-progress-bar"></div>
82+
<div class="audio-progress-handle" id="audio-progress-handle"></div>
83+
</div>
84+
<span class="audio-time" id="audio-duration">0:00</span>
85+
</div>
86+
87+
{{- /* Speed and auto-play controls */ -}}
88+
<div class="audio-extra-controls">
89+
<div class="audio-speed">
90+
<label for="audio-speed-select">{{ T "audioPlayer.speed" | default "Speed" }}:</label>
91+
<select id="audio-speed-select">
92+
<option value="0.5">0.5x</option>
93+
<option value="0.75">0.75x</option>
94+
<option value="1" selected>1x</option>
95+
<option value="1.25">1.25x</option>
96+
<option value="1.5">1.5x</option>
97+
<option value="2">2x</option>
98+
</select>
99+
</div>
100+
101+
<div class="audio-autoplay">
102+
<input type="checkbox" id="audio-autoplay-next" {{ if $nextAudio }}{{ end }}>
103+
<label for="audio-autoplay-next">{{ T "audioPlayer.autoplayNext" | default "Auto-play next" }}</label>
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
109+
{{- /* Floating mini player (shown when scrolled past main player) */ -}}
110+
<div class="audio-mini-player" id="audio-mini-player">
111+
<button class="mini-player-btn" id="mini-play">
112+
<i class="fa-solid fa-play" id="mini-play-icon"></i>
113+
</button>
114+
<div class="mini-player-progress" id="mini-progress">
115+
<div class="mini-player-progress-bar" id="mini-progress-bar"></div>
116+
</div>
117+
<span class="mini-player-time" id="mini-current-time">0:00</span>
118+
<button class="mini-player-btn mini-player-expand" id="mini-expand" title="{{ T "audioPlayer.expand" | default "Show player" }}">
119+
<i class="fa-solid fa-chevron-up"></i>
120+
</button>
121+
</div>
122+
123+
{{- /* Load audio player script */ -}}
124+
<script src="/js/audio-player.js" defer></script>
125+
<link rel="stylesheet" href="/css/audio-player.css">
126+
{{- end -}}

0 commit comments

Comments
 (0)