diff --git a/apps/create-audio/index.html b/apps/create-audio/index.html new file mode 100644 index 0000000..f71967e --- /dev/null +++ b/apps/create-audio/index.html @@ -0,0 +1,32 @@ + + + + + + + + Echo Text + + + + +
+ + + + \ No newline at end of file diff --git a/apps/create-audio/package.json b/apps/create-audio/package.json new file mode 100644 index 0000000..4b20465 --- /dev/null +++ b/apps/create-audio/package.json @@ -0,0 +1,16 @@ +{ + "name": "create-audio", + "version": "0.0.1", + "description": "", + "main": "index.js", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "pub": "ev deploy ./dist -k create-audio -v 0.0.1 -u " + }, + "keywords": [], + "author": "abearxiong (https://www.xiongxiao.me)", + "license": "MIT", + "packageManager": "pnpm@10.11.1", + "type": "module" +} \ No newline at end of file diff --git a/apps/create-audio/src/App.tsx b/apps/create-audio/src/App.tsx new file mode 100644 index 0000000..2db4033 --- /dev/null +++ b/apps/create-audio/src/App.tsx @@ -0,0 +1,350 @@ +import { ToastContainer, toast } from 'react-toastify'; +import { useState, useRef, useEffect } from 'react'; +import { query } from '@/modules/query'; +import { nanoid } from 'nanoid'; +export const postCreateVideos = async ({ text }) => { + return await query.post({ + path: 'aliyun-ai', + key: 'createVideos', + payload: { + text, + model: '', + }, + }); +}; + +export const App = () => { + return ( + <> + + + + ); +}; +const initGetText = () => { + let text = sessionStorage.getItem('createVideosText'); + if (text) { + sessionStorage.removeItem('createVideosText'); + return text; + } + text = localStorage.getItem('createVideosText'); + if (text) { + localStorage.removeItem('createVideosText'); + return text; + } + const url = new URL(window.location.href); + text = url.searchParams.get('text'); + if (text) { + text = decodeURIComponent(text); + return text; + } + return null; +}; +const downloadAudio = (url: string, filename?: string) => { + const link = document.createElement('a'); + link.href = url; + const generatedFilename = filename || nanoid(10) + '.wav'; // Generate a random filename + link.download = generatedFilename; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +}; +export const CreateVideos = () => { + const [url, setUrl] = useState(''); + const [loading, setLoading] = useState(false); + const [text, setText] = useState(''); + const [isPlaying, setIsPlaying] = useState(false); + const audioRef = useRef(null); + useEffect(() => { + const initialText = initGetText(); + if (initialText) { + setText(initialText); + } + }, []); + const handleGenerateAudio = async () => { + if (!text.trim()) { + toast.error('请输入要转换的文字内容'); + return; + } + + setLoading(true); + try { + const response = await postCreateVideos({ + text: text.trim(), + }); + + if (response?.data?.audioUrl) { + setUrl(response.data.audioUrl); + toast.success('音频生成成功！'); + } else { + toast.error('音频生成失败，请稍后重试'); + } + } catch (error) { + console.error('生成音频时出错:', error); + toast.error('生成音频时出错，请稍后重试'); + } finally { + setLoading(false); + } + }; + + const handlePlay = () => { + if (audioRef.current) { + if (isPlaying) { + audioRef.current.pause(); + setIsPlaying(false); + } else { + audioRef.current.play(); + setIsPlaying(true); + } + } + }; + + const handleStop = () => { + if (audioRef.current) { + audioRef.current.pause(); + audioRef.current.currentTime = 0; + setIsPlaying(false); + } + }; + + const handleAudioEnded = () => { + setIsPlaying(false); + }; + + return ( +
+
+

+ AI 文字转音频 +

+

+ 输入文字内容，即可生成高质量的AI语音 +

+
+ +
+
+ +