Femoon/tts-azure-web

TTS Azure Web 是一个 Azure 文本转语音（TTS）网页应用，可以在本地或者云端使用你的 Azure Key 一键部署。TTS Azure Web is an Azure Text-to-Speech (TTS) web application. It allows you to run it locally or deploy it with a single click using your Azure Key.

功能簡介

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 routes 呼叫 Azure Speech SDK。一個路由用於獲取可用語音列表，另一個用於獲取身份驗證令牌，第三個用於將文字/SSML 發送到 Azure 並串流回音訊檔案。
部署 – 倉庫包含 Dockerfile 和 Vercel “Deploy” 按鈕。執行時僅需兩個環境變數：SPEECH_KEY 和 SPEECH_REGION（您的 Azure 訂閱金鑰和區域）。

入門指南（快速步驟）

建立 Azure Speech 資源並複製金鑰 + 區域。

本地執行:

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

或者部署:
- 點擊 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 hook 執行 ESLint/Prettier，並強制執行零 lint 警告。
在 MIT License 下開源 – 您可以 fork、修改或將其嵌入到其他專案中。
問題和拉取請求透過 README 中連結的 GitHub 倉庫進行處理。

摘要 (TL;DR) – 一個開箱即用的 Next.js Web 前端，用於 Azure Text-to-Speech API，提供 UI 控制和原始 SSML 編輯，支援一鍵部署或透過 Docker 部署，採用 MIT 授權。