update: lyric import page

doc/lyric/example.avl

@@ -0,0 +1,214 @@
+version: 1
+lyrics:
+1
+00:00:05,630 --> 00:00:09,680
+经起幽明 悟处通玄
+
+2
+00:00:09,680 --> 00:00:13,640
+首窥龙堑 见岳见渊
+
+3
+00:00:13,640 --> 00:00:17,270
+道不善宣 义不善绻
+
+4
+00:00:17,270 --> 00:00:22,110
+源流万世 大哉乾元！
+
+5
+00:00:36,390 --> 00:00:38,170
+不曾闻日月争辉
+
+6
+00:00:38,170 --> 00:00:40,330
+坎离复往 立下恒规
+
+7
+00:00:40,330 --> 00:00:43,680
+照东南 有坤徇乾 承西北
+
+8
+00:00:43,680 --> 00:00:45,590
+天道自昆仑巍巍
+
+9
+00:00:45,590 --> 00:00:47,810
+翻起华夏巽震艮兑
+
+10
+00:00:47,810 --> 00:00:51,210
+万象予万灵得见 两相盈岁
+
+11
+00:00:51,210 --> 00:00:53,000
+潜龙长生应紫微
+
+12
+00:00:53,000 --> 00:00:55,200
+惟向四方五气寻遂
+
+13
+00:00:55,200 --> 00:00:58,220
+燧火旁八卦百草揆经纬
+
+14
+00:00:58,220 --> 00:01:00,370
+正位 纪天下一归
+
+15
+00:01:00,370 --> 00:01:02,590
+不消祈天退水
+
+16
+00:01:02,590 --> 00:01:05,930
+初难知一念一决生龙髓
+
+17
+00:01:05,930 --> 00:01:10,260
+百家注龙慧 千军起龙威 砥淬
+
+18
+00:01:10,260 --> 00:01:13,030
+妙笔生文穗 罡风抚长麾
+
+19
+00:01:13,030 --> 00:01:20,490
+始见龙形汇 以天田冲腾直向九陲
+
+20
+00:01:20,490 --> 00:01:24,140
+龙震于疆 万里宁壤 天地皆可往
+
+21
+00:01:24,140 --> 00:01:27,940
+龙秀于象 引仙来访 诗蜀道河江
+
+22
+00:01:27,940 --> 00:01:31,819
+龙明于章 执笔成鉴 映五千煌煌
+
+23
+00:01:31,819 --> 00:01:35,340
+不独九州五岳 帝王将相见苍茫
+
+24
+00:01:35,340 --> 00:01:39,039
+龙泽于汤 唤水筑乡 单舟见京杭
+
+25
+00:01:39,039 --> 00:01:42,740
+龙健于常 百音同讲 道一种炎黄
+
+26
+00:01:42,740 --> 00:01:46,580
+龙景于康 见之庙堂 亦显于曲坊
+
+27
+00:01:46,580 --> 00:01:50,350
+不劳此间祥云瑞兽频频诰春长！
+
+28
+00:01:57,280 --> 00:01:59,500
+干支移晷又几回
+
+29
+00:01:59,500 --> 00:02:01,790
+揽尽天骄襄助一醉
+
+30
+00:02:01,790 --> 00:02:04,680
+虽万言竟道不尽无字碑
+
+31
+00:02:04,680 --> 00:02:06,600
+临渊乾乾 君子催
+
+32
+00:02:06,600 --> 00:02:09,130
+或跃 无咎相随
+
+33
+00:02:09,130 --> 00:02:12,389
+同为龙 却与往昔不连讳
+
+34
+00:02:12,389 --> 00:02:16,700
+且待飞龙归 簸却沧溟水 如沸
+
+35
+00:02:16,700 --> 00:02:19,540
+有龙掸风雷 见首不见尾
+
+36
+00:02:19,540 --> 00:02:27,079
+苏苏万物蜕 证元亨利贞变易轮回
+
+37
+00:02:27,079 --> 00:02:30,740
+龙华于旸 红旗漫卷 新水濯旧隍
+
+38
+00:02:30,740 --> 00:02:34,430
+龙泰于霜 烽烟消长 更赳赳昂昂
+
+39
+00:02:34,430 --> 00:02:38,260
+龙温于壮 留待潺潺 驰涌成泱泱
+
+40
+00:02:38,260 --> 00:02:41,660
+好教流光紫极 鹊渡银潢伴流觞
+
+41
+00:02:41,660 --> 00:02:45,490
+龙韧于刚 龙吟激荡 云止聆佳响
+
+42
+00:02:45,490 --> 00:02:49,150
+龙德于昌 喜见船马 纵横间丰仓
+
+43
+00:02:49,150 --> 00:02:52,930
+龙眷于邦 情习众广 仍化为一方
+
+44
+00:02:52,930 --> 00:02:57,240
+其妙错综复杂 不孤兵车付一匡！
+
+45
+00:03:40,980 --> 00:03:44,620
+此去向东 瀚海游龙 滔滔几万重
+
+46
+00:03:44,620 --> 00:03:48,250
+一跃破空 乘风逐虹 猎猎青云中
+
+47
+00:03:48,250 --> 00:03:52,080
+天音入梦 扶摇上穹 矫矫游星宫
+
+48
+00:03:52,080 --> 00:03:55,670
+犹念神州谷稻耕耘收藏守时无？
+
+49
+00:03:55,670 --> 00:03:59,240
+一息一动 似异似同 无之以为用
+
+50
+00:03:59,240 --> 00:04:03,130
+天地辰龙 龙生九种 但两爻合共
+
+51
+00:04:03,130 --> 00:04:06,830
+假逢童蒙 欲解懵懂 何处有真龙
+
+52
+00:04:06,830 --> 00:04:10,350
+只道「大哉乾元」秩秩幽幽必然中
+
+53
+00:04:10,350 --> 00:04:14,430
+也道「大哉乾元」切切实实一言中！
+

doc/lyric/大哉乾元.srt

@@ -0,0 +1,212 @@
+1
+00:00:05,630 --> 00:00:09,680
+经起幽明 悟处通玄
+
+2
+00:00:09,680 --> 00:00:13,640
+首窥龙堑 见岳见渊
+
+3
+00:00:13,640 --> 00:00:17,270
+道不善宣 义不善绻
+
+4
+00:00:17,270 --> 00:00:22,110
+源流万世 大哉乾元！
+
+5
+00:00:36,390 --> 00:00:38,170
+不曾闻日月争辉
+
+6
+00:00:38,170 --> 00:00:40,330
+坎离复往 立下恒规
+
+7
+00:00:40,330 --> 00:00:43,680
+照东南 有坤徇乾 承西北
+
+8
+00:00:43,680 --> 00:00:45,590
+天道自昆仑巍巍
+
+9
+00:00:45,590 --> 00:00:47,810
+翻起华夏巽震艮兑
+
+10
+00:00:47,810 --> 00:00:51,210
+万象予万灵得见 两相盈岁
+
+11
+00:00:51,210 --> 00:00:53,000
+潜龙长生应紫微
+
+12
+00:00:53,000 --> 00:00:55,200
+惟向四方五气寻遂
+
+13
+00:00:55,200 --> 00:00:58,220
+燧火旁八卦百草揆经纬
+
+14
+00:00:58,220 --> 00:01:00,370
+正位 纪天下一归
+
+15
+00:01:00,370 --> 00:01:02,590
+不消祈天退水
+
+16
+00:01:02,590 --> 00:01:05,930
+初难知一念一决生龙髓
+
+17
+00:01:05,930 --> 00:01:10,260
+百家注龙慧 千军起龙威 砥淬
+
+18
+00:01:10,260 --> 00:01:13,030
+妙笔生文穗 罡风抚长麾
+
+19
+00:01:13,030 --> 00:01:20,490
+始见龙形汇 以天田冲腾直向九陲
+
+20
+00:01:20,490 --> 00:01:24,140
+龙震于疆 万里宁壤 天地皆可往
+
+21
+00:01:24,140 --> 00:01:27,940
+龙秀于象 引仙来访 诗蜀道河江
+
+22
+00:01:27,940 --> 00:01:31,819
+龙明于章 执笔成鉴 映五千煌煌
+
+23
+00:01:31,819 --> 00:01:35,340
+不独九州五岳 帝王将相见苍茫
+
+24
+00:01:35,340 --> 00:01:39,039
+龙泽于汤 唤水筑乡 单舟见京杭
+
+25
+00:01:39,039 --> 00:01:42,740
+龙健于常 百音同讲 道一种炎黄
+
+26
+00:01:42,740 --> 00:01:46,580
+龙景于康 见之庙堂 亦显于曲坊
+
+27
+00:01:46,580 --> 00:01:50,350
+不劳此间祥云瑞兽频频诰春长！
+
+28
+00:01:57,280 --> 00:01:59,500
+干支移晷又几回
+
+29
+00:01:59,500 --> 00:02:01,790
+揽尽天骄襄助一醉
+
+30
+00:02:01,790 --> 00:02:04,680
+虽万言竟道不尽无字碑
+
+31
+00:02:04,680 --> 00:02:06,600
+临渊乾乾 君子催
+
+32
+00:02:06,600 --> 00:02:09,130
+或跃 无咎相随
+
+33
+00:02:09,130 --> 00:02:12,389
+同为龙 却与往昔不连讳
+
+34
+00:02:12,389 --> 00:02:16,700
+且待飞龙归 簸却沧溟水 如沸
+
+35
+00:02:16,700 --> 00:02:19,540
+有龙掸风雷 见首不见尾
+
+36
+00:02:19,540 --> 00:02:27,079
+苏苏万物蜕 证元亨利贞变易轮回
+
+37
+00:02:27,079 --> 00:02:30,740
+龙华于旸 红旗漫卷 新水濯旧隍
+
+38
+00:02:30,740 --> 00:02:34,430
+龙泰于霜 烽烟消长 更赳赳昂昂
+
+39
+00:02:34,430 --> 00:02:38,260
+龙温于壮 留待潺潺 驰涌成泱泱
+
+40
+00:02:38,260 --> 00:02:41,660
+好教流光紫极 鹊渡银潢伴流觞
+
+41
+00:02:41,660 --> 00:02:45,490
+龙韧于刚 龙吟激荡 云止聆佳响
+
+42
+00:02:45,490 --> 00:02:49,150
+龙德于昌 喜见船马 纵横间丰仓
+
+43
+00:02:49,150 --> 00:02:52,930
+龙眷于邦 情习众广 仍化为一方
+
+44
+00:02:52,930 --> 00:02:57,240
+其妙错综复杂 不孤兵车付一匡！
+
+45
+00:03:40,980 --> 00:03:44,620
+此去向东 瀚海游龙 滔滔几万重
+
+46
+00:03:44,620 --> 00:03:48,250
+一跃破空 乘风逐虹 猎猎青云中
+
+47
+00:03:48,250 --> 00:03:52,080
+天音入梦 扶摇上穹 矫矫游星宫
+
+48
+00:03:52,080 --> 00:03:55,670
+犹念神州谷稻耕耘收藏守时无？
+
+49
+00:03:55,670 --> 00:03:59,240
+一息一动 似异似同 无之以为用
+
+50
+00:03:59,240 --> 00:04:03,130
+天地辰龙 龙生九种 但两爻合共
+
+51
+00:04:03,130 --> 00:04:06,830
+假逢童蒙 欲解懵懂 何处有真龙
+
+52
+00:04:06,830 --> 00:04:10,350
+只道「大哉乾元」秩秩幽幽必然中
+
+53
+00:04:10,350 --> 00:04:14,430
+也道「大哉乾元」切切实实一言中！
+

src/lib/components/import/fileList.svelte

@@ -2,7 +2,7 @@
     import { useAtom } from 'jotai-svelte';
     import { fileListState, finalFileListState } from '$lib/state/fileList.state';
     import toHumanSize from '$lib/humanSize';
-    import audioFormatText from '$lib/audioFormatText';
+    import formatText from '$lib/formatText';
     import extractFileName from '$lib/extractFileName';
     import getAudioMeta from '$lib/getAudioCoverURL';
     import convertCoverData from '$lib/convertCoverData';
@@ -14,6 +14,7 @@
     $: {
         const length = $items.length;
         for (let i = 0; i < length; i++) {
+            if ($items[i].type.indexOf('audio') === -1) continue;
             if ($items[i].pic || $items[i].pic === 'N/A') continue;
             getAudioMeta($items[i], (metadata: IAudioMetadata) => {
                 let cover: string | null = null;
@@ -45,11 +46,21 @@
 <ul
     class="mt-4 relative w-full min-h-48 max-h-[27rem] overflow-y-auto bg-zinc-200 dark:bg-zinc-800 rounded"
 >
-    {#each $finalItems as item}
+    {#each $items as item}
         <li class="relative m-4 p-4 bg-zinc-300 dark:bg-zinc-600 rounded-lg">
             <span>{extractFileName(item.name)}</span> <br />
-            <span>{toHumanSize(item.size)}</span> · <span>{audioFormatText(item.type)}</span> ·  <span>{item.duration ? formatDuration(item.duration) : 'N/A'}</span>
+            <span>{toHumanSize(item.size)}</span>
-            {#if item.pic !== 'N/A'}
+            {#if item.type}
+            · <span>{formatText(item.type)}</span>
+            {:else if item.name.split(".").length > 1}
+            · <span>{formatText(item.name.split(".")[item.name.split(".").length-1])}</span>
+            {:else}
+            · <span>未知格式</span>
+            {/if}
+            {#if item.duration}
+            · <span>{formatDuration(item.duration)}</span>
+            {/if}
+            {#if item.pic!==undefined && item.pic !== 'N/A'}
                 <img class="h-16 w-16 object-cover absolute rounded-lg right-2 top-2" src={item.pic} alt="" />
             {/if}
         </li>

src/lib/components/import/fileSelector.svelte

@@ -6,6 +6,7 @@
     import { fileListState } from '$lib/state/fileList.state';
     import AddIcon from './addIcon.svelte';
     const fileItems = useAtom(fileListState);
+    export let accept: string = "audio/*";
 
     onMount(() => {
         audioFiles.addEventListener('change', function (e: any) {
@@ -23,7 +24,7 @@
     });
 </script>
 
-<input style="display: none;" type="file" bind:this={audioFiles} multiple accept="audio/*" />
+<input style="display: none;" type="file" bind:this={audioFiles} multiple accept={accept} />
 <div class={$$props.class}>
     <button
         on:click={() => {

src/lib/components/lyrics.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    export let lyrics: string[] = [];
+    export let progress: number;
+</script>
+
+<div class="lyrics" style="overflow-y: auto">
+    {#each lyrics as lyric}
+        <p class="current-lyric">{lyric}</p>
+    {/each}
+</div>
+
+<style>
+    .lyrics {
+        position: absolute;
+        width: 45vw;
+        left: 50vw;
+        height: 100vh;
+        font-family: sans-serif;
+        text-align: left;
+        scroll-behavior: smooth;
+        scrollbar-width: none;
+    }
+    ::-webkit-scrollbar {
+        width: 0;
+    }
+    .current-lyric {
+        position: relative;
+        color: white;
+        font-weight: 600;
+        font-size: 3.5rem;
+        line-height: 4.5rem;
+        top: 1rem;
+        transition: 0.2s;
+        margin: 2rem 0.3rem;
+    }
+    .previous-lyric {
+        position: relative;
+        color: rgba(255, 255, 255, 0.7);
+        font-weight: 600;
+        font-size: 3rem;
+        line-height: 3.5rem;
+        filter: blur(1px);
+        top: 1rem;
+        transition: 0.2s;
+        margin: 2rem 0rem;
+    }
+    .after-lyric {
+        position: relative;
+        color: rgba(255, 255, 255, 0.7);
+        font-weight: 600;
+        font-size: 3rem;
+        line-height: 3.5rem;
+        filter: blur(1px);
+        top: 1rem;
+        transition: 0.2s;
+        margin: 2rem 0rem;
+    }
+</style>

src/lib/formatText.ts

@@ -3,7 +3,8 @@ export default function(key: string){
         "audio/mpeg": "MP3 音频",
         "audio/ogg": "OGG 容器",
         "audio/flac": "FLAC 无损音频",
-        "audio/aac": "AAC 音频"
+        "audio/aac": "AAC 音频",
+        "srt": "SRT 字幕"
     }
     if (!key) return "未知格式";
     else return dict[key as keyof typeof dict];

src/routes/import/[id]/lyric/+page.server.js

@@ -0,0 +1 @@
+export const ssr = false;

src/routes/import/[id]/lyric/+page.svelte

@@ -0,0 +1,41 @@
+<script>
+    import { page } from '$app/stores';
+    import FileList from '$lib/components/import/fileList.svelte';
+    import FileSelector from '$lib/components/import/fileSelector.svelte';
+    import localforage from '$lib/storage';
+    import { fileListState } from '$lib/state/fileList.state';
+    import { useAtom } from 'jotai-svelte';
+    const fileList = useAtom(fileListState);
+    const audioId = $page.params.id;
+    let status = "";
+</script>
+
+<h1>歌词导入</h1>
+<p>当前为 <span class="text-zinc-700 dark:text-zinc-400">{audioId}</span> 导入歌词</p>
+
+<div class="w-full flex my-3">
+    <h2>歌词文件</h2>
+    <FileSelector accept=".srt" class="ml-auto top-2 relative" />
+</div>
+
+<FileList />
+
+<p class="mt-4">
+    {status}
+</p>
+<button
+    class="mt-1 bg-blue-500 hover:bg-blue-600 duration-200 text-white font-bold py-2 px-5 rounded"
+    on:click={() => {
+        for (let file of $fileList) {
+            localforage.setItem(audioId + '-lyric', file, function (err) {
+                if (err) {
+                    status = "歌词导入失败";
+                } else {
+                    status = "已经导入。";
+                }
+            });
+        }
+    }}
+>
+    导入
+</button>

src/routes/play/[id]/+page.svelte

@@ -4,6 +4,7 @@
     import Background from '$lib/components/background.svelte';
     import Cover from '$lib/components/cover.svelte';
     import InteractiveBox from '$lib/components/interactiveBox.svelte';
+    import Lyrics from '$lib/components/lyrics.svelte';
     import extractFileName from '$lib/extractFileName';
     import localforage from 'localforage';
     import { writable } from 'svelte/store';
@@ -19,6 +20,7 @@
     let paused: boolean = true;
     let launched = false;
     let prepared: string[] = [];
+    let originalLyrics: string = '';
     const coverPath = writable('');
     let mainInterval: ReturnType<typeof setInterval>;
 
@@ -79,6 +81,14 @@
                 prepared.push('file');
             }
         });
+        localforage.getItem(`${audioId}-lyrics`, function (err, file) {
+            if (file) {
+                const f = file as File;
+                f.text().then((lr) => {
+                    originalLyrics = lr;
+                });
+            }
+        });
     }
 
     function playAudio() {
@@ -135,7 +145,7 @@
             volume = audioPlayer.volume;
         }
     }
-    
+
     readDB();
 </script>
 
@@ -161,3 +171,5 @@
         audioPlayer.pause();
     }}
 ></audio>
+
+<Lyrics lyrics={[]} progress={currentProgress} />