添加文本朗读器

public/changelog.txt

@@ -1,4 +1,5 @@
-2025.10.06 更新了主页面UI
+2025.10.07 新增文本朗读器
+2025.10.06 更新了主页面UI，移除IPA生成与文本朗读功能，新增全语言翻译器
 2025.10.05 新增IPA生成与文本朗读功能
 2025.09.25 优化了主界面UI
 2025.09.19 更新了单词板，单词不再会重叠。

public/images/1x_mobiledata_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-280v-320h-80v-80h160v400h-80Zm174 0 126-212-114-188h94l66 110 68-110h92L634-492l126 212h-94l-80-134-80 134h-92Z"/></svg>

public/images/autopause_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M360-360v-240h80v240h-80Zm160 0v-240h80v240h-80ZM480-40q-108 0-202.5-49.5T120-228v108H40v-240h240v80h-98q51 75 129.5 117.5T480-120q115 0 208.5-66T820-361l78 18q-45 136-160 219.5T480-40ZM42-520q7-67 32-128.5T143-762l57 57q-32 41-52 87.5T123-520H42Zm214-241-57-57q53-44 114-69.5T440-918v80q-51 5-97 25t-87 52Zm449 0q-41-32-87.5-52T520-838v-80q67 6 128.5 31T762-818l-57 57Zm133 241q-5-51-25-97.5T761-705l57-57q44 52 69 113.5T918-520h-80Z"/></svg>

public/images/autoplay_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M380-300v-360l280 180-280 180ZM480-40q-108 0-202.5-49.5T120-228v108H40v-240h240v80h-98q51 75 129.5 117.5T480-120q115 0 208.5-66T820-361l78 18q-45 136-160 219.5T480-40ZM42-520q7-67 32-128.5T143-762l57 57q-32 41-52 87.5T123-520H42Zm214-241-57-57q53-44 114-69.5T440-918v80q-51 5-97 25t-87 52Zm449 0q-41-32-87.5-52T520-838v-80q67 6 128.5 31T762-818l-57 57Zm133 241q-5-51-25-97.5T761-705l57-57q44 52 69 113.5T918-520h-80Z"/></svg>

public/images/pause_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M520-200v-560h240v560H520Zm-320 0v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320 0h80v-400h-80v400Zm0-400v400-400Zm320 0v400-400Z"/></svg>

public/images/speed_0_5x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M120-280v-80h80v80h-80Zm400 0 120-200-120-200h80l80 133 80-133h80L720-480l120 200h-80l-80-133-80 133h-80Zm-280 0v-80h160v-80H240v-240h240v80H320v80h80q33 0 56.5 23.5T480-440v80q0 33-23.5 56.5T400-280H240Z"/></svg>

public/images/speed_0_7x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="m520-280 120-200-120-200h80l80 133 80-133h80L720-480l120 200h-80l-80-133-80 133h-80Zm-360 0v-80h80v80h-80Zm160 0 80-320H240v-80h170q29 0 49.5 21.5T480-608l-2 18-78 310h-80Z"/></svg>

public/images/speed_1_2x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-280v-80h80v80h-80Zm120 0v-160q0-33 23.5-56.5T440-520h60v-80H360v-80h140q33 0 56.5 23.5T580-600v80q0 33-23.5 56.5T500-440h-60v80h140v80H360Zm-240 0v-320H40v-80h160v400h-80Zm500 0 120-200-120-200h80l80 133 80-133h80L820-480l120 200h-80l-80-133-80 133h-80Z"/></svg>

public/images/speed_1_5x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"><path d="M240-280v-80h80v80h-80Zm-120 0v-320H40v-80h160v400h-80Zm500 0 120-200-120-200h80l80 133 80-133h80L820-480l120 200h-80l-80-133-80 133h-80Zm-260 0v-80h140v-80H360v-240h220v80H440v80h60q33 0 56.5 23.5T580-440v80q0 33-23.5 56.5T500-280H360Z"/></svg>

src/app/page.tsx

@@ -47,6 +47,11 @@ function LinkGrid() {
         name="翻译器"
         description="翻译到任何语言，并标注国际音标（IPA）"
         color="#a56068"></LinkArea>
+      <LinkArea
+        href="/text-speaker"
+        name="朗读器"
+        description="识别并朗读文本，支持循环朗读、朗读速度调节"
+        color="#578aad"></LinkArea>
       <LinkArea
         href="/word-board"
         name="词墙"
@@ -61,7 +66,7 @@ function LinkGrid() {
         href="#"
         name="更多功能"
         description="开发中，敬请期待"
-        color="#578aad"></LinkArea>
+        color="#cab48a"></LinkArea>
     </div>
   )
 }

src/app/text-speaker/page.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import IconClick from "@/components/IconClick";
+import IMAGES from "@/config/images";
+import { useAudioPlayer } from "@/hooks/useAudioPlayer";
+import { getTTSAudioUrl } from "@/utils";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+
+export default function Home() {
+    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 [ipa, setIPA] = useState<string | null>(null);
+    const objurlRef = useRef<string | null>(null);
+    const [processing, setProcessing] = useState(false);
+
+    const [voicesData, setVoicesData] = useState<{
+        locale: string,
+        short_name: string
+    }[] | null>(null);
+    const [loading, setLoading] = useState(true);
+    const { playAudio, stopAudio, audioRef } = useAudioPlayer();
+    useEffect(() => {
+        fetch('/list_of_voices.json')
+            .then(res => res.json())
+            .then(setVoicesData)
+            .catch(() => setVoicesData(null))
+            .finally(() => setLoading(false));
+    }, []);
+    useEffect(() => {
+        const audio = audioRef.current;
+        if (!audio) return;
+
+        const handleEnded = () => {
+            if (autopause) {
+                setPause(true);
+            } else {
+                playAudio(objurlRef.current!);
+            }
+        }
+        audio.addEventListener('ended', handleEnded);
+        return () => {
+            audio.removeEventListener('ended', handleEnded);
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [audioRef, autopause]);
+
+
+    if (loading) return <div>加载中...</div>;
+    if (!voicesData) return <div>加载失败</div>;
+
+
+    const speak = async () => {
+        if (processing) return;
+        setProcessing(true);
+
+        if (pause) {
+            // 如果没在读
+            if (textRef.current.length === 0) {
+                // 没文本咋读
+            } else {
+                setPause(false);
+
+                if (objurlRef.current) {
+                    // 之前有播放
+                    playAudio(objurlRef.current);
+                } else {
+                    // 第一次播放
+                    console.log('downloading text info');
+                    const params = new URLSearchParams({
+                        text: textRef.current
+                    });
+                    try {
+                        const textinfo = await (await fetch(`/api/textinfo?${params}`)).json();
+                        localeRef.current = textinfo.locale;
+                        setIPA(textinfo.ipa);
+
+                        const voice = voicesData.find(v => v.locale.startsWith(localeRef.current!));
+                        if (!voice) throw 'Voice not found.';
+
+                        objurlRef.current = await getTTSAudioUrl(
+                            textRef.current,
+                            voice.short_name,
+                            (() => {
+                                if (speed === 1) return {};
+                                else if (speed < 1) return {
+                                    rate: `-${100 - speed * 100}%`
+                                }; else return {
+                                    rate: `+${speed * 100 - 100}%`
+                                };
+                            })()
+                        );
+                        playAudio(objurlRef.current);
+                    } catch (e) {
+                        console.error(e);
+
+                        setPause(true);
+                        localeRef.current = null;
+                        setIPA(null);
+
+                        setProcessing(false);
+                    }
+                }
+            }
+        } else {
+            // 如果在读就暂停
+            setPause(true);
+            stopAudio();
+        }
+
+        setProcessing(false);
+    }
+
+    const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        textRef.current = e.target.value.trim();
+        localeRef.current = null;
+        setIPA(null);
+        if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
+        objurlRef.current = null;
+        stopAudio();
+        setPause(true);
+    }
+
+    const letMeSetSpeed = (new_speed: number) => {
+        return () => {
+            setSpeed(new_speed);
+            if (objurlRef.current) URL.revokeObjectURL(objurlRef.current);
+            objurlRef.current = null;
+            stopAudio();
+            setPause(true);
+        }
+    }
+
+    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}>
+            </textarea>
+            <div className="overflow-auto text-gray-600 h-18">
+                {ipa}
+            </div>
+            <div className="w-full flex flex-row gap-2 justify-center items-center">
+                <IconClick size={45} onClick={() => {
+                    setAutopause(!autopause); if (objurlRef) { stopAudio(); } setPause(true);
+                }} src={
+                    autopause ? IMAGES.autoplay : IMAGES.autopause
+                } alt="autoplayorpause"
+                ></IconClick>
+                <IconClick size={45} onClick={speak} src={
+                    pause ? IMAGES.play_arrow : IMAGES.pause
+                } alt="playorpause" className={`${processing ? 'bg-gray-200' : ''}`}></IconClick>
+                <IconClick size={45} onClick={letMeSetSpeed(0.5)}
+                    src={IMAGES.speed_0_5x}
+                    alt="0.5x"
+                    className={speed === 0.5 ? 'bg-gray-200' : ''}
+                ></IconClick>
+                <IconClick size={45} onClick={letMeSetSpeed(0.7)}
+                    src={IMAGES.speed_0_7x}
+                    alt="0.7x"
+                    className={speed === 0.7 ? 'bg-gray-200' : ''}
+                ></IconClick>
+                <IconClick size={45} onClick={letMeSetSpeed(1)}
+                    src={IMAGES.speed_1x}
+                    alt="1x"
+                    className={speed === 1 ? 'bg-gray-200' : ''}
+                ></IconClick>
+                <IconClick size={45} onClick={letMeSetSpeed(1.2)}
+                    src={IMAGES.speed_1_2_x}
+                    alt="1.2x"
+                    className={speed === 1.2 ? 'bg-gray-200' : ''}
+                ></IconClick>
+                <IconClick size={45} onClick={letMeSetSpeed(1.5)}
+                    src={IMAGES.speed_1_5x}
+                    alt="1.5x"
+                    className={speed === 1.5 ? 'bg-gray-200' : ''}
+                ></IconClick>
+            </div>
+        </div >
+    </>);
+}

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">

src/components/IconClick.tsx

@@ -2,20 +2,22 @@ import Image from "next/image";
 
 
 interface IconClickProps {
-  src: string;
-  alt: string;
-  onClick?: () => void;
+    src: string;
+    alt: string;
+    onClick?: () => void;
+    className?: string;
+    size?: number
 }
 export default function IconClick(
-  { src, alt, onClick = () => { } }: IconClickProps) {
-  return (<>
-    <div onClick={onClick} className="hover:cursor-pointer hover:bg-gray-200 rounded-3xl p-1">
-      <Image
-        src={src}
-        width={32}
-        height={32}
-        alt={alt}
-      ></Image>
-    </div>
-  </>);
+    { src, alt, onClick = () => { }, className = '', size = 32 }: IconClickProps) {
+    return (<>
+        <div onClick={onClick} className={`hover:cursor-pointer hover:bg-gray-200 rounded-3xl w-[${size}px] h-[${size}px] flex justify-center items-center ${className}`}>
+            <Image
+                src={src}
+                width={size - 5}
+                height={size - 5}
+                alt={alt}
+            ></Image>
+        </div>
+    </>);
 }

src/config/images.ts

@@ -0,0 +1,14 @@
+const IMAGES = {
+    speed_1_5x: '/images/speed_1_5x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    speed_1_2_x: '/images/speed_1_2x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    speed_0_7x: '/images/speed_0_7x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    pause: '/images/pause_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    speed_0_5x: '/images/speed_0_5x_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    copy_all: '/images/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    autoplay: '/images/autoplay_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    autopause: '/images/autopause_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    speed_1x: '/images/1x_mobiledata_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg',
+    play_arrow: '/images/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'
+}
+
+export default IMAGES;

src/hooks/useAudioPlayer.ts

@@ -5,36 +5,30 @@ export function useAudioPlayer() {
     const audioRef = useRef<HTMLAudioElement | null>(null);
     useEffect(() => {
         audioRef.current = new Audio();
-
         return () => {
-            if (audioRef.current) {
-                audioRef.current.pause();
-                audioRef.current = null;
-            }
+            audioRef.current!.pause();
+            audioRef.current = null;
         };
     }, []);
-    const playAudio = (audioUrl: string) => {
-        if (audioRef.current) {
-            audioRef.current.src = audioUrl;
-            audioRef.current.play().catch(error => {
-                console.error('播放失败:', error);
-            });
+    const playAudio = async (audioUrl: string) => {
+        audioRef.current!.src = audioUrl;
+        try {
+            await audioRef.current!.play();
+        } catch (e) {
+            return e;
         }
     };
     const pauseAudio = () => {
-        if (audioRef.current) {
-            audioRef.current.pause();
-        }
+        audioRef.current!.pause();
     };
     const stopAudio = () => {
-        if (audioRef.current) {
-            audioRef.current.pause();
-            audioRef.current.currentTime = 0;
-        }
+        audioRef.current!.pause();
+        audioRef.current!.currentTime = 0;
     };
     return {
         playAudio,
         pauseAudio,
-        stopAudio
+        stopAudio,
+        audioRef
     };
 }

src/utils.ts

@@ -1,3 +1,4 @@
+import { EdgeTTS, ProsodyOptions } from "edge-tts-universal/browser";
 import { env } from "process";
 
 export function inspect(word: string) {
@@ -40,3 +41,12 @@ export async function callZhipuAPI(messages: { role: string; content: string; }[
     return await response.json();
 }
 
+export async function getTTSAudioUrl(text: string, short_name: string, options: ProsodyOptions | undefined = undefined) {
+    const tts = new EdgeTTS(text, short_name, options);
+    try {
+        const result = await tts.synthesize();
+        return URL.createObjectURL(result.audio);
+    } catch (e) {
+        throw e;
+    }
+}