添加文本朗读器
@@ -1,4 +1,5 @@
|
|||||||
2025.10.06 更新了主页面UI
|
2025.10.07 新增文本朗读器
|
||||||
|
2025.10.06 更新了主页面UI,移除IPA生成与文本朗读功能,新增全语言翻译器
|
||||||
2025.10.05 新增IPA生成与文本朗读功能
|
2025.10.05 新增IPA生成与文本朗读功能
|
||||||
2025.09.25 优化了主界面UI
|
2025.09.25 优化了主界面UI
|
||||||
2025.09.19 更新了单词板,单词不再会重叠。
|
2025.09.19 更新了单词板,单词不再会重叠。
|
||||||
|
|||||||
@@ -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>
|
||||||
|
After Width: | Height: | Size: 241 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 559 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 541 B |
|
Before Width: | Height: | Size: 497 B After Width: | Height: | Size: 497 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 254 B |
|
Before Width: | Height: | Size: 190 B After Width: | Height: | Size: 190 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 329 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 297 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 383 B |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 361 B |
@@ -47,6 +47,11 @@ function LinkGrid() {
|
|||||||
name="翻译器"
|
name="翻译器"
|
||||||
description="翻译到任何语言,并标注国际音标(IPA)"
|
description="翻译到任何语言,并标注国际音标(IPA)"
|
||||||
color="#a56068"></LinkArea>
|
color="#a56068"></LinkArea>
|
||||||
|
<LinkArea
|
||||||
|
href="/text-speaker"
|
||||||
|
name="朗读器"
|
||||||
|
description="识别并朗读文本,支持循环朗读、朗读速度调节"
|
||||||
|
color="#578aad"></LinkArea>
|
||||||
<LinkArea
|
<LinkArea
|
||||||
href="/word-board"
|
href="/word-board"
|
||||||
name="词墙"
|
name="词墙"
|
||||||
@@ -61,7 +66,7 @@ function LinkGrid() {
|
|||||||
href="#"
|
href="#"
|
||||||
name="更多功能"
|
name="更多功能"
|
||||||
description="开发中,敬请期待"
|
description="开发中,敬请期待"
|
||||||
color="#578aad"></LinkArea>
|
color="#cab48a"></LinkArea>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
182
src/app/text-speaker/page.tsx
Normal file
@@ -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 >
|
||||||
|
</>);
|
||||||
|
}
|
||||||
@@ -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>
|
|
||||||
</>)
|
|
||||||
};
|
|
||||||
@@ -4,7 +4,8 @@ import { ChangeEvent, useEffect, useState } from "react";
|
|||||||
import Button from "@/components/Button";
|
import Button from "@/components/Button";
|
||||||
import IconClick from "@/components/IconClick";
|
import IconClick from "@/components/IconClick";
|
||||||
import { useAudioPlayer } from "@/hooks/useAudioPlayer";
|
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() {
|
export default function Home() {
|
||||||
const [voicesData, setVoicesData] = useState<{
|
const [voicesData, setVoicesData] = useState<{
|
||||||
@@ -82,7 +83,7 @@ export default function Home() {
|
|||||||
const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||||
setTextInfo({
|
setTextInfo({
|
||||||
source: {
|
source: {
|
||||||
text: e.target.value,
|
text: e.target.value.trim(),
|
||||||
language: null,
|
language: null,
|
||||||
ipa: null,
|
ipa: null,
|
||||||
locale: null
|
locale: null
|
||||||
@@ -114,20 +115,21 @@ export default function Home() {
|
|||||||
if (!voice) {
|
if (!voice) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const tts = new EdgeTTS(textInfo.source.text, voice.short_name);
|
|
||||||
const result = await tts.synthesize();
|
const url = await getTTSAudioUrl(textInfo.source.text, voice.short_name);
|
||||||
playAudio(URL.createObjectURL(result.audio));
|
await playAudio(url);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
const readTarget = async () => {
|
const readTarget = async () => {
|
||||||
if (!textInfo.target.text || textInfo.target.text.length === 0) return;
|
if (!textInfo.target.text || textInfo.target.text.length === 0) return;
|
||||||
|
|
||||||
const voice = voicesData.find(v => v.locale.startsWith(textInfo.target.locale!));
|
const voice = voicesData.find(v => v.locale.startsWith(textInfo.target.locale!));
|
||||||
if (!voice) {
|
if (!voice) return;
|
||||||
return;
|
|
||||||
}
|
const url = await getTTSAudioUrl(textInfo.target.text, voice.short_name);
|
||||||
const tts = new EdgeTTS(textInfo.target.text, voice.short_name);
|
await playAudio(url);
|
||||||
const result = await tts.synthesize();
|
URL.revokeObjectURL(url);
|
||||||
playAudio(URL.createObjectURL(result.audio));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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="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="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">
|
<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>
|
<textarea onChange={handleInputChange} className="resize-none h-8/12 w-full focus:outline-0"></textarea>
|
||||||
<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.source.ipa || ''}
|
{textInfo.source.ipa || ''}
|
||||||
</div>
|
</div>
|
||||||
<div className="h-2/12 w-full flex justify-end items-center">
|
<div className="h-2/12 w-full flex justify-end items-center">
|
||||||
<IconClick onClick={async () => {
|
<IconClick onClick={async () => {
|
||||||
if (textInfo.source.text && textInfo.source.text.length !== 0)
|
if (textInfo.source.text && textInfo.source.text.length !== 0)
|
||||||
await navigator.clipboard.writeText(textInfo.source.text);
|
await navigator.clipboard.writeText(textInfo.source.text);
|
||||||
}} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
|
}} src={IMAGES.copy_all} alt="copy"></IconClick>
|
||||||
<IconClick onClick={readSource} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
|
<IconClick onClick={readSource} src={IMAGES.play_arrow} alt="play"></IconClick>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="option1 w-full">
|
<div className="option1 w-full">
|
||||||
@@ -153,18 +155,18 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="card2 w-full md:w-1/2 flex flex-col-reverse gap-2">
|
<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="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 || ''
|
textInfo.target.text || ''
|
||||||
}</div>
|
}</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 || ''}
|
{textInfo.target.ipa || ''}
|
||||||
</div>
|
</div>
|
||||||
<div className="h-2/12 w-full flex justify-end items-center">
|
<div className="h-2/12 w-full flex justify-end items-center">
|
||||||
<IconClick onClick={async () => {
|
<IconClick onClick={async () => {
|
||||||
if (textInfo.target.text && textInfo.target.text.length !== 0)
|
if (textInfo.target.text && textInfo.target.text.length !== 0)
|
||||||
await navigator.clipboard.writeText(textInfo.target.text);
|
await navigator.clipboard.writeText(textInfo.target.text);
|
||||||
}} src={'/copy_all_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="copy"></IconClick>
|
}} src={IMAGES.copy_all} alt="copy"></IconClick>
|
||||||
<IconClick onClick={readTarget} src={'/play_arrow_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg'} alt="play"></IconClick>
|
<IconClick onClick={readTarget} src={IMAGES.play_arrow} alt="play"></IconClick>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="option2 w-full flex gap-1 items-center flex-wrap">
|
<div className="option2 w-full flex gap-1 items-center flex-wrap">
|
||||||
|
|||||||
@@ -5,15 +5,17 @@ interface IconClickProps {
|
|||||||
src: string;
|
src: string;
|
||||||
alt: string;
|
alt: string;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
|
className?: string;
|
||||||
|
size?: number
|
||||||
}
|
}
|
||||||
export default function IconClick(
|
export default function IconClick(
|
||||||
{ src, alt, onClick = () => { } }: IconClickProps) {
|
{ src, alt, onClick = () => { }, className = '', size = 32 }: IconClickProps) {
|
||||||
return (<>
|
return (<>
|
||||||
<div onClick={onClick} className="hover:cursor-pointer hover:bg-gray-200 rounded-3xl p-1">
|
<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
|
<Image
|
||||||
src={src}
|
src={src}
|
||||||
width={32}
|
width={size - 5}
|
||||||
height={32}
|
height={size - 5}
|
||||||
alt={alt}
|
alt={alt}
|
||||||
></Image>
|
></Image>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
14
src/config/images.ts
Normal file
@@ -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;
|
||||||
@@ -5,36 +5,30 @@ export function useAudioPlayer() {
|
|||||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
audioRef.current = new Audio();
|
audioRef.current = new Audio();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (audioRef.current) {
|
audioRef.current!.pause();
|
||||||
audioRef.current.pause();
|
|
||||||
audioRef.current = null;
|
audioRef.current = null;
|
||||||
}
|
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
const playAudio = (audioUrl: string) => {
|
const playAudio = async (audioUrl: string) => {
|
||||||
if (audioRef.current) {
|
audioRef.current!.src = audioUrl;
|
||||||
audioRef.current.src = audioUrl;
|
try {
|
||||||
audioRef.current.play().catch(error => {
|
await audioRef.current!.play();
|
||||||
console.error('播放失败:', error);
|
} catch (e) {
|
||||||
});
|
return e;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const pauseAudio = () => {
|
const pauseAudio = () => {
|
||||||
if (audioRef.current) {
|
audioRef.current!.pause();
|
||||||
audioRef.current.pause();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
const stopAudio = () => {
|
const stopAudio = () => {
|
||||||
if (audioRef.current) {
|
audioRef.current!.pause();
|
||||||
audioRef.current.pause();
|
audioRef.current!.currentTime = 0;
|
||||||
audioRef.current.currentTime = 0;
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
return {
|
return {
|
||||||
playAudio,
|
playAudio,
|
||||||
pauseAudio,
|
pauseAudio,
|
||||||
stopAudio
|
stopAudio,
|
||||||
|
audioRef
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
10
src/utils.ts
@@ -1,3 +1,4 @@
|
|||||||
|
import { EdgeTTS, ProsodyOptions } from "edge-tts-universal/browser";
|
||||||
import { env } from "process";
|
import { env } from "process";
|
||||||
|
|
||||||
export function inspect(word: string) {
|
export function inspect(word: string) {
|
||||||
@@ -40,3 +41,12 @@ export async function callZhipuAPI(messages: { role: string; content: string; }[
|
|||||||
return await response.json();
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||