feat: stream audio response

Author: thymikee

app/api/tts/route.ts

@@ -1,45 +1,70 @@
-import { getLatestVoice } from "@/lib/db/queries"
-import { auth } from "@/app/(auth)/auth"
-import { NextResponse } from "next/server"
+import { getLatestVoice } from "@/lib/db/queries";
+import { auth } from "@/app/(auth)/auth";
+import { NextResponse } from "next/server";
+const https = require("https");
 
 export async function POST(request: Request) {
   try {
-    const { text, voice } = await request.json()
+    const { text, voice } = await request.json();
     const session = await auth();
     const user_id = session?.user?.id ?? "";
-    const latestVoice = await getLatestVoice(user_id)
+    const latestVoice = await getLatestVoice(user_id);
 
-    const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${latestVoice?.voice_id ?? voice}`, {
+    const options = {
+      hostname: "api.elevenlabs.io",
+      path: `/v1/text-to-speech/${latestVoice?.voice_id ?? voice}/stream`,
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         "xi-api-key": process.env.ELEVENLABS_API_KEY!,
       },
-      body: JSON.stringify({
-        text,
-        model_id: "eleven_monolingual_v1",
-        voice_settings: {
-          stability: 0.5,
-          similarity_boost: 0.5,
-        },
-      }),
-    })
+    };
 
-    console.log("TTS response", response)
+    const requestBody = JSON.stringify({
+      text,
+      model_id: "eleven_monolingual_v1",
+      voice_settings: {
+        stability: 0.5,
+        similarity_boost: 0.5,
+      },
+    });
+
+    const stream = new ReadableStream({
+      async start(controller) {
+        const req = https.request(options, (res: any) => {
+          if (res.statusCode !== 200) {
+            controller.error(new Error("Failed to generate speech"));
+            return;
+          }
+
+          res.on("data", (chunk: any) => {
+            controller.enqueue(chunk);
+          });
 
-    if (!response.ok) {
-      throw new Error("Failed to generate speech")
-    }
+          res.on("end", () => {
+            controller.close();
+          });
+        });
 
-    const audioBuffer = await response.arrayBuffer()
+        req.on("error", (e: any) => {
+          controller.error(e);
+        });
+
+        req.write(requestBody);
+        req.end();
+      },
+    });
 
-    return new NextResponse(audioBuffer, {
+    return new NextResponse(stream, {
       headers: {
         "Content-Type": "audio/mpeg",
       },
-    })
+    });
   } catch (error) {
-    console.error("Error:", error)
-    return NextResponse.json({ error: "Failed to generate speech" }, { status: 500 })
+    console.error("Error:", error);
+    return NextResponse.json(
+      { error: "Failed to generate speech" },
+      { status: 500 }
+    );
   }
-} 
+}

components/chat.tsx

@@ -120,7 +120,29 @@ export function Chat({
         return;
       }
 
-      const audioBlob = await response.blob();
+      const reader: any = response.body?.getReader();
+      if (!reader) {
+        toast.error("Failed to read audio stream");
+        return;
+      }
+
+      const stream = new ReadableStream({
+        start(controller) {
+          function push() {
+            reader.read().then(({ done, value }: any) => {
+              if (done) {
+                controller.close();
+                return;
+              }
+              controller.enqueue(value);
+              push();
+            });
+          }
+          push();
+        },
+      });
+
+      const audioBlob = await new Response(stream).blob();
       const url = URL.createObjectURL(audioBlob);
       setAudioUrl(url);
 
@@ -132,6 +154,12 @@ export function Chat({
           toast.error("Failed to play audio");
         });
       }
+
+      if (!response.ok) {
+        console.error(response);
+        toast.error("Failed to generate speech");
+        return;
+      }
     },
     onError: (error) => {
       console.log(error);