Przesyłanie wygenerowanego audio przez Twilio

Poradnik · Zakłada, że masz za sobą szybki start ElevenAPI i konto Twilio.

Z tego poradnika dowiesz się, jak wysłać wiadomość wygenerowaną przez AI podczas rozmowy telefonicznej za pomocą Twilio i ElevenLabs. Dzięki temu możesz wysyłać wysokiej jakości wiadomości głosowe bezpośrednio do osób dzwoniących.

Załóż konta w Twilio i ngrok

W tym poradniku użyjemy Twilio i ngrok, więc załóż w nich konta.

Utwórz serwer w Express

Zainicjuj projekt

Utwórz nowy folder projektu

mkdir elevenlabs-twilio
cd elevenlabs-twilio
npm init -y

Zainstaluj zależności

npm install @elevenlabs/elevenlabs-js express express-ws twilio

Zainstaluj zależności deweloperskie

npm i @types/node @types/express @types/express-ws @types/ws dotenv tsx typescript

Utwórz pliki

// src/app.ts
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";
import "dotenv/config";
import express, { Response } from "express";
import ExpressWs from "express-ws";
import { Readable } from "stream";
import VoiceResponse from "twilio/lib/twiml/VoiceResponse";
import { type WebSocket } from "ws";
const app = ExpressWs(express()).app;
const PORT: number = parseInt(process.env.PORT || "5000");
const elevenlabs = new ElevenLabsClient();
const voiceId = "aMSt68OGf4xUZAnLpTU8";
const outputFormat = "ulaw_8000";
const text = "This is a test. You can now hang up. Thank you.";
function startApp() {
  app.post("/call/incoming", (_, res: Response) => {
    const twiml = new VoiceResponse();
    twiml.connect().stream({
      url: `wss://${process.env.SERVER_DOMAIN}/call/connection`,
    });
    res.writeHead(200, { "Content-Type": "text/xml" });
    res.end(twiml.toString());
  });
  app.ws("/call/connection", (ws: WebSocket) => {
    ws.on("message", async (data: string) => {
      const message: {
        event: string;
        start?: { streamSid: string; callSid: string };
      } = JSON.parse(data);
      if (message.event === "start" && message.start) {
        const streamSid = message.start.streamSid;
        const response = await elevenlabs.textToSpeech.convert(voiceId, {
          modelId: "eleven_flash_v2_5",
          outputFormat: outputFormat,
          text,
        });
        const readableStream = Readable.from(response);
        const audioArrayBuffer = await streamToArrayBuffer(readableStream);
        ws.send(
          JSON.stringify({
            streamSid,
            event: "media",
            media: {
              payload: Buffer.from(audioArrayBuffer as any).toString("base64"),
            },
          })
        );
      }
    });
    ws.on("error", console.error);
  });
  app.listen(PORT, () => {
    console.log(`Local: http://localhost:${PORT}`);
    console.log(`Remote: https://${process.env.SERVER_DOMAIN}`);
  });
}
function streamToArrayBuffer(readableStream: Readable) {
  return new Promise((resolve, reject) => {
    const chunks: Buffer[] = [];
    readableStream.on("data", (chunk) => {
      chunks.push(chunk);
    });
    readableStream.on("end", () => {
      resolve(Buffer.concat(chunks).buffer);
    });
    readableStream.on("error", reject);
  });
}
startApp();

# .env
SERVER_DOMAIN=
ELEVENLABS_API_KEY=

Jak działa kod

Obsługa połączenia przychodzącego

Gdy dzwonisz na swój numer, Twilio wysyła żądanie POST do endpointu /call/incoming. Następnie używamy twiml.connect, by poinformować Twilio, że chcemy obsłużyć połączenie przez nasz websocket, ustawiając adres URL endpointu /call/connection.

function startApp() {
  app.post('/call/incoming', (_, res: Response) => {
    const twiml = new VoiceResponse();
    twiml.connect().stream({
      url: `wss://${process.env.SERVER_DOMAIN}/call/connection`,
    });
    res.writeHead(200, { 'Content-Type': 'text/xml' });
    res.end(twiml.toString());
  });

Tworzenie mowy z tekstu

Tutaj nasłuchujemy wiadomości, które Twilio wysyła do naszego endpointu websocket. Gdy otrzymamy zdarzenie wiadomości start, generujemy audio za pomocą SDK TypeScript ElevenLabs.

  app.ws('/call/connection', (ws: WebSocket) => {
    ws.on('message', async (data: string) => {
      const message: {
        event: string;
        start?: { streamSid: string; callSid: string };
      } = JSON.parse(data);
      if (message.event === 'start' && message.start) {
        const streamSid = message.start.streamSid;
        const response = await elevenlabs.textToSpeech.convert(voiceId, {
          modelId: 'eleven_flash_v2_5',
          outputFormat: outputFormat,
          text,
        });

Wysyłanie wiadomości

Po otrzymaniu audio z ElevenLabs konwertujemy je do bufora tablicy i wysyłamy do Twilio przez websocket.

const readableStream = Readable.from(response);
const audioArrayBuffer = await streamToArrayBuffer(readableStream);
ws.send(
  JSON.stringify({
    streamSid,
    event: "media",
    media: {
      payload: Buffer.from(audioArrayBuffer as any).toString("base64"),
    },
  })
);

Skieruj ngrok do aplikacji

Twilio wymaga publicznie dostępnego adresu URL. Użyjemy ngrok, aby przekierować lokalny port aplikacji i udostępnić go pod publicznym adresem URL.

Uruchom w terminalu:

ngrok http 5000

Skopiuj domenę ngrok (bez https://), aby użyć jej w zmiennych środowiskowych.

Zaktualizuj zmienne środowiskowe

Zaktualizuj plik .env, wpisując domenę ngrok i klucz API ElevenLabs.

# .env
SERVER_DOMAIN=*******.ngrok.app
ELEVENLABS_API_KEY=*************************

Uruchom aplikację

Aby uruchomić aplikację, wykonaj polecenie:

npm run dev

Skonfiguruj Twilio

Postępuj zgodnie z poradnikami Twilio, aby utworzyć nowy numer. Gdy go utworzysz, przejdź do karty „Configure” w Phone Numbers -> Manage -> Active numbers.

W sekcji „A call comes in” wpisz pełny adres URL aplikacji (pamiętaj, aby dodać ścieżkę/call/incoming):

Np. https://***ngrok.app/call/incoming

Wykonaj połączenie telefoniczne

Zadzwoń na swój numer. Usłyszysz wiadomość głosem ElevenLabs.

Wskazówki dotyczące wdrożenia produkcyjnego

Uruchamiając aplikację na produkcji, ustaw zmienną środowiskową SERVER_DOMAIN na domenę swojego serwera. Pamiętaj też, aby zaktualizować adres URL w Twilio, tak aby wskazywał serwer produkcyjny.

Podsumowanie

Powinieneś już rozumieć podstawy integracji Twilio z głosami ElevenLabs. Jeśli masz pytania lub sugestie, jak ulepszyć ten wpis na blogu, wybierz poniżej przycisk „Suggest edits” lub „Raise issue”.