TTS Azure Web

English / 简体中文

TTS Azure Web is an Azure Text-to-Speech (TTS) web application built with Next.js 15 and React 19. Fine-tune the output speech results using Speech Synthesis Markup Language (SSML). It allows you to run it locally or deploy it with a single click using your Azure Key.

• Voice Customization: Selection of voice, language, style, and character
• Audio Controls: Adjustments of speech speed, intonation, and volume
• Audio Export: Download generated audio files
• Dual Mode System: Switch between Normal mode (UI controls) and SSML mode (direct markup)
• Configuration Management: Import and export SSML configurations

• Modern Stack: Next.js 15 with App Router, React 19, TypeScript
• Responsive UI: HeroUI (NextUI v2) with Tailwind CSS v4 and Framer Motion
• Internationalization: Built-in i18n support (English/Chinese) with automatic locale detection
• State Management: Zustand with persistent storage and mode switching
• Multiple Deployment Options: Vercel, Docker, or local development

This application is ideal for those looking to minimize setup while experiencing the full capabilities of Azure TTS.

Live demo: https://tts.femoon.top

Get your API Key

• Go to Microsoft Azure Text to Speech and click "Try Text to Speech Free"
• Go to Azure AI services
• In the "Speech services" block, click "Add"
• A region and two subscription keys will be listed beside Speech Services. You only need one key and its corresponding region.

# Build the Docker image
docker build -t tts-azure-web .

# Run with environment variables
docker run -p 3000:3000 \
  -e SPEECH_KEY=your_azure_key \
  -e SPEECH_REGION=your_azure_region \
  tts-azure-web

# Install yarn (if not already installed)
npm i -g yarn

# Install dependencies
yarn

# Build for production
yarn build

# Start production server
yarn start

Before starting development, create a .env.local file at the project root with your Azure credentials:

# Required: Azure Cognitive Services credentials
SPEECH_KEY=your_azure_key
SPEECH_REGION=your_azure_region

# Optional: Application configuration
NEXT_PUBLIC_MAX_INPUT_LENGTH=4000  # Maximum text input length (default: 4000)

# Optional: Next.js configuration
NEXT_TELEMETRY_DISABLED=1         # Disable Next.js telemetry

Common Azure regions: eastus, westus2, eastasia, westeurope, etc.

# Install yarn (if not already installed)
npm i -g yarn

# Install dependencies
yarn

# Start development server (localhost only)
yarn dev

# Or start development server accessible on LAN
yarn lan-dev

• Local development: Open http://localhost:3000
• LAN development: Access via your machine's IP address on port 3000

yarn dev       # Start development server
yarn lan-dev   # Start development server on LAN (0.0.0.0)
yarn build     # Build for production
yarn start     # Start production server
yarn lint      # Run ESLint with auto-fix (max 0 warnings)

• Frontend: React 19 with TypeScript
• Framework: Next.js 15 with App Router
• UI Library: HeroUI (NextUI v2) + Tailwind CSS v4 + Framer Motion
• State Management: Zustand with persistence middleware
• Internationalization: Built-in Next.js i18n with locale detection
• Speech Service: Microsoft Azure Cognitive Services Speech SDK

app/
├── [lang]/              # Internationalized routes (en/cn)
│   ├── ui/             # UI components
│   │   └── components/ # Reusable components
│   └── page.tsx        # Main application page
├── api/                # API routes
│   ├── audio/         # TTS audio generation
│   ├── token/         # Azure authentication
│   └── list/          # Voice list fetching
└── lib/               # Utilities and stores
    ├── stores/        # Zustand state management
    ├── hooks/         # Custom React hooks
    └── i18n/          # Internationalization config

• Dual Mode System: Toggle between Normal mode (UI controls) and SSML mode (direct markup)
• State Persistence: Automatic localStorage sync for user preferences and configurations
• Mode Switching: Seamless switching between modes with state caching
• Responsive Design: Mobile-first design with adaptive layouts

This project follows the Conventional Commits specification:

• feat: Add new functions
• fix: Fix issues/bugs
• perf: Optimize performance
• style: Change code style without affecting functionality
• refactor: Refactor code
• revert: Undo changes
• test: Test related, does not involve business code changes
• docs: Documentation and annotations
• chore: Update dependencies/modify configuration
• ci: CI/CD related changes

1. Pre-commit hooks: Husky runs ESLint and Prettier on staged files
2. Linting: ESLint with TypeScript, Prettier, and import ordering rules
3. Commit validation: Commitlint enforces conventional commit messages
4. Code quality: Maximum 0 ESLint warnings allowed

Use Node.js 22 or newer and Yarn Classic (1.22.22). CI installs the frozen lockfile, checks lint without modifying files, and builds in demo mode without Azure credentials.

Dependabot is configured for security updates only for npm and GitHub Actions. open-pull-requests-limit: 0 disables routine version update PRs without blocking security update PRs. Keep Dependabot alerts and security updates enabled in the repository settings; fixable alerts trigger PRs without waiting for the required weekly schedule entry. Security fixes are not combined into a blanket group.

Verified Dependabot npm security patches can merge automatically using squash after the required quality check passes and the PR branch is up to date. The policy accepts one dependency at a time, stable patch upgrades only, no maintainer changes, and changes only to package.json and yarn.lock. Public GitHub advisories must confirm that the old version is vulnerable and the new version has no known active reviewed advisories. The privileged workflow loads only trusted base-branch code and uses no personal access token.

Minor/major upgrades, prereleases, grouped updates, and GitHub Actions changes require manual review. If a fix requires a major upgrade (or a minor upgrade of a 0.x package), review the migration and runtime behavior separately. Plan routine dependency and Docker base image upgrades manually; do not automatically jump Node.js release lines just because a newer image is available.

Run yarn audit to check the full dependency tree locally. Keep yarn.lock committed with dependency changes. The sharp resolution also patches Next.js's transitive copy; the other resolutions retain fixes for transitive dependencies.

This project is licensed under the MIT License - see the LICENSE file for details.

• Live Demo: https://tts.femoon.top
• Issues: GitHub Issues
• Repository: GitHub Repository

• Microsoft Azure Cognitive Services for providing the TTS service
• Next.js for the React framework
• HeroUI for the component library