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는 Microsoft Azure의 Text-to-Speech 서비스를 사용하여 텍스트를 음성 오디오로 변환할 수 있는 소규모 웹 애플리케이션입니다. 최신 버전의 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.

누가 사용할 수 있나요

Azure TTS 음성을 테스트하거나 SSML 스니펫의 프로토타입을 빠르게 만들 수 있는 UI가 필요한 개발자.
코드 작성 없이 짧은 오디오 클립을 쉽게 생성하려는 콘텐츠 크리에이터.
강의나 워크숍에서 음성 합성 개념을 시연하는 교육자.

프로젝트 상태 및 기여

이 리포지토리는 Conventional Commits를 따르며, Husky pre-commit 훅을 통해 ESLint/Prettier를 실행하고 린트 경고 제로를 유지합니다.
MIT License 하에 오픈 소스로 제공됩니다 – 포크, 수정 또는 다른 프로젝트에 포함할 수 있습니다.
이슈 및 풀 리퀘스트는 README에 링크된 GitHub 리포지토리를 통해 처리됩니다.

요약 (TL;DR) – Azure Text-to-Speech API를 위한 즉시 실행 가능한 Next.js 웹 프론트엔드. UI 컨트롤과 원시 SSML 편집을 제공하며, 클릭 한 번 또는 Docker를 통해 배포 가능하고 MIT 라이선스를 따릅니다.