Femoon/tts-azure-web

とは

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 を呼び出します。1つのルートは利用可能な音声リストを取得し、別のルートは認証トークンを取得し、3つ目のルートはテキスト/SSMLをAzureに送信してオーディオファイルをストリーミングで返します。
• デプロイ – リポジトリにはDockerfileとVercelの「Deploy」ボタンが含まれています。実行時に必要なのは、2つの環境変数 SPEECH_KEY と SPEECH_REGION (Azureのサブスクリプションキーとリージョン) だけです。

はじめに (クイックステップ)

1. Azure Speechリソースを作成し、キーとリージョンをコピーします。
2. ローカルで実行:

   npm i -g yarn   # yarnがない場合
   yarn            # 依存関係のインストール
   echo "SPEECH_KEY=...\nSPEECH_REGION=..." >.env.local
   yarn dev        # http://localhost:3000
   

3. またはデプロイ:
   • READMEのVercelボタンをクリックし、2つの環境変数を入力すると、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 の下でオープンソースとして公開されています – フォーク、修正、または他のプロジェクトへの組み込みが可能です。
• Issueおよびプルリクエストは、READMEにリンクされているGitHubリポジトリを通じて処理されます。

---

要約 (TL;DR) – AzureのText-to-Speech APIのための、すぐに実行可能なNext.jsウェブフロントエンド。UIコントロールと生のSSML編集を提供し、ワンクリックまたはDocker経由でデプロイ可能。ライセンスはMIT。