添加朗读器本地保存功能

2025-10-12 18:42:04 +08:00
parent 85085ba5ff
commit 4708828972
5 changed files with 190 additions and 65 deletions
--- a/public/changelog.txt
+++ b/public/changelog.txt
@@ -1,3 +1,4 @@
+2025.10.12 添加朗读器本地保存功能
 2025.10.09 新增记忆字母表功能
 2025.10.08 加快了TTS的生成速度，将IPA生成设置为可选项
 2025.10.07 新增文本朗读器，优化了视频播放器UI
--- a/src/app/text-speaker/SaveList.tsx
+++ b/src/app/text-speaker/SaveList.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import Button from "@/components/Button";
+import { getTextSpeakerData, setTextSpeakerData } from "@/utils";
+import { useState } from "react";
+import z from "zod";
+import { TextSpeakerItemSchema } from "@/interfaces";
+
+interface TextCardProps {
+    item: z.infer<typeof TextSpeakerItemSchema>;
+    handleUse: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+    handleDel: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+}
+function TextCard({
+    item,
+    handleUse,
+    handleDel
+}: TextCardProps) {
+    const onUseClick = () => {
+        handleUse(item);
+    }
+    const onDelClick = () => {
+        handleDel(item);
+    }
+    return (
+        <div className="p-2 border-b-1 border-gray-200 m-2 grid grid-cols-8">
+            <div className="col-span-6">
+                <div className="text-3xl">{item.text.length > 80 ? item.text.slice(0, 80) + '...' : item.text}</div>
+                <div className="text-xl text-gray-600">{item.ipa ? (item.ipa.length > 160 ? item.ipa.slice(0, 160) + '...' : item.ipa) : ''}</div>
+            </div>
+            <Button label="use" className="h-8 col-span-1" onClick={onUseClick}></Button>
+            <Button label="del" className="h-8 col-span-1" onClick={onDelClick}></Button>
+        </div>
+    );
+}
+
+interface SaveListProps {
+    show?: boolean;
+    handleUse: (item: z.infer<typeof TextSpeakerItemSchema>) => void;
+}
+export default function SaveList({
+    show = false,
+    handleUse
+}: SaveListProps) {
+    const [data, setData] = useState(getTextSpeakerData());
+    const handleDel = (item: z.infer<typeof TextSpeakerItemSchema>) => {
+        const current_data = getTextSpeakerData();
+        current_data.splice(
+            current_data.findIndex(v => v.text === item.text)
+        );
+        setTextSpeakerData(current_data);
+    }
+    const refresh = () => {
+        setData(getTextSpeakerData());
+    }
+    const handleDeleteAll = () => {
+        const yesorno = prompt('确定删光吗？(Y/N)')?.trim();
+        if (yesorno && (yesorno === 'Y' || yesorno === 'y')) {
+            setTextSpeakerData([]);
+            refresh();
+        }
+    }
+    if (show) return (
+        <div className="my-4 p-2 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl">
+            <Button label="刷新" className="m-1" onClick={refresh}></Button>
+            <Button label="删光" className="m-1" onClick={handleDeleteAll}></Button>
+            <ul>
+                {data.map(v =>
+                    <TextCard item={v} key={crypto.randomUUID()} handleUse={handleUse} handleDel={handleDel}></TextCard>
+                )}
+            </ul>
+        </div>
+    ); else return (<></>);
+}
--- a/src/app/text-speaker/page.tsx
+++ b/src/app/text-speaker/page.tsx
@@ -4,18 +4,22 @@ import Button from "@/components/Button";
 import IconClick from "@/components/IconClick";
 import IMAGES from "@/config/images";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { getTTSAudioUrl } from "@/utils";
+import { getTextSpeakerData, getTTSAudioUrl } from "@/utils";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
+import SaveList from "./SaveList";
+import { TextSpeakerItemSchema } from "@/interfaces";
 import z from "zod";

 export default function Home() {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
    const [showSpeedAdjust, setShowSpeedAdjust] = useState(false);
+    const [showSaveList, setShowSaveList] = useState(false);
+
    const [ipaEnabled, setIPAEnabled] = useState(false);
    const [speed, setSpeed] = useState(1);
    const [pause, setPause] = useState(true);
    const [autopause, setAutopause] = useState(true);
    const textRef = useRef('');
-    // const localeRef = useRef<string | null>(null);
    const [locale, setLocale] = useState<string | null>(null);
    const [ipa, setIPA] = useState<string>('');
    const objurlRef = useRef<string | null>(null);
@@ -87,15 +91,19 @@ export default function Home() {
                    playAudio(objurlRef.current);
                } else {
                    // 第一次播放
-                    console.log('downloading text info');
-                    const params = new URLSearchParams({
-                        text: textRef.current.slice(0, 30)
-                    });
                    try {
-                        const textinfo = await (await fetch(`/api/locale?${params}`)).json();
-                        setLocale(textinfo.locale);
+                        let theLocale = locale;
+                        if (!theLocale) {
+                            console.log('downloading text info');
+                            const params = new URLSearchParams({
+                                text: textRef.current.slice(0, 30)
+                            });
+                            const textinfo = await (await fetch(`/api/locale?${params}`)).json();
+                            setLocale(textinfo.locale);
+                            theLocale = textinfo.locale as string;
+                        }

-                        const voice = voicesData.find(v => v.locale.startsWith(textinfo.locale));
+                        const voice = voicesData.find(v => v.locale.startsWith(theLocale));
                        if (!voice) throw 'Voice not found.';

                        objurlRef.current = await getTTSAudioUrl(
@@ -150,66 +158,78 @@ export default function Home() {
        }
    }

-    const TextSpeakerItemSchema = z.object({
-        text: z.string(),
-        ipa: z.string().optional(),
-        locale: z.string()
-    });
-    const TextSpeakerArraySchema = z.array(TextSpeakerItemSchema);
+    const handleUseItem = (item: z.infer<typeof TextSpeakerItemSchema>) => {
+        if (textareaRef.current) textareaRef.current.value = item.text;
+        textRef.current = item.text;
+        setLocale(item.locale);
+        setIPA(item.ipa || '');
+        if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
+        objurlRef.current = null;
+        stopAudio();
+        setPause(true);
+    }

-    const save = () => {
-        if (!locale) return;
+    const save = async () => {
+        if (textRef.current.length === 0) return;

-        const getTextSpeakerData = () => {
-            try {
-                const item = localStorage.getItem('text-speaker');
+        try {
+            let theLocale = locale;
+            if (!theLocale) {
+                console.log('downloading text info');
+                const params = new URLSearchParams({
+                    text: textRef.current.slice(0, 30)
+                });
+                const textinfo = await (await fetch(`/api/locale?${params}`)).json();
+                setLocale(textinfo.locale);
+                theLocale = textinfo.locale as string;
+            }

-                if (!item) return [];
+            let theIPA = ipa;
+            if (ipa.length === 0 && ipaEnabled) {
+                const params = new URLSearchParams({
+                    text: textRef.current
+                });
+                const tmp = await (await fetch(`/api/ipa?${params}`)).json();
+                setIPA(tmp.ipa);
+                theIPA = tmp.ipa;
+            }

-                const rawData = JSON.parse(item);
-                const result = TextSpeakerArraySchema.safeParse(rawData);
-
-                if (result.success) {
-                    return result.data;
+            const save = getTextSpeakerData();
+            const oldIndex = save.findIndex(v => v.text === textRef.current);
+            if (oldIndex !== -1) {
+                const oldItem = save[oldIndex];
+                if ((!oldItem.ipa) || (oldItem.ipa !== theIPA)) {
+                    oldItem.ipa = theIPA;
+                    localStorage.setItem('text-speaker', JSON.stringify(save));
+                    return;
                } else {
-                    console.error('Invalid data structure in localStorage:', result.error);
-                    return [];
+                    return;
                }
-            } catch (e) {
-                console.error('Failed to parse text-speaker data:', e);
-                return [];
            }
-        }
-
-        const save = getTextSpeakerData();
-        const oldIndex = save.findIndex(v => v.text === textRef.current);
-        if (oldIndex !== -1) {
-            const oldItem = save[oldIndex];
-            if ((ipa && !oldItem.ipa) || (ipa && oldItem.ipa !== ipa)) {
-                oldItem.ipa = ipa;
-                localStorage.setItem('text-speaker', JSON.stringify(save));
-                return;
+            if (theIPA.length === 0) {
+                save.push({
+                    text: textRef.current,
+                    locale: theLocale
+                });
+            } else {
+                save.push({
+                    text: textRef.current,
+                    locale: theLocale,
+                    ipa: theIPA
+                });
            }
+            localStorage.setItem('text-speaker', JSON.stringify(save));
+        } catch (e) {
+            console.error(e);
+            setLocale(null);
        }
-        if (ipa.length === 0) {
-            save.push({
-                text: textRef.current,
-                locale: locale
-            });
-        } else {
-            save.push({
-                text: textRef.current,
-                locale: locale,
-                ipa: ipa
-            });
-        }
-        localStorage.setItem('text-speaker', JSON.stringify(save));
    }

    return (<>
        <div className="my-4 p-4 mx-4 md:mx-32 border-1 border-gray-200 rounded-2xl">
            <textarea className="text-2xl resize-none focus:outline-0 min-h-64 w-full"
-                onChange={handleInputChange}>
+                onChange={handleInputChange}
+                ref={textareaRef}>
            </textarea>
            <div className="overflow-auto text-gray-600 h-18">
                {ipa}
@@ -224,24 +244,20 @@ export default function Home() {
                    autopause ? IMAGES.autoplay : IMAGES.autopause
                } alt="autoplayorpause"
                ></IconClick>
-                <span>{localStorage.getItem('text-speaker')}</span>
                <IconClick size={45} onClick={() => setShowSpeedAdjust(!showSpeedAdjust)}
                    src={IMAGES.more_horiz}
                    alt="more"></IconClick>
-                {locale ? (<IconClick size={45} onClick={save}
+                <IconClick size={45} onClick={save}
                    src={IMAGES.save}
-                    alt="save"></IconClick>) : (<></>)}
+                    alt="save"></IconClick>
                <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
-
                    <Button label="生成IPA"
                        selected={ipaEnabled}
                        onClick={() => setIPAEnabled(!ipaEnabled)}>
                    </Button>
-                    <Button label="删除所有保存项"
-                        onClick={() => localStorage.setItem('text-speaker', '[]')}>
-                    </Button>
                    <Button label="查看保存项"
-                        onClick={}>
+                        onClick={() => { setShowSaveList(!showSaveList) }}
+                        selected={showSaveList}>
                    </Button>
                </div>
                <div className="w-full flex flex-row flex-wrap gap-2 justify-center items-center">
@@ -276,6 +292,7 @@ export default function Home() {
                    }
                </div>
            </div>
-        </div >
+        </div>
+        <SaveList show={showSaveList} handleUse={handleUseItem}></SaveList>
    </>);
 }
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -1,3 +1,4 @@
+import z from "zod";

 export interface Word {
  word: string;
@@ -10,4 +11,10 @@ export interface Word {
    roman_letter?: string;
 }
 export type SupportedAlphabets = 'japanese' | 'english' | 'esperanto' | 'uyghur';
+export const TextSpeakerItemSchema = z.object({
+    text: z.string(),
+    ipa: z.string().optional(),
+    locale: z.string()
+});
+export const TextSpeakerArraySchema = z.array(TextSpeakerItemSchema);

--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,5 +1,7 @@
 import { EdgeTTS, ProsodyOptions } from "edge-tts-universal/browser";
 import { env } from "process";
+import { TextSpeakerArraySchema } from "./interfaces";
+import z from "zod";

 export function inspect(word: string) {
    const goto = (url: string) => {
@@ -49,4 +51,28 @@ export async function getTTSAudioUrl(text: string, short_name: string, options:
    } catch (e) {
        throw e;
    }
-}
+}
+export const getTextSpeakerData = () => {
+    try {
+        const item = localStorage.getItem('text-speaker');
+
+        if (!item) return [];
+
+        const rawData = JSON.parse(item);
+        const result = TextSpeakerArraySchema.safeParse(rawData);
+
+        if (result.success) {
+            return result.data;
+        } else {
+            console.error('Invalid data structure in localStorage:', result.error);
+            return [];
+        }
+    } catch (e) {
+        console.error('Failed to parse text-speaker data:', e);
+        return [];
+    }
+};
+export const setTextSpeakerData = (data: z.infer<typeof TextSpeakerArraySchema>) => {
+    if (!localStorage) return;
+    localStorage.setItem('text-speaker', JSON.stringify(data));
+};