Twilio के ज़रिए जनरेट किया गया ऑडियो भेजना

जानें कि Twilio के साथ जनरेट की गई स्पीच को फ़ोन कॉल में कैसे इंटीग्रेट करें।

कैसे करें गाइड · इसमें माना गया है कि आपने ElevenAPI क्विकस्टार्ट पूरा कर लिया है और आपका Twilio अकाउंट है।

इस गाइड में, आप सीखेंगे कि Twilio और ElevenLabs का इस्तेमाल करके फोन कॉल के ज़रिए AI से जनरेट किया गया संदेश कैसे भेजें। इस प्रक्रिया से आप अपने कॉल करने वालों को सीधे उच्च-गुणवत्ता वाले वॉइस मैसेज भेज सकते हैं।

Twilio और ngrok पर अकाउंट बनाएं

इस गाइड के लिए हम Twilio और ngrok का इस्तेमाल करेंगे, इसलिए उन पर अकाउंट बना लें।

Express के साथ सर्वर बनाएं

अपना प्रोजेक्ट शुरू करें

अपने प्रोजेक्ट के लिए एक नया फ़ोल्डर बनाएं

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

डिपेंडेंसी इंस्टॉल करें

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

डेवलपमेंट डिपेंडेंसी इंस्टॉल करें

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

अपनी फ़ाइलें बनाएं

// 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=

कोड को समझें

इनकमिंग कॉल को हैंडल करना

जब आप अपने नंबर पर कॉल करते हैं, तो Twilio आपके /call/incoming एंडपॉइंट पर POST रिक्वेस्ट करता है। फिर हम Twilio को बताने के लिए twiml.connect का इस्तेमाल करते हैं कि हम url को अपने /call/connection एंडपॉइंट पर सेट करके अपने websocket के ज़रिए कॉल हैंडल करना चाहते हैं।

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());
});

टेक्स्ट टू स्पीच बनाना

यहाँ हम Twilio द्वारा हमारे websocket एंडपॉइंट पर भेजे गए संदेशों को सुनते हैं। start संदेश इवेंट मिलने पर, हम ElevenLabs TypeScript SDK का इस्तेमाल करके ऑडियो जनरेट करते हैं।

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,
});

संदेश भेजना

ElevenLabs से ऑडियो वापस मिलने पर, हम उसे array buffer में बदलते हैं और websocket के ज़रिए Twilio को ऑडियो भेजते हैं।

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"),
},
})
);

ngrok को अपने एप्लिकेशन पर पॉइंट करें

Twilio को सार्वजनिक रूप से एक्सेस किया जा सकने वाला URL चाहिए। हम अपने एप्लिकेशन के लोकल पोर्ट को फ़ॉरवर्ड करने और उसे सार्वजनिक URL के रूप में उपलब्ध कराने के लिए ngrok का इस्तेमाल करेंगे।

अपने टर्मिनल में यह कमांड चलाएं:

ngrok http 5000

अपने एनवायरनमेंट वेरिएबल में इस्तेमाल करने के लिए ngrok डोमेन (https:// के बिना) कॉपी करें।

अपने एनवायरनमेंट वेरिएबल अपडेट करें

अपनी ngrok डोमेन और ElevenLabs API key के साथ .env फ़ाइल अपडेट करें।

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

एप्लिकेशन शुरू करें

ऐप शुरू करने के लिए यह कमांड चलाएं:

npm run dev

Twilio सेट अप करें

नया नंबर बनाने के लिए Twilio की गाइड्स का पालन करें। नंबर बनाने के बाद, Phone Numbers -> Manage -> Active numbers में “Configure” टैब पर जाएं

“A call comes in” सेक्शन में, अपने एप्लिकेशन का पूरा URL डालें (/call/incoming पाथ जोड़ना न भूलें):

उदाहरण: https://***ngrok.app/call/incoming

फोन कॉल करें

अपने नंबर पर कॉल करें। आपको ElevenLabs वॉइस में एक संदेश सुनाई देना चाहिए।

प्रोडक्शन में डिप्लॉय करने के लिए टिप्स

प्रोडक्शन में एप्लिकेशन चलाते समय, SERVER_DOMAIN एनवायरनमेंट वेरिएबल को अपने सर्वर के डोमेन पर सेट करें। Twilio में URL को भी अपने प्रोडक्शन सर्वर की ओर अपडेट करना न भूलें।

निष्कर्ष

अब आपको Twilio को ElevenLabs वॉइसेज़ के साथ इंटीग्रेट करने की बुनियादी समझ होनी चाहिए। अगर आपके कोई और सवाल हैं या इस ब्लॉग पोस्ट को बेहतर बनाने के सुझाव हैं, तो नीचे “Suggest edits” या “Raise issue” बटन चुनें।