添加文本朗读器

src/app/translator/IPAForm.tsx

@@ -1,91 +0,0 @@
-import Button from "@/components/Button";
-import { EdgeTTS } from "edge-tts-universal";
-import { useRef, useState } from "react";
-import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-
-export default function IPAForm(
-    { voicesData }: {
-        voicesData: {
-            locale: string,
-            short_name: string
-        }[]
-    }
-) {
-    const respref = useRef<HTMLParagraphElement>(null);
-    const inputref = useRef<HTMLTextAreaElement>(null);
-    const [reqEnabled, setReqEnabled] = useState<boolean>(true);
-    const [textInfo, setTextInfo] = useState<{
-        lang: string,
-        ipa: string,
-        locale: string,
-        text: string
-    } | null>(null);
-    const { playAudio, pauseAudio, stopAudio } = useAudioPlayer();
-    const readIPA = async () => {
-        if (!textInfo) {
-            respref.current!.innerText = '请先生成IPA。';
-            return;
-        }
-        const voice = voicesData.find(v => v.locale.startsWith(textInfo.locale));
-        if (!voice) {
-            respref.current!.innerText = '暂不支持朗读' + textInfo.lang;
-            return;
-        }
-        const tts = new EdgeTTS(textInfo.text, voice.short_name);
-        const result = await tts.synthesize();
-        playAudio(URL.createObjectURL(result.audio));
-    }
-    const generateIPA = () => {
-        if (!reqEnabled) return;
-        setReqEnabled(false);
-
-        respref.current!.innerText = '生成国际音标中，请稍等～';
-        let timer: NodeJS.Timeout;
-        (() => {
-            let count = 0;
-            timer = setInterval(() => {
-                respref.current!.innerText = '正在生成国际音标（IPA），请稍等～';
-                respref.current!.innerText += `\n(waiting for ${++count}s)`
-            }, 1000);
-        })();
-
-        const text = inputref.current!.value.trim();
-        if (text.length === 0) return;
-
-        const params = new URLSearchParams({ text: text });
-        fetch(`/api/ipa?${params}`)
-            .then(response => {
-                if (!response.ok) {
-                    return response.json().then(resj => {
-                        throw new Error(`HTTP ${response.status}: ${resj.error} ${resj.message}`);
-                    })
-                }
-                return response.json();
-            })
-            .then(data => {
-                setTextInfo({ ...data, text: text });
-                respref.current!.innerText = `LANG: ${data.lang}\nIPA: ${data.ipa}`;
-            })
-            .catch(error => {
-                respref.current!.innerText = `错误: ${error.message}`;
-            })
-            .finally(() => {
-                setReqEnabled(true);
-                clearInterval(timer);
-            });
-    }
-
-    return (<>
-        <div className="flex flex-row">
-            <textarea ref={inputref}
-                placeholder="输入任意语言的文本"
-                className="w-64 h-32 border-gray-300 border rounded focus:outline-blue-400 focus:outline-2">
-            </textarea>
-        </div>
-        <div className="m-2 flex-row flex gap-2">
-            <Button onClick={generateIPA} label="生成IPA"></Button>
-            <Button onClick={readIPA} label="朗读IPA"></Button>
-        </div>
-        <div ref={respref} className="whitespace-pre-line w-64"></div>
-    </>)
-};

src/app/translator/page.tsx

@@ -4,7 +4,8 @@ import { ChangeEvent, useEffect, useState } from "react";
 import Button from "@/components/Button";
 import IconClick from "@/components/IconClick";
 import { useAudioPlayer } from "@/hooks/useAudioPlayer";
-import { EdgeTTS } from "edge-tts-universal/browser";
+import IMAGES from "@/config/images";
+import { getTTSAudioUrl } from "@/utils";
 
 export default function Home() {
   const [voicesData, setVoicesData] = useState<{
@@ -82,7 +83,7 @@ export default function Home() {
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setTextInfo({
       source: {
-        text: e.target.value,
+        text: e.target.value.trim(),
         language: null,
         ipa: null,
         locale: null
@@ -114,20 +115,21 @@ export default function Home() {
     if (!voice) {
       return;
     }
-    const tts = new EdgeTTS(textInfo.source.text, voice.short_name);
-    const result = await tts.synthesize();
-    playAudio(URL.createObjectURL(result.audio));
+
+    const url = await getTTSAudioUrl(textInfo.source.text, voice.short_name);
+    await playAudio(url);
+    URL.revokeObjectURL(url);
   }
+
   const readTarget = async () => {
     if (!textInfo.target.text || textInfo.target.text.length === 0) return;
 
     const voice = voicesData.find(v => v.locale.startsWith(textInfo.target.locale!));
-    if (!voice) {
-      return;
-    }
-    const tts = new EdgeTTS(textInfo.target.text, voice.short_name);
-    const result = await tts.synthesize();
-    playAudio(URL.createObjectURL(result.audio));
+    if (!voice) return;
+
+    const url = await getTTSAudioUrl(textInfo.target.text, voice.short_name);
+    await playAudio(url);
+    URL.revokeObjectURL(url);
   }
 
   return (
@@ -135,16 +137,16 @@ export default function Home() {
       <div className="w-screen flex flex-col md:flex-row md:justify-between gap-2 p-2">
         <div className="card1 w-full md:w-1/2 flex flex-col-reverse gap-2">
           <div className="textarea1 border-1 border-gray-200 rounded-2xl w-full h-64 p-2">
-            <textarea onChange={handleInputChange} className="resize-none h-9/12 w-full focus:outline-0"></textarea>
-            <div className="ipa w-full h-1/12 scroll-auto text-gray-600">
+            <textarea onChange={handleInputChange} className="resize-none h-8/12 w-full focus:outline-0"></textarea>
+            <div className="ipa w-full h-2/12 overflow-auto text-gray-600">
               {textInfo.source.ipa || ''}
             </div>
             <div className="h-2/12 w-full flex justify-end items-center">
               <IconClick onClick={async () => {
                 if (textInfo.source.text && textInfo.source.text.length !== 0)
                   await navigator.clipboard.writeText(textInfo.source.text);
-              }} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
-              <IconClick onClick={readSource} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
+              }} src={IMAGES.copy_all} alt="copy"></IconClick>
+              <IconClick onClick={readSource} src={IMAGES.play_arrow} alt="play"></IconClick>
             </div>
           </div>
           <div className="option1 w-full">
@@ -153,18 +155,18 @@ export default function Home() {
         </div>
         <div className="card2 w-full md:w-1/2 flex flex-col-reverse gap-2">
           <div className="textarea2 bg-gray-100 rounded-2xl w-full h-64 p-2">
-            <div className="h-9/12 w-full">{
+            <div className="h-8/12 w-full">{
               textInfo.target.text || ''
             }</div>
-            <div className="ipa w-full h-1/12 scroll-auto text-gray-600">
+            <div className="ipa w-full h-2/12 overflow-auto text-gray-600">
               {textInfo.target.ipa || ''}
             </div>
             <div className="h-2/12 w-full flex justify-end items-center">
               <IconClick onClick={async () => {
                 if (textInfo.target.text && textInfo.target.text.length !== 0)
                   await navigator.clipboard.writeText(textInfo.target.text);
-              }} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
-              <IconClick onClick={readTarget} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
+              }} src={IMAGES.copy_all} alt="copy"></IconClick>
+              <IconClick onClick={readTarget} src={IMAGES.play_arrow} alt="play"></IconClick>
             </div>
           </div>
           <div className="option2 w-full flex gap-1 items-center flex-wrap">