Femoon/tts-azure-web

What it is

TTS Azure Web is a small web application that lets you turn text into spoken audio using Microsoft Azure’s Text‑to‑Speech service. It’s built with the latest versions of Next.js (v15) and React (v19) and runs either locally, in a Docker container, or on Vercel with a single click.

Core capabilities

Feature	What you can do
Voice customization	Choose the voice, language, style and character that Azure provides.
Audio controls	Adjust speed, intonation and volume before synthesis.
SSML support	Switch to a raw SSML editor to fine‑tune pronunciation, pauses, emphasis, etc.
Export	Download the generated audio as a file.
Dual‑mode UI	Normal mode (point‑and‑click controls) or SSML mode (direct markup).
Config import/export	Save and load SSML configurations for reuse.

How it works under the hood

• Frontend – React 19 with TypeScript, styled by HeroUI (NextUI v2) + Tailwind CSS v4, animated with Framer Motion.
• Routing & i18n – Next.js 15 App Router provides language‑aware routes (/en, /cn).
• State – Global UI state (selected voice, SSML text, mode, etc.) is managed by Zustand and persisted to localStorage so preferences survive page reloads.
• Backend – Next.js API routes call the Azure Speech SDK. One route fetches the list of available voices, another obtains an auth token, and a third sends the text/SSML to Azure and streams back the audio file.
• Deployment – The repo includes a Dockerfile and a Vercel “Deploy” button. All you need at runtime are two environment variables: SPEECH_KEY and SPEECH_REGION (your Azure subscription key and region).

Getting started (quick steps)

1. Create an Azure Speech resource and copy the key + region.
2. Run locally:

   npm i -g yarn   # if you don’t have yarn
   yarn            # install deps
   echo "SPEECH_KEY=...\nSPEECH_REGION=..." > .env.local
   yarn dev        # http://localhost:3000
   

3. Or deploy:
   • Click the Vercel button in the README, supply the two env vars, and Vercel builds the app automatically.
   • Or build a Docker image: docker build -t tts-azure-web . && docker run -p 3000:3000 -e SPEECH_KEY=… -e SPEECH_REGION=… tts-azure-web.

Who might use it

• Developers who need a quick UI to test Azure TTS voices or prototype SSML snippets.
• Content creators looking for an easy way to generate short audio clips without writing code.
• Educators demonstrating speech synthesis concepts in a classroom or workshop.

Project health & contribution

• The repo follows Conventional Commits, runs ESLint/Prettier via Husky pre‑commit hooks, and enforces zero lint warnings.
• Open‑source under the MIT License – you can fork, modify, or embed it in other projects.
• Issues and pull requests are handled through the GitHub repository linked in the README.

---

TL;DR – A ready‑to‑run Next.js web front‑end for Azure’s Text‑to‑Speech API, offering UI controls and raw SSML editing, deployable with one click or via Docker, and licensed MIT.