Rork × ElevenLabs で『話せるAIキャラクター』アプリを作る実践ガイド

// worker/src/index.ts — ElevenLabs プロキシ
// 機能: アプリから受け取ったテキストを ElevenLabs に渡し、音声バイナリを返す
// なぜ Worker 経由か: API キーをアプリに埋め込まないため + レート制限/キャッシュ層を持つため
 
export interface Env {
  ELEVENLABS_API_KEY: string;
  ELEVENLABS_VOICE_ID: string;
  AUTH_SECRET: string;
}
 
export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    if (request.method !== "POST") {
      return new Response("Method Not Allowed", { status: 405 });
    }
 
    // ① アプリからのリクエスト認証（Rork 側で発行する短期トークンを検証）
    const auth = request.headers.get("Authorization");
    if (auth !== `Bearer ${env.AUTH_SECRET}`) {
      return new Response("Unauthorized", { status: 401 });
    }
 
    // ② リクエストボディからテキストとモデルを取得
    const { text, modelId = "eleven_flash_v2_5" } = await request.json<{
      text: string;
      modelId?: string;
    }>();
 
    if (!text || text.length > 1000) {
      return new Response("Invalid text length", { status: 400 });
    }
 
    // ③ ElevenLabs にリクエスト（音声バイナリをそのまま返却）
    const elevenRes = await fetch(
      `https://api.elevenlabs.io/v1/text-to-speech/${env.ELEVENLABS_VOICE_ID}`,
      {
        method: "POST",
        headers: {
          "xi-api-key": env.ELEVENLABS_API_KEY,
          "Content-Type": "application/json",
          "Accept": "audio/mpeg",
        },
        body: JSON.stringify({
          text,
          model_id: modelId,
          voice_settings: {
            stability: 0.5,        // 0.5 で表現の幅と安定性のバランス
            similarity_boost: 0.75, // 元音声への忠実度
            style: 0.3,            // キャラクター性の強さ（高すぎるとノイズが出る）
            use_speaker_boost: true,
          },
        }),
      }
    );
 
    if (!elevenRes.ok) {
      const errText = await elevenRes.text();
      console.error("ElevenLabs error:", elevenRes.status, errText);
      return new Response("TTS upstream error", { status: 502 });
    }
 
    // ④ 音声を MP3 として返す（クライアントで expo-av が再生）
    return new Response(elevenRes.body, {
      headers: {
        "Content-Type": "audio/mpeg",
        "Cache-Control": "public, max-age=86400",
      },
    });
  },
};

// hooks/useVoiceResponse.ts — テキストを ElevenLabs 音声で再生するフック
// 解決すること: 重複再生防止、ローディング状態管理、エラー時の無音フォールバック
 
import { useState, useRef, useCallback } from "react";
import { Audio } from "expo-av";
import * as FileSystem from "expo-file-system";
 
const PROXY_URL = process.env.EXPO_PUBLIC_TTS_PROXY_URL!;
const AUTH_SECRET = process.env.EXPO_PUBLIC_TTS_AUTH_SECRET!;
 
export function useVoiceResponse() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const soundRef = useRef<Audio.Sound | null>(null);
 
  const speak = useCallback(async (text: string) => {
    if (!text.trim()) return;
    // 再生中なら一度止める（被って再生されると不快なため）
    if (soundRef.current) {
      await soundRef.current.unloadAsync();
      soundRef.current = null;
    }
 
    setIsLoading(true);
    try {
      const res = await fetch(PROXY_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${AUTH_SECRET}`,
        },
        body: JSON.stringify({ text }),
      });
 
      if (!res.ok) throw new Error(`TTS HTTP ${res.status}`);
 
      // ファイルとして保存（expo-av は URI から読み込む方が安定）
      const blob = await res.blob();
      const reader = new FileReader();
      const base64 = await new Promise<string>((resolve, reject) => {
        reader.onload = () => resolve((reader.result as string).split(",")[1]);
        reader.onerror = reject;
        reader.readAsDataURL(blob);
      });
 
      const fileUri = `${FileSystem.cacheDirectory}voice_${Date.now()}.mp3`;
      await FileSystem.writeAsStringAsync(fileUri, base64, {
        encoding: FileSystem.EncodingType.Base64,
      });
 
      const { sound } = await Audio.Sound.createAsync(
        { uri: fileUri },
        { shouldPlay: true }
      );
      soundRef.current = sound;
      setIsPlaying(true);
 
      sound.setOnPlaybackStatusUpdate((status) => {
        if (status.isLoaded && status.didJustFinish) {
          setIsPlaying(false);
          sound.unloadAsync();
        }
      });
    } catch (err) {
      console.error("TTS playback failed:", err);
      // 失敗時はサイレントフォールバック（テキスト表示のみで継続）
    } finally {
      setIsLoading(false);
    }
  }, []);
 
  const stop = useCallback(async () => {
    if (soundRef.current) {
      await soundRef.current.stopAsync();
      await soundRef.current.unloadAsync();
      soundRef.current = null;
      setIsPlaying(false);
    }
  }, []);
 
  return { speak, stop, isPlaying, isLoading };
}