Femoon/tts-azure-web

TTS Azure Web – Quick Overview

What it is – A small, self‑hostable web UI that lets you call Microsoft Azure’s Text‑to‑Speech service. You can type or paste text, tweak voice parameters (language, style, speed, volume, etc.) with a graphical interface or raw SSML markup, and download the resulting audio files.

Why it matters – Azure’s neural TTS is a high‑quality, commercial speech synthesis engine. This project removes the boilerplate needed to authenticate, call the API, and build a UI, so developers or hobbyists can experiment with Azure TTS locally or with a one‑click Vercel deployment.

---

Core Features (as described in the README)

• Voice customization – Choose voice, language, style, and character.
• Audio controls – Adjust speed, intonation, and volume.
• Dual‑mode editor –
  • Normal mode: UI sliders and dropdowns.
  • SSML mode: Direct editing of Speech Synthesis Markup Language for fine‑grained control.
• Import/Export SSML – Save configurations and reload them later.
• Audio export – Download the generated speech as an audio file.
• State persistence – Preferences are saved in localStorage via Zustand.
• Internationalisation – English and Simplified Chinese UI, automatic locale detection.
• Responsive design – Works on desktop and mobile.

---

Tech Stack (from the README)

Layer	Technology
Front‑end framework	Next.js 15 (App Router)
UI library	HeroUI (NextUI v2) + Tailwind CSS v4 + Framer Motion
Language	TypeScript (React 19)
State management	Zustand with persistence middleware
Internationalisation	Next.js built‑in i18n
Speech backend	Microsoft Azure Cognitive Services Speech SDK
Packaging / deployment	Docker, Vercel, or plain Node/Yarn

---

Getting Started (summary of the README steps)

1. Obtain Azure credentials – Create a Speech Service in Azure and note the SPEECH_KEY and SPEECH_REGION.
2. Create .env.local at the repo root:

   SPEECH_KEY=your_azure_key
   SPEECH_REGION=your_azure_region
   # optional
   NEXT_PUBLIC_MAX_INPUT_LENGTH=4000
   NEXT_TELEMETRY_DISABLED=1
   

3. Install dependencies – The project uses Yarn Classic:

   npm i -g yarn   # if you don’t have it
   yarn
   

4. Run locally – Development server (localhost only):

   yarn dev
   # or expose on LAN
   yarn lan-dev
   

   Open http://localhost:3000.
5. Build & serve – For a production‑ready local run:

   yarn build
   yarn start
   

---

Deployment Options

• Vercel (one‑click) – Click the “Deploy with Vercel” button in the README; supply SPEECH_KEY and SPEECH_REGION as environment variables.
• Docker – Build and run the container:

  docker build -t tts-azure-web .
  docker run -p 3000:3000 -e SPEECH_KEY=... -e SPEECH_REGION=... tts-azure-web
  

• Local production – Use the Yarn build/start commands after setting the env file.

---

Typical Use Cases

• Rapid prototyping of voice‑enabled UI components.
• Content creation – Generate narration or voice‑overs for videos, podcasts, or e‑learning.
• Testing SSML – Experiment with Azure’s SSML features without writing code.
• Educational demos – Show how cloud‑based TTS works in a classroom or workshop.

---

Project Health & Maintenance

• Linting & CI – ESLint (zero‑warning policy), Prettier, Husky pre‑commit hooks, Commitlint, and Dependabot for security patches.
• Node version – Requires Node 22+; Yarn 1.22.22.
• License – MIT, permissive for personal or commercial use.

---

Where to Find More

• Live demo – https://tts.femoon.top
• Source code – https://github.com/Femoon/tts-azure-web
• Issue tracker – GitHub Issues page linked from the repo.

---

TL;DR: TTS Azure Web is a ready‑to‑run Next.js app that wraps Azure’s neural TTS API in a clean UI, supporting both simple sliders and full SSML editing, with easy deployment via Vercel, Docker, or local Node.