ElevenLabs × Antigravity でリアルな音声AIアプリを開発する実践ガイド

# バックエンド
pip install elevenlabs fastapi uvicorn python-dotenv
 
# フロントエンド（Next.js）
npm install

# backend/main.py
from fastapi import FastAPI
from fastapi.responses import StreamingResponse
from fastapi.middleware.cors import CORSMiddleware
from elevenlabs.client import ElevenLabs
from pydantic import BaseModel
import os
from dotenv import load_dotenv
 
load_dotenv()
 
app = FastAPI()
 
# CORS設定（開発環境用）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)
 
client = ElevenLabs(api_key=os.getenv("ELEVENLABS_API_KEY"))
 
class TTSRequest(BaseModel):
    text: str
    voice_id: str = "JBFqnCBsd6RMkjVDRZzb"  # "George" - デフォルト音声
 
@app.post("/api/tts")
async def text_to_speech(request: TTSRequest):
    """
    テキストをストリーミング音声に変換するエンドポイント。
    フロントエンドはAudio APIでこのストリームを再生する。
    """
    def audio_stream():
        # generate()はジェネレーターを返す。チャンク単位で音声データが届く
        audio_generator = client.generate(
            text=request.text,
            voice=request.voice_id,
            model="eleven_turbo_v2_5",  # 低遅延モデル（個人開発に最適）
            stream=True,
        )
        for chunk in audio_generator:
            if chunk:
                yield chunk
 
    return StreamingResponse(
        audio_stream(),
        media_type="audio/mpeg",
        headers={"Transfer-Encoding": "chunked"},
    )

uvicorn main:app --reload
# → http://localhost:8000 で起動
 
# 動作テスト（curl）
curl -X POST http://localhost:8000/api/tts \
  -H "Content-Type: application/json" \
  -d '{"text": "こんにちは、Antigravity Labです"}' \
  --output test.mp3
 
# test.mp3 を再生して音声が生成されていれば成功

// app/page.tsx
"use client";
 
import { useState } from "react";
 
export default function VoiceApp() {
  const [text, setText] = useState("");
  const [isPlaying, setIsPlaying] = useState(false);
  const [error, setError] = useState<string | null>(null);
 
  const handlePlay = async () => {
    if (!text.trim()) return;
    setIsPlaying(true);
    setError(null);
 
    try {
      const response = await fetch("/api/tts", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text }),
      });
 
      if (!response.ok) {
        throw new Error(`API エラー: ${response.status}`);
      }
 
      // ReadableStream → ArrayBuffer → Blob → Audio
      const audioData = await response.arrayBuffer();
      const audioBlob = new Blob([audioData], { type: "audio/mpeg" });
      const audioUrl = URL.createObjectURL(audioBlob);
 
      const audio = new Audio(audioUrl);
      audio.play();
      audio.onended = () => {
        setIsPlaying(false);
        URL.revokeObjectURL(audioUrl); // メモリ解放を忘れずに
      };
    } catch (err) {
      setError(err instanceof Error ? err.message : "エラーが発生しました");
      setIsPlaying(false);
    }
  };
 
  return (
    <main className="max-w-xl mx-auto p-8">
      <h1 className="text-2xl font-bold mb-4">音声AIデモ</h1>
      <textarea
        className="w-full border rounded p-2 mb-4 h-32"
        placeholder="読み上げるテキストを入力..."
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button
        onClick={handlePlay}
        disabled={isPlaying}
        className="bg-blue-600 text-white px-6 py-2 rounded disabled:opacity-50"
      >
        {isPlaying ? "再生中..." : "▶ 音声再生"}
      </button>
      {error && <p className="text-red-500 mt-2">{error}</p>}
    </main>
  );
}

# backend/main.py に追加
from fastapi import UploadFile, File
import tempfile
import os
 
@app.post("/api/stt")
async def speech_to_text(audio: UploadFile = File(...)):
    """
    アップロードされた音声ファイルをテキストに変換する。
    フロントエンドからは MediaRecorder で録音したBlobを送信する。
    """
    # 一時ファイルに保存（ElevenLabs SDKはファイルパスを要求するため）
    with tempfile.NamedTemporaryFile(
        delete=False, suffix=".webm"
    ) as tmp_file:
        content = await audio.read()
        tmp_file.write(content)
        tmp_path = tmp_file.name
 
    try:
        with open(tmp_path, "rb") as f:
            result = client.speech_to_text.convert(
                file=f,
                model_id="scribe_v1",
                language_code="ja",  # 日本語指定で精度が上がる
            )
        return {"text": result.text}
    finally:
        os.unlink(tmp_path)  # 一時ファイルを必ず削除

# .gitignore に追加（Antigravity が自動で提案してくれる場合も多い）
.env
.env.local