hoelee/hoelee-blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(categories): replace procedural SVG art with Gemini-generated WebP editorial banners
Deploy / build (push) Successful in 23s
Details

Browse Source
This commit is contained in:
hoelee committed 2026-10-26 02:48:06 +08:00
1 parent fa156b0b9d
commit 0a4fc47fce
39 files changed
+1221 -179
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/CategoryArt.astro
+86 -59
View File
@@ -1,21 +1,34 @@
---
/**
* CategoryArt — terminal-style SVG illustration per category.
* Matches the banner-gen visual language (dark #0d1220 canvas, terminal
* window with traffic-light dots, JetBrains Mono, status colors) but with a
* per-category accent color, so each category is scannable at a glance.
* Inline SVG inherits the blog's self-hosted JetBrains Mono for text lines.
* CategoryArt — Editorial banner image per category.
* High-end technical editorial visuals generated via Google Gemini Imagen,
* saved in WebP/JPG format with dark technical aesthetics.
* Falls back to terminal-style SVG if image is unavailable.
*/
import { categoryMeta } from '../lib/categories';
interface Props {
slug: string;
loading?: 'lazy' | 'eager';
}
const { slug } = Astro.props;
const { slug, loading = 'lazy' } = Astro.props;
const meta = categoryMeta(slug);
const alt = meta ? `${meta.name.en} category banner` : 'Category illustration';
// line types: prompt (accent), cmd #e6edf3, ok #3fb950, hl #f5a524, dim #6b7c99
const IMAGE_CATEGORIES = new Set([
'ai',
'case-studies',
'devops',
'engineering',
'notes',
'tutorials',
'web3',
]);
const hasImage = IMAGE_CATEGORIES.has(slug);
// line types for fallback: prompt (accent), cmd #e6edf3, ok #3fb950, hl #f5a524, dim #6b7c99
type Line = { t: 'prompt' | 'cmd' | 'ok' | 'hl' | 'dim'; c: string };
const ART: Record<string, { title: string; lines: Line[]; glyph: 'text' | 'check'; gc: string }> = {
@@ -126,56 +139,70 @@ const LINE_COLORS: Record<Line['t'], string> = {
};
---
<svg
viewBox="0 0 640 320"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label={meta ? `${meta.name.en} category` : 'Category illustration'}
focusable="false"
>
<rect width="640" height="320" fill="#0d1220" />
<circle cx="600" cy="-20" r="150" fill={accent} opacity="0.12" />
<circle cx="10" cy="330" r="130" fill="#0e94ff" opacity="0.08" />
<!-- terminal window -->
<rect x="28" y="24" width="584" height="268" rx="12" fill="#161e2e" stroke="#2a3550" stroke-width="1" />
<!-- titlebar -->
<path
d="M 28 36 a 12 12 0 0 1 12 -12 h 560 a 12 12 0 0 1 12 12 v 32 h -584 z"
fill="#131a2a"
/>
<circle cx="52" cy="46" r="6" fill="#ff5c5c" />
<circle cx="74" cy="46" r="6" fill="#f5a524" />
<circle cx="96" cy="46" r="6" fill="#3fb950" />
<text x="118" y="52" fill="#6b7c99" font-family="'JetBrains Mono', ui-monospace, monospace" font-size="15">{art.title}</text>
<!-- body lines -->
{art.lines.map((ln, i) => (
<text
x="52"
y={112 + i * 36}
fill={LINE_COLORS[ln.t]}
font-family="'JetBrains Mono', ui-monospace, monospace"
font-size="19"
>{ln.c}</text>
))}
<!-- watermark glyph -->
{art.glyph === 'text' ? (
<text
x="588"
y="262"
text-anchor="end"
fill={accent}
opacity="0.16"
font-family="'JetBrains Mono', ui-monospace, monospace"
font-weight="700"
font-size="96"
>{art.gc}</text>
{
hasImage ? (
<img
src={`/categories/${slug}.webp`}
alt={alt}
width="1024"
height="576"
loading={loading}
decoding="async"
class="category-banner-img"
/>
) : (
<g opacity="0.22">
<circle cx="560" cy="196" r="58" fill="none" stroke={accent} stroke-width="10" />
<path d="M 536 196 l 17 17 l 32 -36" fill="none" stroke={accent} stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
</g>
)}
</svg>
<svg
viewBox="0 0 640 320"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label={meta ? `${meta.name.en} category` : 'Category illustration'}
focusable="false"
>
<rect width="640" height="320" fill="#0d1220" />
<circle cx="600" cy="-20" r="150" fill={accent} opacity="0.12" />
<circle cx="10" cy="330" r="130" fill="#0e94ff" opacity="0.08" />
{/* terminal window */}
<rect x="28" y="24" width="584" height="268" rx="12" fill="#161e2e" stroke="#2a3550" stroke-width="1" />
{/* titlebar */}
<path
d="M 28 36 a 12 12 0 0 1 12 -12 h 560 a 12 12 0 0 1 12 12 v 32 h -584 z"
fill="#131a2a"
/>
<circle cx="52" cy="46" r="6" fill="#ff5c5c" />
<circle cx="74" cy="46" r="6" fill="#f5a524" />
<circle cx="96" cy="46" r="6" fill="#3fb950" />
<text x="118" y="52" fill="#6b7c99" font-family="'JetBrains Mono', ui-monospace, monospace" font-size="15">{art.title}</text>
{/* body lines */}
{art.lines.map((ln, i) => (
<text
x="52"
y={112 + i * 36}
fill={LINE_COLORS[ln.t]}
font-family="'JetBrains Mono', ui-monospace, monospace"
font-size="19"
>{ln.c}</text>
))}
{/* watermark glyph */}
{art.glyph === 'text' ? (
<text
x="588"
y="262"
text-anchor="end"
fill={accent}
opacity="0.16"
font-family="'JetBrains Mono', ui-monospace, monospace"
font-weight="700"
font-size="96"
>{art.gc}</text>
) : (
<g opacity="0.22">
<circle cx="560" cy="196" r="58" fill="none" stroke={accent} stroke-width="10" />
<path d="M 536 196 l 17 17 l 32 -36" fill="none" stroke={accent} stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
</g>
)}
</svg>
)
}
src/components/CategoryGrid.astro
+2 -2
View File
@@ -12,8 +12,8 @@ const { counts, lang = 'en' } = Astro.props;
const isZh = lang === 'zh';
const label = (count: number) => {
if (isZh) return count === 0 ? '0 篇 · 敬请期待' : `${count} 篇`;
return count === 0 ? '0 posts · coming soon' : `${count} post${count === 1 ? '' : 's'}`;
if (isZh) return count === 0 ? '· 敬请期待' : '篇';
return count === 0 ? '· coming soon' : count === 1 ? 'post' : 'posts';
};
---
src/content/posts/generating-subtitles-for-songs-without-timestamps.md
+155 -58
View File
@@ -211,23 +211,34 @@ a **.srt download** next to it if you want to burn the subtitles into a video
or open them in VLC.
<style>
.subs-track{margin:2.4rem 0}
.subs-track figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
.subs-track{margin:2.4rem 0;display:flex;gap:1.4rem;align-items:flex-start}
.subs-cover{flex:0 0 160px;width:160px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:var(--card,#1e2025);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.subs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.subs-content{flex:1 1 0;min-width:0}
.subs-content figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
.subs-title{flex:1 1 auto;min-width:0}
.subs-meta{font-weight:400;opacity:.6;font-size:.9em;white-space:nowrap}
.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap}
.subs-dl:hover{background:rgba(34,197,94,.14)}
.subs-dl::before{content:"↓ "}
.subs-track audio{width:100%;max-width:560px}
.subs-box{position:relative;max-height:250px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
.subs-content audio{width:100%}
.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
.subs-box p{margin:.18rem 0;opacity:.55}
.subs-box p.on{opacity:1;font-weight:600;color:var(--accent,#22c55e)}
@media(max-width:640px){
.subs-track{flex-direction:column;align-items:stretch;gap:1rem}
.subs-cover{width:120px;margin:0 auto}
}
</style>
<figure class="subs-track">
<figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
<pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
<div class="subs-cover">
<img src="/covers/01_Tiny-Borrowed-Shoes.webp" alt="Tiny Borrowed Shoes album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
<pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
[ar:Mr Hoelee]
[00:11.56]Underneath the floorboards where the shadows play
[00:14.60]I tied a little ribbon at the break of day
@@ -250,12 +261,17 @@ or open them in VLC.
[01:34.58]Though the world is wide and tall, and I am very small
[01:40.32]In the secret morning light, I can have it all
[01:51.98]La-la-la, in the morning light...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
<pre id="subs-2" hidden>[ti:Mist Over Skellig]
<div class="subs-cover">
<img src="/covers/02_Mist-Over-Skellig.webp" alt="Mist Over Skellig album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
<pre id="subs-2" hidden>[ti:Mist Over Skellig]
[ar:Mr Hoelee]
[00:21.73]Where the gray Atlantic meets the abbey stone
[00:28.56]White birds circle high above the cliff alone
@@ -275,12 +291,17 @@ or open them in VLC.
[02:38.98]Through the fog and falling stars, the tide will bring us home
[02:57.02]Oceans rise and oceans fall...
[03:04.34]The tide will bring us home.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
<pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
<div class="subs-cover">
<img src="/covers/03_Willow-by-the-Silver-Stream.webp" alt="Willow by the Silver Stream album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
<pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
[ar:Mr Hoelee]
[00:23.83]Mmm-mmm, ahh-ahh...
[00:26.70]Silver runs the quiet stream beneath the willow tree
@@ -301,12 +322,17 @@ or open them in VLC.
[02:13.42]Peace will walk beside you in the valley of a dream
[02:50.86]In the valley of a dream...
[02:56.54]Sleep in peace tonight.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
<pre id="subs-4" hidden>[ti:Clockwork Starlight]
<div class="subs-cover">
<img src="/covers/04_Clockwork-Starlight.webp" alt="Clockwork Starlight album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
<pre id="subs-4" hidden>[ti:Clockwork Starlight]
[ar:Mr Hoelee]
[00:19.30]Ticking in the quiet tower made of porcelain and glass
[00:23.44]I can see the painted clouds and paper swallows pass
@@ -329,12 +355,17 @@ or open them in VLC.
[02:15.02]Even if the clock should stop and time fades away
[02:21.12]I will keep this little wish until the break of day
[02:33.64]Until the break of day...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
<pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
<div class="subs-cover">
<img src="/covers/05_Waltz-of-the-Dandelion.webp" alt="Waltz of the Dandelion album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
<pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
[ar:Mr Hoelee]
[00:17.62]One, two, three, the summer breeze is knocking at my door
[00:22.56]Dancing with the sunlit dust upon the wooden floor
@@ -354,12 +385,17 @@ or open them in VLC.
[02:17.90]I will still remember every little song we sing
[02:25.96]La-la-la, la-la-la...
[02:29.46]See you again someday.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
<pre id="subs-6" hidden>[ti:Whale in the Milky Way]
<div class="subs-cover">
<img src="/covers/06_Whale-in-the-Milky-Way.webp" alt="Whale in the Milky Way album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
<pre id="subs-6" hidden>[ti:Whale in the Milky Way]
[ar:Mr Hoelee]
[00:12.10]Ah-ah-ah, ooh-ooh...
[00:15.70]Up above the sleeping town where all the rooftops end
@@ -381,12 +417,17 @@ or open them in VLC.
[02:16.74]Through the clouds of stardust and the galaxies afar
[02:23.52]You are never lost because I see how bright you are
[02:32.74]Goodnight, little star...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
<pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
<div class="subs-cover">
<img src="/covers/07_Puddle-Jumping-Parade.webp" alt="Puddle Jumping Parade album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
<pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
[ar:Mr Hoelee]
[00:06.76]One, two! Ready, go!
[00:08.68]Put on my yellow boots and grab my red umbrella too
@@ -409,12 +450,17 @@ or open them in VLC.
[01:20.12]Clap your hands together, stomp your little feet
[01:23.90]Every single puddle makes the melody complete!
[01:29.20]Jump! Splash! Hooray!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
<pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
<div class="subs-cover">
<img src="/covers/08_Strawberry-Cloud-Bakery.webp" alt="Strawberry Cloud Bakery album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
<pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
[ar:Mr Hoelee]
[00:08.32]Ding-dong rings the little bell above the bakery door
[00:13.48]Flour on the apron and confetti on the floor
@@ -435,12 +481,17 @@ or open them in VLC.
[01:22.48]A croissant for the puppy and a muffin for the cat
[01:26.20]With a dollop of vanilla cream upon a beret hat!
[01:33.58]Fresh out of the oven! Yum, yum!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
<pre id="subs-9" hidden>[ti:Captain Marshmallow]
<div class="subs-cover">
<img src="/covers/09_Captain-Marshmallow.webp" alt="Captain Marshmallow album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
<pre id="subs-9" hidden>[ti:Captain Marshmallow]
[ar:Mr Hoelee]
[00:08.06]Attention please! Captain on the deck!
[00:10.64]Sofa is my pirate ship, the carpet is the sea
@@ -464,12 +515,17 @@ or open them in VLC.
[01:22.46]Give a little salute and a double-double clap! (Clap-clap!)
[01:26.82]We rule the living room today!
[01:33.00]Mission accomplished! Yay!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
<pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
<div class="subs-cover">
<img src="/covers/10_Lanterns-on-the-Lotus-Pond.webp" alt="Lanterns on the Lotus Pond album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
<pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
[ar:Mr Hoelee]
[00:10.69]Patter goes the summer rain upon the lotus leaf
[00:15.29]Washing all the dusty world and bringing cool relief
@@ -490,12 +546,17 @@ or open them in VLC.
[01:34.62]Listen to the bamboo flute across the misty stream
[01:39.36]In the courtyard of the moon, we share a summer dream
[02:06.76]Red lanterns drifting far away...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
<pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
<div class="subs-cover">
<img src="/covers/11_Wings-of-the-Kunpeng.webp" alt="Wings of the Kunpeng album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
<pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
[ar:Mr Hoelee]
[00:25.18]Deep beneath the silent waves where no one ever sees
[00:31.60]Sleeps a tiny silver fish dreaming of the breeze
@@ -516,12 +577,17 @@ or open them in VLC.
[02:30.18]Fly across the mountain peaks where immortal rivers flow
[02:36.26]I will watch you turn to wind and let your spirit go
[02:48.84]Ah-ah-ah, fly into the wind...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
<pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
<div class="subs-cover">
<img src="/covers/12_The-Puppeteer's-Thread.webp" alt="The Puppeteer's Thread album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
<pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
[ar:Mr Hoelee]
[00:24.12]Carved from a willow branch, painted with a smile
[00:34.16]Dressed in tiny embroidered silk, traveling mile by mile
@@ -542,12 +608,17 @@ or open them in VLC.
[02:48.56]Though my heart is made of wood and cannot feel the rain
[02:54.02]Every pull upon the thread remembers joy and pain
[03:05.04]Ten thin threads of crimson silk...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
<pre id="subs-13" hidden>[ti:Paper Airplane in September]
<div class="subs-cover">
<img src="/covers/13_Paper-Airplane-in-September.webp" alt="Paper Airplane in September album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
<pre id="subs-13" hidden>[ti:Paper Airplane in September]
[ar:Mr Hoelee]
[00:10.42]Sunlight on the wooden desk is moving inch by inch
[00:15.10]Sparrows on the telegraph wire never seem to flinch
@@ -567,12 +638,17 @@ or open them in VLC.
[01:41.68]Floating past the bicycles and underneath the trees
[01:57.78]Underneath the autumn trees...
[02:02.18]Goodbye, summer days.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
<pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
<div class="subs-cover">
<img src="/covers/14_Porridge-and-Evening-Smoke.webp" alt="Porridge and Evening Smoke album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
<pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
[ar:Mr Hoelee]
[00:11.54]Smoke is rising from the roof into the purple sky
[00:17.04]While the evening swallows call and hurry on up high
@@ -591,12 +667,17 @@ or open them in VLC.
[01:44.60]No matter how the outside world is noisy, cold, and wide
[01:50.14]The lamp upon the dining table keeps us warm inside
[01:57.40]The lamp is always on for you...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
<pre id="subs-15" hidden>[ti:Green Train to the Sea]
<div class="subs-cover">
<img src="/covers/15_Green-Train-to-the-Sea.webp" alt="Green Train to the Sea album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
<pre id="subs-15" hidden>[ti:Green Train to the Sea]
[ar:Mr Hoelee]
[00:28.22]Clickety-clack upon the track, the green train starts to roll
[00:29.42]Leaving all the city gray behind the tunnel hole
@@ -615,12 +696,17 @@ or open them in VLC.
[01:26.34]Every station has a name I've never heard before
[01:30.66]Soon the scent of salty air will meet us at the shore
[01:46.82]Look, there is the sea...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
<pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
<div class="subs-cover">
<img src="/covers/16_Sanctuary-of-the-Dawn.webp" alt="Sanctuary of the Dawn album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
<pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
[ar:Mr Hoelee]
[00:22.82]Ahh-ahh, sanctus, ahh...
[00:25.64]Shadows fade before the light that rises in the east
@@ -641,12 +727,17 @@ or open them in VLC.
[02:07.48]Rest beneath the gentle shelter of a shining wing
[02:15.30]Peace be with you... forevermore.
[02:26.48]Amen, ahh...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
<pre id="subs-17" hidden>[ti:Look Upon Your Path]
<div class="subs-cover">
<img src="/covers/17_Look-Upon-Your-Path.webp" alt="Look Upon Your Path album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
<pre id="subs-17" hidden>[ti:Look Upon Your Path]
[ar:Mr Hoelee]
[00:09.64]Look upon the winding path where fallen leaves are blown
[00:14.64]Children walking hand in hand so no one is alone
@@ -665,12 +756,17 @@ or open them in VLC.
[01:31.34]Though the night is long and deep, the stars are watching still
[01:36.44]Spring will wake the seeds asleep upon the quiet hill
[01:45.98]Look upon your path... the dawn is near.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
<pre id="subs-18" hidden>[ti:Bells of the Winter Star]
<div class="subs-cover">
<img src="/covers/18_Bells-of-the-Winter-Star.webp" alt="Bells of the Winter Star album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
<pre id="subs-18" hidden>[ti:Bells of the Winter Star]
[ar:Mr Hoelee]
[00:08.50]Ding-dong, ding-dong, ring out the bells...
[00:18.20]Snowflakes falling from the sky in silence pure and white
@@ -690,6 +786,7 @@ or open them in VLC.
[02:28.00]Gloria, gloria, hear the angels sing
[02:37.14]Peace on the earth this holy night will bring
[02:49.30]Gloria... peace on the earth.</pre>
</div>
</figure>
<script>
// subs-track: scroll LRC in step with <audio>; current line stays centred
src/content/posts/zh/generating-subtitles-for-songs-without-timestamps.md
+155 -58
View File
@@ -152,23 +152,34 @@ a.dispatchEvent(new Event('timeupdate'));
下面每个播放器都会滚动歌词、把当前句保持在中间，旁边还有 **.srt 下载** —— 想烧字进视频或在 VLC 里打开都行。
<style>
.subs-track{margin:2.4rem 0}
.subs-track figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
.subs-track{margin:2.4rem 0;display:flex;gap:1.4rem;align-items:flex-start}
.subs-cover{flex:0 0 160px;width:160px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--border,#3a3f47);background:var(--card,#1e2025);box-shadow:0 6px 18px rgba(0,0,0,.15)}
.subs-cover img{width:100%;height:100%;object-fit:cover;display:block}
.subs-content{flex:1 1 0;min-width:0}
.subs-content figcaption{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:600;margin-bottom:.35rem}
.subs-title{flex:1 1 auto;min-width:0}
.subs-meta{font-weight:400;opacity:.6;font-size:.9em;white-space:nowrap}
.subs-dl{margin-left:auto;flex:0 0 auto;font-size:.8em;font-weight:600;text-decoration:none;border:1px solid var(--accent,#22c55e);border-radius:6px;padding:.16rem .55rem;color:var(--accent,#22c55e);background:transparent;white-space:nowrap}
.subs-dl:hover{background:rgba(34,197,94,.14)}
.subs-dl::before{content:"↓ "}
.subs-track audio{width:100%;max-width:560px}
.subs-box{position:relative;max-height:250px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
.subs-content audio{width:100%}
.subs-box{position:relative;max-height:220px;overflow-y:auto;border:1px solid var(--border,#3a3f47);border-radius:8px;padding:.7rem 1rem;margin-top:.6rem;font-size:.95em;line-height:1.6}
.subs-box p{margin:.18rem 0;opacity:.55}
.subs-box p.on{opacity:1;font-weight:600;color:var(--accent,#22c55e)}
@media(max-width:640px){
.subs-track{flex-direction:column;align-items:stretch;gap:1rem}
.subs-cover{width:120px;margin:0 auto}
}
</style>
<figure class="subs-track">
<figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
<pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
<div class="subs-cover">
<img src="/covers/01_Tiny-Borrowed-Shoes.webp" alt="Tiny Borrowed Shoes album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Tiny Borrowed Shoes <span class="subs-meta">· Celtic folk · 21 lines · 139 s</span></span><a class="subs-dl" href="/subs/tiny-borrowed-shoes.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-1" src="https://content.hoelee.com/file/hoelee/music/Tiny-Borrowed-Shoes-Mr-Hoelee.mp3"></audio>
<pre id="subs-1" hidden>[ti:Tiny Borrowed Shoes]
[ar:Mr Hoelee]
[00:11.56]Underneath the floorboards where the shadows play
[00:14.60]I tied a little ribbon at the break of day
@@ -191,12 +202,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:34.58]Though the world is wide and tall, and I am very small
[01:40.32]In the secret morning light, I can have it all
[01:51.98]La-la-la, in the morning light...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
<pre id="subs-2" hidden>[ti:Mist Over Skellig]
<div class="subs-cover">
<img src="/covers/02_Mist-Over-Skellig.webp" alt="Mist Over Skellig album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Mist Over Skellig <span class="subs-meta">· Celtic folk · 18 lines · 193 s</span></span><a class="subs-dl" href="/subs/mist-over-skellig.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-2" src="https://content.hoelee.com/file/hoelee/music/Mist-Over-Skellig-Mr-Hoelee.mp3"></audio>
<pre id="subs-2" hidden>[ti:Mist Over Skellig]
[ar:Mr Hoelee]
[00:21.73]Where the gray Atlantic meets the abbey stone
[00:28.56]White birds circle high above the cliff alone
@@ -216,12 +232,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:38.98]Through the fog and falling stars, the tide will bring us home
[02:57.02]Oceans rise and oceans fall...
[03:04.34]The tide will bring us home.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
<pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
<div class="subs-cover">
<img src="/covers/03_Willow-by-the-Silver-Stream.webp" alt="Willow by the Silver Stream album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Willow by the Silver Stream <span class="subs-meta">· Celtic folk · 19 lines · 197 s</span></span><a class="subs-dl" href="/subs/willow-by-the-silver-stream.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-3" src="https://content.hoelee.com/file/hoelee/music/Willow-by-the-Silver-Stream-Mr-Hoelee.mp3"></audio>
<pre id="subs-3" hidden>[ti:Willow by the Silver Stream]
[ar:Mr Hoelee]
[00:23.83]Mmm-mmm, ahh-ahh...
[00:26.70]Silver runs the quiet stream beneath the willow tree
@@ -242,12 +263,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:13.42]Peace will walk beside you in the valley of a dream
[02:50.86]In the valley of a dream...
[02:56.54]Sleep in peace tonight.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
<pre id="subs-4" hidden>[ti:Clockwork Starlight]
<div class="subs-cover">
<img src="/covers/04_Clockwork-Starlight.webp" alt="Clockwork Starlight album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Clockwork Starlight <span class="subs-meta">· Japanese healing · 21 lines · 160 s</span></span><a class="subs-dl" href="/subs/clockwork-starlight.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-4" src="https://content.hoelee.com/file/hoelee/music/Clockwork-Starlight-Mr-Hoelee.mp3"></audio>
<pre id="subs-4" hidden>[ti:Clockwork Starlight]
[ar:Mr Hoelee]
[00:19.30]Ticking in the quiet tower made of porcelain and glass
[00:23.44]I can see the painted clouds and paper swallows pass
@@ -270,12 +296,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:15.02]Even if the clock should stop and time fades away
[02:21.12]I will keep this little wish until the break of day
[02:33.64]Until the break of day...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
<pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
<div class="subs-cover">
<img src="/covers/05_Waltz-of-the-Dandelion.webp" alt="Waltz of the Dandelion album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Waltz of the Dandelion <span class="subs-meta">· Japanese healing · 18 lines · 179 s</span></span><a class="subs-dl" href="/subs/waltz-of-the-dandelion.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-5" src="https://content.hoelee.com/file/hoelee/music/Waltz-of-the-Dandelion-Mr-Hoelee.mp3"></audio>
<pre id="subs-5" hidden>[ti:Waltz of the Dandelion]
[ar:Mr Hoelee]
[00:17.62]One, two, three, the summer breeze is knocking at my door
[00:22.56]Dancing with the sunlit dust upon the wooden floor
@@ -295,12 +326,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:17.90]I will still remember every little song we sing
[02:25.96]La-la-la, la-la-la...
[02:29.46]See you again someday.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
<pre id="subs-6" hidden>[ti:Whale in the Milky Way]
<div class="subs-cover">
<img src="/covers/06_Whale-in-the-Milky-Way.webp" alt="Whale in the Milky Way album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Whale in the Milky Way <span class="subs-meta">· Japanese healing · 20 lines · 164 s</span></span><a class="subs-dl" href="/subs/whale-in-the-milky-way.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-6" src="https://content.hoelee.com/file/hoelee/music/Whale-in-the-Milky-Way-Mr-Hoelee.mp3"></audio>
<pre id="subs-6" hidden>[ti:Whale in the Milky Way]
[ar:Mr Hoelee]
[00:12.10]Ah-ah-ah, ooh-ooh...
[00:15.70]Up above the sleeping town where all the rooftops end
@@ -322,12 +358,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:16.74]Through the clouds of stardust and the galaxies afar
[02:23.52]You are never lost because I see how bright you are
[02:32.74]Goodnight, little star...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
<pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
<div class="subs-cover">
<img src="/covers/07_Puddle-Jumping-Parade.webp" alt="Puddle Jumping Parade album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Puddle Jumping Parade <span class="subs-meta">· Japanese cute · 21 lines · 105 s</span></span><a class="subs-dl" href="/subs/puddle-jumping-parade.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-7" src="https://content.hoelee.com/file/hoelee/music/Puddle-Jumping-Parade-Mr-Hoelee.mp3"></audio>
<pre id="subs-7" hidden>[ti:Puddle Jumping Parade]
[ar:Mr Hoelee]
[00:06.76]One, two! Ready, go!
[00:08.68]Put on my yellow boots and grab my red umbrella too
@@ -350,12 +391,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:20.12]Clap your hands together, stomp your little feet
[01:23.90]Every single puddle makes the melody complete!
[01:29.20]Jump! Splash! Hooray!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
<pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
<div class="subs-cover">
<img src="/covers/08_Strawberry-Cloud-Bakery.webp" alt="Strawberry Cloud Bakery album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Strawberry Cloud Bakery <span class="subs-meta">· Japanese cute · 19 lines · 100 s</span></span><a class="subs-dl" href="/subs/strawberry-cloud-bakery.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-8" src="https://content.hoelee.com/file/hoelee/music/Strawberry-Cloud-Bakery-Mr-Hoelee.mp3"></audio>
<pre id="subs-8" hidden>[ti:Strawberry Cloud Bakery]
[ar:Mr Hoelee]
[00:08.32]Ding-dong rings the little bell above the bakery door
[00:13.48]Flour on the apron and confetti on the floor
@@ -376,12 +422,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:22.48]A croissant for the puppy and a muffin for the cat
[01:26.20]With a dollop of vanilla cream upon a beret hat!
[01:33.58]Fresh out of the oven! Yum, yum!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
<pre id="subs-9" hidden>[ti:Captain Marshmallow]
<div class="subs-cover">
<img src="/covers/09_Captain-Marshmallow.webp" alt="Captain Marshmallow album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Captain Marshmallow <span class="subs-meta">· Japanese cute · 22 lines · 95 s</span></span><a class="subs-dl" href="/subs/captain-marshmallow.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-9" src="https://content.hoelee.com/file/hoelee/music/Captain-Marshmallow-Mr-Hoelee.mp3"></audio>
<pre id="subs-9" hidden>[ti:Captain Marshmallow]
[ar:Mr Hoelee]
[00:08.06]Attention please! Captain on the deck!
[00:10.64]Sofa is my pirate ship, the carpet is the sea
@@ -405,12 +456,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:22.46]Give a little salute and a double-double clap! (Clap-clap!)
[01:26.82]We rule the living room today!
[01:33.00]Mission accomplished! Yay!</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
<pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
<div class="subs-cover">
<img src="/covers/10_Lanterns-on-the-Lotus-Pond.webp" alt="Lanterns on the Lotus Pond album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Lanterns on the Lotus Pond <span class="subs-meta">· Guofeng fusion · 19 lines · 131 s</span></span><a class="subs-dl" href="/subs/lanterns-on-the-lotus-pond.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-10" src="https://content.hoelee.com/file/hoelee/music/Lanterns-on-the-Lotus-Pond-Mr-Hoelee.mp3"></audio>
<pre id="subs-10" hidden>[ti:Lanterns on the Lotus Pond]
[ar:Mr Hoelee]
[00:10.69]Patter goes the summer rain upon the lotus leaf
[00:15.29]Washing all the dusty world and bringing cool relief
@@ -431,12 +487,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:34.62]Listen to the bamboo flute across the misty stream
[01:39.36]In the courtyard of the moon, we share a summer dream
[02:06.76]Red lanterns drifting far away...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
<pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
<div class="subs-cover">
<img src="/covers/11_Wings-of-the-Kunpeng.webp" alt="Wings of the Kunpeng album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Wings of the Kunpeng <span class="subs-meta">· Guofeng fusion · 19 lines · 213 s</span></span><a class="subs-dl" href="/subs/wings-of-the-kunpeng.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-11" src="https://content.hoelee.com/file/hoelee/music/Wings-of-the-Kunpeng-Mr-Hoelee.mp3"></audio>
<pre id="subs-11" hidden>[ti:Wings of the Kunpeng]
[ar:Mr Hoelee]
[00:25.18]Deep beneath the silent waves where no one ever sees
[00:31.60]Sleeps a tiny silver fish dreaming of the breeze
@@ -457,12 +518,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:30.18]Fly across the mountain peaks where immortal rivers flow
[02:36.26]I will watch you turn to wind and let your spirit go
[02:48.84]Ah-ah-ah, fly into the wind...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
<pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
<div class="subs-cover">
<img src="/covers/12_The-Puppeteer's-Thread.webp" alt="The Puppeteer's Thread album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">The Puppeteer's Thread <span class="subs-meta">· Guofeng fusion · 19 lines · 221 s</span></span><a class="subs-dl" href="/subs/the-puppeteer-s-thread.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-12" src="https://content.hoelee.com/file/hoelee/music/The-Puppeteers-Thread-Mr-Hoelee.mp3"></audio>
<pre id="subs-12" hidden>[ti:The Puppeteer's Thread]
[ar:Mr Hoelee]
[00:24.12]Carved from a willow branch, painted with a smile
[00:34.16]Dressed in tiny embroidered silk, traveling mile by mile
@@ -483,12 +549,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:48.56]Though my heart is made of wood and cannot feel the rain
[02:54.02]Every pull upon the thread remembers joy and pain
[03:05.04]Ten thin threads of crimson silk...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
<pre id="subs-13" hidden>[ti:Paper Airplane in September]
<div class="subs-cover">
<img src="/covers/13_Paper-Airplane-in-September.webp" alt="Paper Airplane in September album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Paper Airplane in September <span class="subs-meta">· Acoustic folk · 18 lines · 128 s</span></span><a class="subs-dl" href="/subs/paper-airplane-in-september.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-13" src="https://content.hoelee.com/file/hoelee/music/Paper-Airplane-in-September-Mr-Hoelee.mp3"></audio>
<pre id="subs-13" hidden>[ti:Paper Airplane in September]
[ar:Mr Hoelee]
[00:10.42]Sunlight on the wooden desk is moving inch by inch
[00:15.10]Sparrows on the telegraph wire never seem to flinch
@@ -508,12 +579,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:41.68]Floating past the bicycles and underneath the trees
[01:57.78]Underneath the autumn trees...
[02:02.18]Goodbye, summer days.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
<pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
<div class="subs-cover">
<img src="/covers/14_Porridge-and-Evening-Smoke.webp" alt="Porridge and Evening Smoke album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Porridge and Evening Smoke <span class="subs-meta">· Acoustic folk · 17 lines · 144 s</span></span><a class="subs-dl" href="/subs/porridge-and-evening-smoke.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-14" src="https://content.hoelee.com/file/hoelee/music/Porridge-and-Evening-Smoke-Mr-Hoelee.mp3"></audio>
<pre id="subs-14" hidden>[ti:Porridge and Evening Smoke]
[ar:Mr Hoelee]
[00:11.54]Smoke is rising from the roof into the purple sky
[00:17.04]While the evening swallows call and hurry on up high
@@ -532,12 +608,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:44.60]No matter how the outside world is noisy, cold, and wide
[01:50.14]The lamp upon the dining table keeps us warm inside
[01:57.40]The lamp is always on for you...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
<pre id="subs-15" hidden>[ti:Green Train to the Sea]
<div class="subs-cover">
<img src="/covers/15_Green-Train-to-the-Sea.webp" alt="Green Train to the Sea album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Green Train to the Sea <span class="subs-meta">· Acoustic folk · 17 lines · 108 s</span></span><a class="subs-dl" href="/subs/green-train-to-the-sea.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-15" src="https://content.hoelee.com/file/hoelee/music/Green-Train-to-the-Sea-Mr-Hoelee.mp3"></audio>
<pre id="subs-15" hidden>[ti:Green Train to the Sea]
[ar:Mr Hoelee]
[00:28.22]Clickety-clack upon the track, the green train starts to roll
[00:29.42]Leaving all the city gray behind the tunnel hole
@@ -556,12 +637,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:26.34]Every station has a name I've never heard before
[01:30.66]Soon the scent of salty air will meet us at the shore
[01:46.82]Look, there is the sea...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
<pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
<div class="subs-cover">
<img src="/covers/16_Sanctuary-of-the-Dawn.webp" alt="Sanctuary of the Dawn album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Sanctuary of the Dawn <span class="subs-meta">· Choral · 19 lines · 182 s</span></span><a class="subs-dl" href="/subs/sanctuary-of-the-dawn.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-16" src="https://content.hoelee.com/file/hoelee/music/Sanctuary-of-the-Dawn-Mr-Hoelee.mp3"></audio>
<pre id="subs-16" hidden>[ti:Sanctuary of the Dawn]
[ar:Mr Hoelee]
[00:22.82]Ahh-ahh, sanctus, ahh...
[00:25.64]Shadows fade before the light that rises in the east
@@ -582,12 +668,17 @@ a.dispatchEvent(new Event('timeupdate'));
[02:07.48]Rest beneath the gentle shelter of a shining wing
[02:15.30]Peace be with you... forevermore.
[02:26.48]Amen, ahh...</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
<pre id="subs-17" hidden>[ti:Look Upon Your Path]
<div class="subs-cover">
<img src="/covers/17_Look-Upon-Your-Path.webp" alt="Look Upon Your Path album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Look Upon Your Path <span class="subs-meta">· Choral · 17 lines · 122 s</span></span><a class="subs-dl" href="/subs/look-upon-your-path.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-17" src="https://content.hoelee.com/file/hoelee/music/Look-Upon-Your-Path-Mr-Hoelee.mp3"></audio>
<pre id="subs-17" hidden>[ti:Look Upon Your Path]
[ar:Mr Hoelee]
[00:09.64]Look upon the winding path where fallen leaves are blown
[00:14.64]Children walking hand in hand so no one is alone
@@ -606,12 +697,17 @@ a.dispatchEvent(new Event('timeupdate'));
[01:31.34]Though the night is long and deep, the stars are watching still
[01:36.44]Spring will wake the seeds asleep upon the quiet hill
[01:45.98]Look upon your path... the dawn is near.</pre>
</div>
</figure>
<figure class="subs-track">
<figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
<pre id="subs-18" hidden>[ti:Bells of the Winter Star]
<div class="subs-cover">
<img src="/covers/18_Bells-of-the-Winter-Star.webp" alt="Bells of the Winter Star album cover" loading="lazy" width="160" height="160" />
</div>
<div class="subs-content">
<figcaption><span class="subs-title">Bells of the Winter Star <span class="subs-meta">· Choral · 18 lines · 177 s</span></span><a class="subs-dl" href="/subs/bells-of-the-winter-star.srt" download>.srt</a></figcaption>
<audio controls preload="metadata" oncontextmenu="return false;" controlslist="nodownload" data-lrc="subs-18" src="https://content.hoelee.com/file/hoelee/music/Bells-of-the-Winter-Star-Mr-Hoelee.mp3"></audio>
<pre id="subs-18" hidden>[ti:Bells of the Winter Star]
[ar:Mr Hoelee]
[00:08.50]Ding-dong, ding-dong, ring out the bells...
[00:18.20]Snowflakes falling from the sky in silence pure and white
@@ -631,6 +727,7 @@ a.dispatchEvent(new Event('timeupdate'));
[02:28.00]Gloria, gloria, hear the angels sing
[02:37.14]Peace on the earth this holy night will bring
[02:49.30]Gloria... peace on the earth.</pre>
</div>
</figure>
<script>
// subs-track: scroll LRC in step with <audio>; current line stays centred
src/styles/global.css
+18 -2
View File
@@ -799,10 +799,18 @@ a.category-card:hover { border-color: var(--brand); }
border-bottom: 1px solid var(--border);
background: #0d1220;
}
.category-card .art svg {
.category-card .art svg,
.category-card .art img,
.category-card .art picture {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.25s ease;
}
a.category-card:hover .art img {
transform: scale(1.02);
}
.category-card .body {
padding: 1.05rem 1.2rem 1.2rem;
@@ -856,7 +864,15 @@ a.category-card:hover { border-color: var(--brand); }
line-height: 0;
background: #0d1220;
}
.cat-art-wrap svg { width: 100%; height: auto; display: block; }
.cat-art-wrap svg,
.cat-art-wrap img,
.cat-art-wrap picture {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.cat-count {
margin: 1.25rem 0 1.75rem;
font-family: var(--font-mono);