添加朗读器本地保存功能

public/changelog.txt

@@ -1,3 +1,4 @@
+2025.10.12 添加朗读器本地保存功能
 2025.10.09 新增记忆字母表功能
 2025.10.08 加快了TTS的生成速度，将IPA生成设置为可选项
 2025.10.07 新增文本朗读器，优化了视频播放器UI

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 (<></>);
+}

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 {
                     // 第一次播放
+                    try {
+                        let theLocale = locale;
+                        if (!theLocale) {
                             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);
+                            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({
+    const handleUseItem = (item: z.infer<typeof TextSpeakerItemSchema>) => {
-        text: z.string(),
+        if (textareaRef.current) textareaRef.current.value = item.text;
-        ipa: z.string().optional(),
+        textRef.current = item.text;
-        locale: z.string()
+        setLocale(item.locale);
-    });
+        setIPA(item.ipa || '');
-    const TextSpeakerArraySchema = z.array(TextSpeakerItemSchema);
+        if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
+        objurlRef.current = null;
+        stopAudio();
+        setPause(true);
+    }
 
-    const save = () => {
+    const save = async () => {
-        if (!locale) return;
+        if (textRef.current.length === 0) return;
 
-        const getTextSpeakerData = () => {
         try {
-                const item = localStorage.getItem('text-speaker');
+            let theLocale = locale;
-
+            if (!theLocale) {
-                if (!item) return [];
+                console.log('downloading text info');
-
+                const params = new URLSearchParams({
-                const rawData = JSON.parse(item);
+                    text: textRef.current.slice(0, 30)
-                const result = TextSpeakerArraySchema.safeParse(rawData);
+                });
-
+                const textinfo = await (await fetch(`/api/locale?${params}`)).json();
-                if (result.success) {
+                setLocale(textinfo.locale);
-                    return result.data;
+                theLocale = textinfo.locale as string;
-                } else {
-                    console.error('Invalid data structure in localStorage:', result.error);
-                    return [];
-                }
-            } catch (e) {
-                console.error('Failed to parse text-speaker data:', e);
-                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 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)) {
+                if ((!oldItem.ipa) || (oldItem.ipa !== theIPA)) {
-                oldItem.ipa = ipa;
+                    oldItem.ipa = theIPA;
                     localStorage.setItem('text-speaker', JSON.stringify(save));
                     return;
+                } else {
+                    return;
                 }
             }
-        if (ipa.length === 0) {
+            if (theIPA.length === 0) {
                 save.push({
                     text: textRef.current,
-                locale: locale
+                    locale: theLocale
                 });
             } else {
                 save.push({
                     text: textRef.current,
-                locale: locale,
+                    locale: theLocale,
-                ipa: ipa
+                    ipa: theIPA
                 });
             }
             localStorage.setItem('text-speaker', JSON.stringify(save));
+        } catch (e) {
+            console.error(e);
+            setLocale(null);
+        }
     }
 
     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>
     </>);
 }

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);
 

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) => {
@@ -50,3 +52,27 @@ export async function getTTSAudioUrl(text: string, short_name: string, options:
         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));
+};