Femoon/tts-azure-web

功能简介

TTS Azure Web 是一个轻量级的 Web 应用程序，让您能够使用 Microsoft Azure 的文本转语音服务将文本转换为语音音频。它基于最新版本的 Next.js (v15) 和 React (v19) 构建，可以通过本地、Docker 容器或点击一次在 Vercel 上运行。

核心能力

功能	您可以做什么
语音定制	选择 Azure 提供的语音、语言、风格和角色。
音频控制	在合成前调整语速、语调和音量。
SSML 支持	切换到原始 SSML 编辑器以精细调整发音、停顿、重音等。
导出	将生成的音频下载为文件。
双模式 UI	普通模式（点选控制）或 SSML 模式（直接标记）。
配置导入/导出	保存并加载 SSML 配置以便重复使用。

底层原理

• 前端 – 使用 TypeScript 的 React 19，由 HeroUI (NextUI v2) + Tailwind CSS v4 进行样式设计，并使用 Framer Motion 进行动画处理。
• 路由与 i18n – Next.js 15 App Router 提供语言感知路由 (/en, /cn)。
• 状态管理 – 全局 UI 状态（选定的语音、SSML 文本、模式等）由 Zustand 管理，并持久化到 localStorage，以便在页面刷新后保留偏好设置。
• 后端 – Next.js API 路由调用 Azure Speech SDK。一个路由用于获取可用语音列表，另一个用于获取身份验证令牌，第三个用于将文本/SSML 发送到 Azure 并流式传输回音频文件。
• 部署 – 仓库包含 Dockerfile 和 Vercel “Deploy” 按钮。运行时仅需两个环境变量：SPEECH_KEY 和 SPEECH_REGION（您的 Azure 订阅密钥和区域）。

入门指南（快速步骤）

1. 创建 Azure Speech 资源并复制密钥 + 区域。
2. 本地运行:

   npm i -g yarn   # 如果您没有安装 yarn
   yarn            # 安装依赖
   echo "SPEECH_KEY=...\nSPEECH_REGION=..." >.env.local
   yarn dev        # http://localhost:3000
   

3. 或者部署:
   • 点击 README 中的 Vercel 按钮，提供两个环境变量，Vercel 会自动构建应用。
   • 或者构建 Docker 镜像：docker build -t tts-azure-web. && docker run -p 3000:3000 -e SPEECH_KEY=… -e SPEECH_REGION=… tts-azure-web。

适用人群

• 需要快速 UI 来测试 Azure TTS 语音或原型设计 SSML 代码片段的开发者。
• 正在寻找无需编写代码即可轻松生成短音频剪辑的内容创作者。
• 在课堂或研讨会上演示语音合成概念的教育工作者。

项目健康状况与贡献

• 本仓库遵循 Conventional Commits，通过 Husky pre-commit 钩子运行 ESLint/Prettier，并强制执行零 lint 警告。
• 在 MIT License 下开源 – 您可以 fork、修改或将其嵌入到其他项目中。
• 问题和拉取请求通过 README 中链接的 GitHub 仓库进行处理。

---

摘要 (TL;DR) – 一个开箱即用的 Next.js Web 前端，用于 Azure Text-to-Speech API，提供 UI 控制和原始 SSML 编辑，支持一键部署或通过 Docker 部署，采用 MIT 许可。