From e1aa87ece0a1a4356f13c4caf109b7e8367b7649 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Fri, 12 Jul 2024 14:39:45 +0800 Subject: [PATCH 1/7] improve: scroll to current lyric in real time while adjusting progress --- package.json | 2 +- src/lib/components/lyrics.svelte | 145 +++++++++++++++++++++---------- src/routes/+page.svelte | 2 +- src/routes/database/+page.svelte | 6 +- 4 files changed, 105 insertions(+), 50 deletions(-) diff --git a/package.json b/package.json index e24b2ae..dfff053 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "1.10.1", + "version": "1.12.4", "private": false, "scripts": { "dev": "vite dev", diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte index 1cbfc2e..a0edc93 100644 --- a/src/lib/components/lyrics.svelte +++ b/src/lib/components/lyrics.svelte @@ -17,6 +17,9 @@ let nextUpdate = -1; let lastAdjustProgress = 0; let localProgress = 0; + let lastScroll = 0; + let scrolling = false; + let scriptScrolling = false; let refs: HTMLParagraphElement[] = []; let _refs: any[] = []; @@ -30,8 +33,19 @@ else return 'previous-lyric'; } + // scroll to correspoding lyric while adjusting progress $: { - if (lyricsContainer && originalLyrics && originalLyrics.scripts) { + if ($userAdjustingProgress == true) { + const currentLyric = refs[getLyricIndex(progress)]; + scrollToLyric(currentLyric); + } + } + + $: { + (() => { + if (lyricsContainer === undefined || originalLyrics.scripts === undefined) { + return; + } const scripts = originalLyrics.scripts; currentPositionIndex = getLyricIndex(progress); const cl = scripts[currentPositionIndex]; @@ -42,23 +56,25 @@ currentLyricIndex = -1; nextUpdate = cl.start; } - if ($userAdjustingProgress === false) { - for (let i = 0; i < scripts.length; i++) { - const offset = Math.abs(i - currentPositionIndex); - const blurRadius = Math.min(offset * 1.5, 16); - if (refs[i]) { - refs[i].style.filter = `blur(${blurRadius}px)`; - } + const currentLyric = refs[currentPositionIndex]; + if ($userAdjustingProgress === true || scrolling || currentLyric.getBoundingClientRect().top < 0) { + return; + } + for (let i = 0; i < scripts.length; i++) { + const offset = Math.abs(i - currentPositionIndex); + const blurRadius = Math.min(offset * 1.5, 16); + if (refs[i]) { + refs[i].style.filter = `blur(${blurRadius}px)`; } } - } + })(); } function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } - async function a(h: number) { + async function moveToNextLine(h: number) { let pos = currentPositionIndex + 2; for (let i = currentPositionIndex + 2; i < refs.length; i++) { const lyric = refs[i]; @@ -96,12 +112,20 @@ for (let i = 0; i < refs.length; i++) { refs[i].style.transform = `translateY(0px)`; } + scriptScrolling = true; lyricsContainer.scrollTop += h; + setTimeout(() => { + scriptScrolling = false; + }, 500); } - async function b(currentLyric: HTMLParagraphElement) { + async function scrollToLyric(currentLyric: HTMLParagraphElement) { if (!originalLyrics || !originalLyrics.scripts || !lyricsContainer) return; + scriptScrolling = true; lyricsContainer.scrollTop += currentLyric.getBoundingClientRect().top - 144; + setTimeout(() => { + scriptScrolling = false; + }, 500); } userAdjustingProgress.subscribe((v) => { @@ -126,9 +150,10 @@ // progressBarRaw is used to detect progress changes at system-level (not in AquaVox) progressBarRaw.subscribe((progress: number) => { if ($userAdjustingProgress === false && getLyricIndex) { + // prevent calling too frequent if (Math.abs(localProgress - progress) > 0.6) { const currentLyric = refs[getLyricIndex(progress)]; - b(currentLyric); + scrollToLyric(currentLyric); } localProgress = progress; } @@ -141,42 +166,71 @@ } }); - $: { - if ($userAdjustingProgress) { - nextUpdate = progress; - } else { - if (nextUpdate - progress < 0.05) { - if ( - currentPositionIndex >= 0 && - currentPositionIndex !== currentAnimationIndex && - currentPositionIndex !== lastAdjustProgress - ) { - const offsetHeight = - refs[currentPositionIndex].getBoundingClientRect().height + - refs[currentPositionIndex].getBoundingClientRect().top - - 144; - const currentLyric = refs[currentPositionIndex]; - currentLyric.style.transition = - 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; - currentLyric.style.transform = `translateY(${-offsetHeight}px)`; - - for (let i = currentPositionIndex - 1; i >= 0; i--) { - refs[i].style.transition = - 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; - const h = refs[i].getBoundingClientRect().height; - refs[i].style.transform = `translateY(${-offsetHeight}px)`; - } - if (currentPositionIndex + 1 < refs.length) { - const nextLyric = refs[currentPositionIndex + 1]; - nextLyric.style.transition = - 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; - nextLyric.style.transform = `translateY(${-offsetHeight}px)`; - a(offsetHeight); - } - currentAnimationIndex = currentPositionIndex; + function scrollHandler() { + scrolling = !scriptScrolling; + if (scrolling && originalLyrics.scripts) { + lastScroll = new Date().getTime(); + for (let i = 0; i < originalLyrics.scripts.length; i++) { + if (refs[i]) { + refs[i].style.filter = 'blur(0px)'; } } } + setTimeout(() => { + if (new Date().getTime() - lastScroll > 5000) { + scrolling = false; + } + }, 5500); + } + + $: { + (() => { + if ($userAdjustingProgress) { + nextUpdate = progress; + return; + } + + if (nextUpdate - progress >= 0.05) { + return; + } + if ( + currentPositionIndex < 0 || + currentPositionIndex === currentAnimationIndex || + currentPositionIndex === lastAdjustProgress || + scrolling + ) { + return; + } + const currentLyric = refs[currentPositionIndex]; + + if (originalLyrics.scripts && currentLyric.getBoundingClientRect().top < 0) { + return; + } + + const offsetHeight = + refs[currentPositionIndex].getBoundingClientRect().height + + refs[currentPositionIndex].getBoundingClientRect().top - + 144; + + currentLyric.style.transition = + 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; + currentLyric.style.transform = `translateY(${-offsetHeight}px)`; + + for (let i = currentPositionIndex - 1; i >= 0; i--) { + refs[i].style.transition = + 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; + const h = refs[i].getBoundingClientRect().height; + refs[i].style.transform = `translateY(${-offsetHeight}px)`; + } + if (currentPositionIndex + 1 < refs.length) { + const nextLyric = refs[currentPositionIndex + 1]; + nextLyric.style.transition = + 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; + nextLyric.style.transform = `translateY(${-offsetHeight}px)`; + moveToNextLine(offsetHeight); + } + currentAnimationIndex = currentPositionIndex; + })(); } @@ -185,6 +239,7 @@ class="absolute top-[6.5rem] md:top-36 xl:top-0 w-screen xl:w-[52vw] px-6 md:px-12 lg:px-[7.5rem] xl:left-[45vw] xl:px-[3vw] h-[calc(100vh-17rem)] xl:h-screen font-sans text-left no-scrollbar overflow-y-auto z-[1] pt-16 lyrics" bind:this={lyricsContainer} + on:scroll={scrollHandler} > {#if debugMode}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a6fb279..d89d78d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -77,7 +77,7 @@

- AquaVox 1.10.1 · 早期公开预览 · 源代码参见 + AquaVox 1.12.4 · 早期公开预览 · 源代码参见 GitHub

导入音乐
diff --git a/src/routes/database/+page.svelte b/src/routes/database/+page.svelte index 0df624e..1f854f0 100644 --- a/src/routes/database/+page.svelte +++ b/src/routes/database/+page.svelte @@ -72,13 +72,13 @@ > {song.singer.join(', ')} -
+
{#if song.duration} - {formatDuration(song.duration)} + {formatDuration(song.duration)} {/if}
{#if song.views} - {formatViews(song.views)}播放 + {formatViews(song.views)}播放 {/if}
From 5cd9abdcc0550ee1c063b9ebf808dbf3f85a2609 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Fri, 12 Jul 2024 14:52:53 +0800 Subject: [PATCH 2/7] improve: add more comments to lyrics component --- src/lib/components/lyrics.svelte | 51 ++++++++++++++++++-------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte index a0edc93..4b2f3ee 100644 --- a/src/lib/components/lyrics.svelte +++ b/src/lib/components/lyrics.svelte @@ -4,10 +4,13 @@ import progressBarRaw from '$lib/state/progressBarRaw'; import type { LrcJsonData } from 'lrc-parser-ts'; import progressBarSlideValue from '$lib/state/progressBarSlideValue'; + + // Component input properties export let lyrics: string[]; export let originalLyrics: LrcJsonData; export let progress: number; + // Local state and variables let getLyricIndex: Function; const debugMode = false; let currentLyricIndex = -1; @@ -21,11 +24,13 @@ let scrolling = false; let scriptScrolling = false; + // References to lyric elements let refs: HTMLParagraphElement[] = []; let _refs: any[] = []; $: refs = _refs.filter(Boolean); $: getLyricIndex = createLyricsSearcher(originalLyrics); + // Helper function to get CSS class for a lyric based on its index and progress function getClass(lyricIndex: number, progress: number) { if (!originalLyrics.scripts) return 'previous-lyric'; if (currentLyricIndex === lyricIndex) return 'current-lyric'; @@ -33,7 +38,7 @@ else return 'previous-lyric'; } - // scroll to correspoding lyric while adjusting progress + // Scroll to corresponding lyric while adjusting progress $: { if ($userAdjustingProgress == true) { const currentLyric = refs[getLyricIndex(progress)]; @@ -41,14 +46,15 @@ } } + // Update the current lyric and apply blur effect based on the progress $: { (() => { - if (lyricsContainer === undefined || originalLyrics.scripts === undefined) { - return; - } + if (!lyricsContainer || !originalLyrics.scripts) return; + const scripts = originalLyrics.scripts; currentPositionIndex = getLyricIndex(progress); const cl = scripts[currentPositionIndex]; + if (cl.start <= progress && progress <= cl.end) { currentLyricIndex = currentPositionIndex; nextUpdate = cl.end; @@ -56,10 +62,10 @@ currentLyricIndex = -1; nextUpdate = cl.start; } + const currentLyric = refs[currentPositionIndex]; - if ($userAdjustingProgress === true || scrolling || currentLyric.getBoundingClientRect().top < 0) { - return; - } + if ($userAdjustingProgress || scrolling || currentLyric.getBoundingClientRect().top < 0) return; + for (let i = 0; i < scripts.length; i++) { const offset = Math.abs(i - currentPositionIndex); const blurRadius = Math.min(offset * 1.5, 16); @@ -70,10 +76,12 @@ })(); } + // Utility function to create a sleep/delay function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } + // Function to move the lyrics up smoothly async function moveToNextLine(h: number) { let pos = currentPositionIndex + 2; for (let i = currentPositionIndex + 2; i < refs.length; i++) { @@ -85,7 +93,7 @@ await sleep(75); if (refs[i - 2].getBoundingClientRect().top > lyricsContainer.getBoundingClientRect().height) break; } - // 特判，鬼知道为什么 + if (refs.length - pos < 3) { for (let i = pos; i < refs.length; i++) { const lyric = refs[i]; @@ -99,8 +107,8 @@ for (let i = pos; i < refs.length; i++) { refs[i].style.transition = 'transform 0s, filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; - const h = refs[i].getBoundingClientRect().height; - refs[i].style.transform = `translateY(${-h}px)`; + const height = refs[i].getBoundingClientRect().height; + refs[i].style.transform = `translateY(${-height}px)`; } } @@ -119,6 +127,7 @@ }, 500); } + // Scroll the lyrics container to the given lyric async function scrollToLyric(currentLyric: HTMLParagraphElement) { if (!originalLyrics || !originalLyrics.scripts || !lyricsContainer) return; scriptScrolling = true; @@ -128,6 +137,7 @@ }, 500); } + // Handle user adjusting progress state changes userAdjustingProgress.subscribe((v) => { if (!originalLyrics) return; const scripts = originalLyrics.scripts; @@ -147,10 +157,9 @@ } }); - // progressBarRaw is used to detect progress changes at system-level (not in AquaVox) + // Handle progress changes at system level progressBarRaw.subscribe((progress: number) => { if ($userAdjustingProgress === false && getLyricIndex) { - // prevent calling too frequent if (Math.abs(localProgress - progress) > 0.6) { const currentLyric = refs[getLyricIndex(progress)]; scrollToLyric(currentLyric); @@ -159,13 +168,14 @@ } }); - // progressBarSlideValue is to detect progress bar sliding event + // Handle progress bar sliding events progressBarSlideValue.subscribe((_) => { if ($userAdjustingProgress === false && getLyricIndex) { lastAdjustProgress = currentPositionIndex; } }); + // Handle scroll events in the lyrics container function scrollHandler() { scrolling = !scriptScrolling; if (scrolling && originalLyrics.scripts) { @@ -183,6 +193,7 @@ }, 5500); } + // Update lyrics position based on progress $: { (() => { if ($userAdjustingProgress) { @@ -190,22 +201,18 @@ return; } - if (nextUpdate - progress >= 0.05) { - return; - } + if (nextUpdate - progress >= 0.05) return; if ( currentPositionIndex < 0 || currentPositionIndex === currentAnimationIndex || currentPositionIndex === lastAdjustProgress || scrolling - ) { + ) return; - } + const currentLyric = refs[currentPositionIndex]; - if (originalLyrics.scripts && currentLyric.getBoundingClientRect().top < 0) { - return; - } + if (originalLyrics.scripts && currentLyric.getBoundingClientRect().top < 0) return; const offsetHeight = refs[currentPositionIndex].getBoundingClientRect().height + @@ -219,7 +226,7 @@ for (let i = currentPositionIndex - 1; i >= 0; i--) { refs[i].style.transition = 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease'; - const h = refs[i].getBoundingClientRect().height; + const height = refs[i].getBoundingClientRect().height; refs[i].style.transform = `translateY(${-offsetHeight}px)`; } if (currentPositionIndex + 1 < refs.length) { From 3633c6b356065f00138a9dbbe99bcbe80d85368f Mon Sep 17 00:00:00 2001 From: alikia2x Date: Fri, 12 Jul 2024 17:57:46 +0800 Subject: [PATCH 3/7] update: add NetEase Music ID into music metadata --- data/song/BV16r42137W5.json | 1 + data/song/BV1Rr42147Am.json | 1 + data/song/BV1Xp421o7hr.json | 1 + data/song/BV1pE421A7mM.json | 1 + package.json | 2 +- src/lib/getVersion.ts | 5 +++++ src/lib/server/database/musicInfo.d.ts | 1 + src/routes/+page.svelte | 3 ++- src/routes/database/submit/+page.svelte | 1 + vite.config.js | 5 +++++ 10 files changed, 19 insertions(+), 2 deletions(-) create mode 100644 src/lib/getVersion.ts diff --git a/data/song/BV16r42137W5.json b/data/song/BV16r42137W5.json index 13cb24a..c021ddb 100644 --- a/data/song/BV16r42137W5.json +++ b/data/song/BV16r42137W5.json @@ -43,5 +43,6 @@ "views": 502678, "publishTime": "2024-04-18 12:00:00", "updateTime": "2024-07-12 02:49:26", + "netEaseID": 2145230796, "lyric": "[ti: 天山之外]\n[ar: 洛天依]\n[al: 游四方]\n[00:00.000]\n[00:20.890] 旷野是 自由的家\n[00:29.680] 顶冰花 雪里生芽\n[00:39.950] 光的延伸 让香弥漫夕阳下\n[00:49.310] 可妈妈 天山外是哪\n[00:59.130] 我是否如她挺拔 四季更迭洁白无暇\n[01:04.070] 你有绝世风华 芦苇悠悠 粼粼之下\n[01:08.910] 不必如四季伟大\n[01:11.260] 天山不曾 规定谁 像她 随心而去吧\n[01:17.020] 高空下\n[01:18.550] 自由它该乘骏马\n[01:20.880] 绿浪滚滚中散着发\n[01:23.360] 随风起舞落下\n[01:25.430] 也算生命别样优雅\n[01:28.110] 乘风随心而去吧\n[01:30.470] 向着无边的旷野 飞吧\n[01:35.890] 去浪迹天涯\n[01:57.190] 辽阔的 不止晚霞\n[02:06.430] 又盛开 天山梦话\n[02:16.430] 光的延伸 是你和我 放不下\n[02:25.930] 记忆里 天山下的家\n[02:35.280] 我是否如她挺拔 四季更迭洁白无暇\n[02:40.140] 你有绝世风华 芦苇悠悠粼粼之下\n[02:44.870] 不必如四季伟大\n[02:47.290] 天山不曾 规定谁像她随心而去吧\n[02:53.250] 高空下\n[02:54.520] 自由它该乘骏马\n[02:56.880] 绿浪滚滚中散着发\n[02:59.380] 随风起舞落下\n[03:01.720] 也算生命别样优雅\n[03:04.080] 乘风随心而去吧\n[03:06.500] 向着无边的旷野 飞吧\n[03:11.920] 去浪迹天涯\n[03:14.580]" } \ No newline at end of file diff --git a/data/song/BV1Rr42147Am.json b/data/song/BV1Rr42147Am.json index 4646593..4f3e3ce 100644 --- a/data/song/BV1Rr42147Am.json +++ b/data/song/BV1Rr42147Am.json @@ -44,5 +44,6 @@ "views": 608238, "publishTime": "2024-04-03 12:00:00", "updateTime": "2024-07-12 02:40:26", + "netEaseID": 2141645940, "lyric": "[ti: 雪山之眼]\n[ar: 洛天依 & 旦增益西]\n[al: 游四方]\n[tool: 歌词滚动姬 https://lrc-maker.github.io]\n[length: 04:17.400]\n[00:34.280] 浸透了经卷 记忆的呼喊\n[00:37.800] 雪珠滚落山巅 栽下一个春天\n[00:47.390] 松石敲响玲珑清脆的银花\n[00:51.600] 穿过玛瑙的红霞\n[00:54.430] 在她眼中结编 亘久诗篇\n[01:05.440] བྲོ་ར་འདི་ལ་བྲོ་ཅིག་འཁྲབ། 在舞池里舞一舞\n[01:08.780] 祝祷转过千年 五色经幡飘飞\n[01:12.040] 奏起悠扬巴叶 任岁月拨弦\n[01:19.130] གཞས་ར་འདི་ལ་གཞས་གཅིག་བཏང་། 我在歌坛献首歌\n[01:22.330] 宫殿 塔尖 彩绘 日月 同辉\n[01:25.810] 那层厚重壁垒化身 蝉翼一片\n[01:29.110] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[01:30.790] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[01:32.510] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[01:34.120] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[01:35.920] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[01:37.630] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[01:39.350] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[01:41.050] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[01:42.740] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[01:44.630] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[01:46.280] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[01:48.010] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[01:49.600] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[01:51.380] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[01:53.070] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[01:54.820] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[01:58.580] སྔོན་དང་པོ་གྲུབ་ཐོབ་ཐང་སྟོང་རྒྱལ་པོས་མཛད་པའི་མཛད་ཚུལ་དུ། དང་པོ་རྔོན་པའི་ས་སྦྱངས་ས་འདུལ། གཉིས་པ་རྒྱ་ལུའི་བྱིན་འབེབས། གསུམ་པ་ལྷ་མོའི་གླུ་གར་སོགས་རིན་ཆེན་གསུང་མགུར་གཞུང་བཟང་མང་པོ་འདུག་སྟེ། དེ་ཡང་མ་ཉུང་གི་ཚིག་ལ་དུམ་མཚམས་གཅིག་ཞུས་པ་བྱུང་བ་ཡིན་པ་ལགས་སོ། 如祖师唐东杰布所著，一有温巴净地，二有甲鲁祈福，三有仙女歌舞，所著繁多，在此简略献之。\n[02:24.240] 浸透了经卷 记忆的呼喊\n[02:27.450] 雪珠滚落山巅 栽下一个春天\n[02:37.090] 松石敲响玲珑清脆的银花\n[02:41.280] 穿过玛瑙的红霞\n[02:44.010] 在她眼中结编 亘久诗篇\n[02:55.250] བྲོ་ར་འདི་ལ་བྲོ་ཅིག་འཁྲབ། 在舞池里舞一舞\n[02:58.410] 祝祷转过千年 五色经幡飘飞\n[03:01.750] 奏起悠扬巴叶 任岁月拨弦\n[03:08.840] གཞས་ར་འདི་ལ་གཞས་གཅིག་བཏང་། 我在歌坛献首歌\n[03:12.050] 宫殿 塔尖 彩绘 日月 同辉\n[03:15.400] 那层厚重壁垒化身 蝉翼一片\n[03:18.850] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:20.480] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:22.210] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:23.910] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:25.662] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:27.391] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:29.096] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:30.789] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:32.496] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:34.175] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:35.876] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:37.606] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:39.290] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:41.030] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:42.679] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:44.455] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:46.176] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:47.910] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:49.625] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:51.293] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:53.005] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[03:54.742] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[03:56.479] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[03:58.159] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[03:59.859] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[04:01.548] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[04:03.312] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[04:05.026] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[04:06.721] ང་ཚོ་འདི་ལ་འཛོམས་འཛོམས། 我们在此相聚\n[04:08.479] གཏན་དུ་འཛོམས་རྒྱུ་བྱུང་ན། 希望可以常聚\n[04:10.175] གཏན་དུ་འཛོམས་པའི་མི་ལ། 在此相聚的人们\n[04:11.923] སྙུན་གཞི་གོད་ཆགས་མ་གཏོང༌། 祝愿平安富足\n[04:17.400] " } \ No newline at end of file diff --git a/data/song/BV1Xp421o7hr.json b/data/song/BV1Xp421o7hr.json index b08d985..1dc40b2 100644 --- a/data/song/BV1Xp421o7hr.json +++ b/data/song/BV1Xp421o7hr.json @@ -85,5 +85,6 @@ "views": 2733456, "publishTime": "2024-02-09 20:31:23", "updateTime": "2024-07-12 00:23:22", + "netEaseID": 2124462309, "lyric": "[ti: 大哉乾元]\n[ar: 洛天依]\n[al: 2024哔哩哔哩拜年纪]\n[tool: 歌词滚动姬 https://lrc-maker.github.io]\n[length: 04:19.536]\n[00:05.630] 经起幽明 悟处通玄\n[00:09.680] 首窥龙堑 见岳见渊\n[00:13.640] 道不善宣 义不善绻\n[00:17.270] 源流万世 大哉乾元！\n[00:21.837]\n[00:36.390] 不曾闻日月争辉\n[00:38.170] 坎离复往 立下恒规\n[00:40.330] 照东南 有坤徇乾 承西北\n[00:43.680] 天道自昆仑巍巍\n[00:45.590] 翻起华夏巽震艮兑\n[00:47.810] 万象予万灵得见 两相盈岁\n[00:51.210] 潜龙长生应紫微\n[00:53.000] 惟向四方五气寻遂\n[00:55.200] 燧火旁八卦百草揆经纬\n[00:58.220] 正位 纪天下一归\n[01:00.370] 不消祈天退水\n[01:02.590] 初难知一念一决生龙髓\n[01:05.930] 百家注龙慧 千军起龙威 砥淬\n[01:10.260] 妙笔生文穗 罡风抚长麾\n[01:13.030] 始见龙形汇 以天田冲腾直向九陲\n[01:20.490] 龙震于疆 万里宁壤 天地皆可往\n[01:24.140] 龙秀于象 引仙来访 诗蜀道河江\n[01:27.940] 龙明于章 执笔成鉴 映五千煌煌\n[01:31.820] 不独九州五岳 帝王将相见苍茫\n[01:35.340] 龙泽于汤 唤水筑乡 单舟见京杭\n[01:39.040] 龙健于常 百音同讲 道一种炎黄\n[01:42.740] 龙景于康 见之庙堂 亦显于曲坊\n[01:46.580] 不劳此间祥云瑞兽频频诰春长！\n[01:57.280] 干支移晷又几回\n[01:59.500] 揽尽天骄襄助一醉\n[02:01.790] 虽万言竟道不尽无字碑\n[02:04.680] 临渊乾乾 君子催\n[02:06.600] 或跃 无咎相随\n[02:09.130] 同为龙 却与往昔不连讳\n[02:12.390] 且待飞龙归 簸却沧溟水 如沸\n[02:16.700] 有龙掸风雷 见首不见尾\n[02:19.540] 苏苏万物蜕 证元亨利贞变易轮回\n[02:27.080] 龙华于旸 红旗漫卷 新水濯旧隍\n[02:30.740] 龙泰于霜 烽烟消长 更赳赳昂昂\n[02:34.430] 龙温于壮 留待潺潺 驰涌成泱泱\n[02:38.260] 好教流光紫极 鹊渡银潢伴流觞\n[02:41.660] 龙韧于刚 龙吟激荡 云止聆佳响\n[02:45.490] 龙德于昌 喜见船马 纵横间丰仓\n[02:49.150] 龙眷于邦 情习众广 仍化为一方\n[02:52.930] 其妙错综复杂 不孤兵车付一匡！\n[02:56.602]\n[03:40.980] 此去向东 瀚海游龙 滔滔几万重\n[03:44.620] 一跃破空 乘风逐虹 猎猎青云中\n[03:48.250] 天音入梦 扶摇上穹 矫矫游星宫\n[03:52.080] 犹念神州谷稻耕耘收藏守时无？\n[03:55.670] 一息一动 似异似同 无之以为用\n[03:59.240] 天地辰龙 龙生九种 但两爻合共\n[04:03.130] 假逢童蒙 欲解懵懂 何处有真龙\n[04:06.830] 只道「大哉乾元」秩秩幽幽必然中\n[04:10.350] 也道「大哉乾元」切切实实一言中！\n[04:14.693]" } \ No newline at end of file diff --git a/data/song/BV1pE421A7mM.json b/data/song/BV1pE421A7mM.json index 17b4a07..222b72d 100644 --- a/data/song/BV1pE421A7mM.json +++ b/data/song/BV1pE421A7mM.json @@ -37,5 +37,6 @@ "views": 3021, "publishTime": "2024-07-12 00:00:00", "updateTime": "2024-07-12 01:49:30", + "netEaseID": 2606318125, "lyric": "[ti: 唱给锦依卫]\n[ar: 洛天依]\n[tool: 歌词滚动姬 https://lrc-maker.github.io]\n[00:00.000]\n[00:11.400] 推开窗，又是一缕曙光轻拂你脸庞\n[00:17.100] 风轻扬，浮现初见时你青涩模样\n[00:22.830] 齐开唱，歌声驱散你眼神中的迷茫\n[00:28.770] 飘过秋叶与春花，流转几轮冬与夏\n[00:34.410] 乘着馨风去远航，有你长夜也明亮\n[00:40.230] 携手向梦的彼方，追寻心中那道光\n[00:46.800] 一起唱下去吧\n[00:50.880] 用你我梦想\n[00:53.610] 希望光芒为你点亮\n[00:58.230] 续写未来篇章\n[01:02.400] 纵岁月漫长\n[01:05.220] 会永远传唱\n[01:09.797]\n[01:32.370] 指尖淌，自由弦音随着风儿去流浪\n[01:38.040] 回头望，路上不时也会跌跌撞撞\n[01:44.010] 别彷徨，遗忘那过去的灰心和失望\n[01:49.740] 有你相伴的过往，每篇故事都珍藏\n[01:55.470] 载着梦想去远航，你我并肩去闯荡\n[02:01.260] 执笔最美的诗行，烟火为你而绽放\n[02:07.830] 一起唱下去吧\n[02:11.640] 星澜里荡漾\n[02:14.700] 留下最绚烂的光芒\n[02:19.350] 唱你我的梦想\n[02:23.370] 在舞台中央\n[02:26.190] 交织中回响\n[02:31.020] 一起唱下去吧\n[02:34.980] 用你我梦想\n[02:37.800] 将希望光芒再点亮\n[02:42.450] 续写未来篇章\n[02:46.500] 纵岁月沧桑\n[02:49.410] 永远在你身旁\n[02:53.364]" } \ No newline at end of file diff --git a/package.json b/package.json index dfff053..f7f2de6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "1.12.4", + "version": "1.12.5", "private": false, "scripts": { "dev": "vite dev", diff --git a/src/lib/getVersion.ts b/src/lib/getVersion.ts new file mode 100644 index 0000000..3aeac2c --- /dev/null +++ b/src/lib/getVersion.ts @@ -0,0 +1,5 @@ +import * as pjson from "../../package.json"; + +export default function getVersion(){ + return pjson.version; +} \ No newline at end of file diff --git a/src/lib/server/database/musicInfo.d.ts b/src/lib/server/database/musicInfo.d.ts index 49b9185..5686f0b 100644 --- a/src/lib/server/database/musicInfo.d.ts +++ b/src/lib/server/database/musicInfo.d.ts @@ -19,5 +19,6 @@ interface MusicMetadata { views: number | null; publishTime: string | null; updateTime: string | null; + netEaseID: number | null; lyric: string | null; } \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d89d78d..003a8d2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,5 +1,6 @@ + +
+
+
+ + + + + 编辑 + +
+ +
+
+ {songData.name} +
+ + {songData.producer} + +
+ {#if songData.duration} + {formatDuration(songData.duration)} + {/if} +
+ {#if songData.views} + {formatViews(songData.views)}播放 + {/if} +
+
+
+
+
\ No newline at end of file diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte index 4b2f3ee..03a744e 100644 --- a/src/lib/components/lyrics.svelte +++ b/src/lib/components/lyrics.svelte @@ -68,7 +68,7 @@ for (let i = 0; i < scripts.length; i++) { const offset = Math.abs(i - currentPositionIndex); - const blurRadius = Math.min(offset * 1.5, 16); + const blurRadius = Math.min(offset * 1, 16); if (refs[i]) { refs[i].style.filter = `blur(${blurRadius}px)`; } @@ -278,10 +278,10 @@ ); } .no-scrollbar { - scrollbar-width: 10px; + scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { - width: 10px; + width: 0px; } .current-lyric { position: relative; diff --git a/src/routes/database/+page.server.ts b/src/routes/database/+page.server.ts new file mode 100644 index 0000000..79f69f6 --- /dev/null +++ b/src/routes/database/+page.server.ts @@ -0,0 +1,17 @@ +import { songData } from '$lib/server/cache.js'; +import { loadData } from '$lib/server/database/loadData.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = () => { + loadData(); + const songIDList = songData.keys().slice(0, 20); + const songDataList = []; + for (const songID of songIDList) { + songDataList.push(songData.get(songID)!); + } + return { + songDataList: songDataList + }; +}; + +export const ssr = true; \ No newline at end of file diff --git a/src/routes/database/+page.svelte b/src/routes/database/+page.svelte index 5c3767f..f50e124 100644 --- a/src/routes/database/+page.svelte +++ b/src/routes/database/+page.svelte @@ -1,20 +1,8 @@ @@ -33,57 +21,14 @@ > -
+ gap: 2rem 1rem;" + > {#each songList as song} - -
- - 编辑 - -
- -
-
- {song.name} -
- - {song.producer} - -
- {#if song.duration} - {formatDuration(song.duration)} - {/if} -
- {#if song.views} - {formatViews(song.views)}播放 - {/if} -
-
-
- + {/each}
diff --git a/src/routes/database/page/[id]/+page.server.ts b/src/routes/database/page/[id]/+page.server.ts new file mode 100644 index 0000000..e037184 --- /dev/null +++ b/src/routes/database/page/[id]/+page.server.ts @@ -0,0 +1,18 @@ +import { songData } from '$lib/server/cache.js'; +import { loadData } from '$lib/server/database/loadData.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = ({ params }) => { + const offset = (parseInt(params.id) - 1) * 20; + loadData(); + const songIDList = songData.keys().slice(offset, offset + 20); + const songDataList = []; + for (const songID of songIDList) { + songDataList.push(songData.get(songID)!); + } + return { + songDataList: songDataList + }; +}; + +export const ssr = true; \ No newline at end of file diff --git a/src/routes/database/page/[id]/+page.svelte b/src/routes/database/page/[id]/+page.svelte new file mode 100644 index 0000000..f50e124 --- /dev/null +++ b/src/routes/database/page/[id]/+page.svelte @@ -0,0 +1,34 @@ + + + + AquaVox 音乐数据库 + + +

AquaVox

+ +
+
+

AquaVox 音乐数据库

+ 提交新曲 +
+ +
+ {#each songList as song} + + {/each} +
+