React में टेक्स्ट-टू-स्पीच जोड़ना

टेक्स्ट-टू-स्पीच तेज़ी से आधुनिक वेब का एक ज़रूरी फ़ीचर बनता जा रहा है। चाहे आप एक्सेसिबिलिटी के लिए बना रहे हों, एंगेजमेंट के लिए, या बस यूज़र्स को कंटेंट का एक और ज़रिया देने के लिए, अपने React प्रोजेक्ट में आवाज़ जोड़ना आपकी सोच से कहीं आसान है। यह गाइड बताती है कि ब्राउज़र स्पीच कैसे काम करती है, अलग-अलग तरीकों के फ़ायदे-नुकसान क्या हैं, और अपने React ऐप में TTS2Go को स्टेप-बाय-स्टेप कैसे इंटीग्रेट करें।

हर आधुनिक ब्राउज़र में Web Speech API मौजूद होता है। आप window.speechSynthesis.speak() को SpeechSynthesisUtterance के साथ कॉल करके बिना किसी बाहरी सर्विस के टेक्स्ट को बोलकर सुन सकते हैं। यह मुफ़्त है, इसके लिए API key नहीं चाहिए, और यह पूरी तरह क्लाइंट पर चलता है।

दिक्कत क्वालिटी की है। ब्राउज़र की आवाज़ें रोबोटिक लगती हैं, ऑपरेटिंग सिस्टम और ब्राउज़र के हिसाब से बदलती हैं, और आवाज़ों के विकल्प सीमित होते हैं। एक ही टेक्स्ट अलग-अलग डिवाइस पर बिल्कुल अलग सुनाई दे सकता है।

AI-पावर्ड टेक्स्ट-टू-स्पीच ने पूरा खेल बदल दिया है। न्यूरल वॉइस मॉडल ऐसा ऑडियो बनाते हैं जो हैरान करने की हद तक इंसानी लगता है, जिसमें स्वाभाविक उतार-चढ़ाव, गति और भावनाएँ होती हैं। ये सर्विसेज़ दर्जनों भाषाओं और सैकड़ों आवाज़ों को सपोर्ट करती हैं।

नुकसान यह है कि यह ऑडियो जनरेट करने में पैसा लगता है और इसके लिए API चाहिए, जिससे एक अहम सवाल उठता है: इसे कब और कैसे जनरेट करें?

एक तरीका यह है कि सारा ऑडियो पहले से जनरेट करके उसे स्टैटिक फ़ाइलों के रूप में सर्व किया जाए। फ़ायदा यह है कि ऑडियो पहले से CDN पर होने के कारण प्लेबैक तुरंत होता है, और हर बार क्वालिटी एक जैसी रहती है।

नुकसान है लागत। आप हर कंटेंट के लिए ऑडियो जनरेट करने का भुगतान करते हैं, चाहे कोई उसे सुने या नहीं। आपको अपना सारा कंटेंट पहले से पता होना चाहिए, यानी डायनामिक टेक्स्ट के लिए यह तरीका नहीं चलता। कंटेंट में हर बदलाव पर नई जनरेशन पाइपलाइन चलानी पड़ती है, और लाइब्रेरी बढ़ने के साथ स्टोरेज का खर्च भी बढ़ता है।

विकल्प यह है कि ऑडियो तभी जनरेट किया जाए जब कोई यूज़र उसे माँगे। यह सस्ता है क्योंकि आप सिर्फ़ उसी कंटेंट का भुगतान करते हैं जिसे लोग सच में सुनना चाहते हैं, और यह डायनामिक कंटेंट के साथ भी काम करता है।

फिर भी, आपको अपने जनरेशन बजट को सुरक्षित रखना होगा। TTS API तक बेरोक-टोक पहुँच का मतलब है कि कोई भी महँगे जनरेशन शुरू करवा सकता है। आपको यह नियंत्रित करने का तरीका चाहिए कि AI ऑडियो किसे और कब मिले।

TTS2Go एक स्मार्ट तरीका अपनाता है जो क्वालिटी, लागत और सरलता के बीच संतुलन बनाता है।

आप एक फ़्रंटएंड API key के साथ अपनी साइट में SDK जोड़ते हैं। यह API key रिक्वेस्ट डोमेन ब्लॉकिंग और रेट लिमिटिंग का इस्तेमाल करती है, इसलिए इसे आपके क्लाइंट-साइड कोड में सुरक्षित रूप से रखा जा सकता है। यह पहचान का एक तरीका है, कोई सीक्रेट नहीं।

जब कोई पहली बार किसी कंटेंट पर TTS बटन क्लिक करता है, तो उसे तुरंत ब्राउज़र स्पीच सिंथेसिस सुनाई देता है। साथ ही, बैकग्राउंड में TTS2Go को एक जनरेशन रिक्वेस्ट भेजी जाती है।

आप अपने TTS2Go डैशबोर्ड में लॉग इन करके उस रिक्वेस्ट को मैन्युअली अप्रूव कर सकते हैं, या AI अप्रूवल सिस्टम को कॉन्फ़िगर कर सकते हैं ताकि आपकी शर्तें पूरी करने वाली रिक्वेस्ट अपने-आप अप्रूव हो जाएँ। इससे आपको अपने जनरेशन बजट पर पूरा नियंत्रण मिलता है, क्योंकि आप सिर्फ़ उसी ऑडियो का भुगतान करते हैं जो आप सच में चाहते हैं।

रिक्वेस्ट अप्रूव और जनरेट हो जाने के बाद, उसी कंटेंट पर TTS क्लिक करने वाले हर अगले यूज़र को आपकी चुनी हुई आवाज़ में हाई-क्वालिटी AI ऑडियो प्लेबैक मिलता है। ऑडियो TTS2Go के CDN पर कैश रहता है, इसलिए प्लेबैक तुरंत होता है।

यानी आपके पहले विज़िटर को ब्राउज़र TTS के साथ काम करने वाला अनुभव मिलता है, अप्रूवल के ज़रिए आपकी जनरेशन लागत नियंत्रण में रहती है, और उसके बाद सभी को बिना किसी अतिरिक्त लागत के प्रीमियम AI ऑडियो मिलता है।

अपनी प्रोजेक्ट डायरेक्टरी में TTS2Go का React पैकेज इंस्टॉल करें:

npm install @tts2go/react

यह पैकेज हल्का है, gzip के बाद 15 KB से भी कम, और React के अलावा इसकी कोई peer dependency नहीं है।

अपने कंपोनेंट ट्री के रूट पर ऐप्लिकेशन को TTS2GoProvider से रैप करें। config में अपनी API key और project ID पास करें।

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TTS2GoProvider } from "@tts2go/react";
import App from "./App";

const config = {
  apiKey: "your-api-key",
  projectId: "your-project-id",
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TTS2GoProvider config={config}>
      <App />
    </TTS2GoProvider>
  </StrictMode>
);

किसी भी कंपोनेंट में useTTS hook इस्तेमाल करके play, pause और stop कंट्रोल पाएँ। झटपट स्पीकर आइकन के लिए आप पहले से बना TTSButton भी लगा सकते हैं।

import { TTSButton, useTTS } from "@tts2go/react";

const VOICE_ID = "your-voice-id";

export default function Article({ text }: { text: string }) {
  const { status, play, stop, pause } = useTTS(text, VOICE_ID);

  return (
    <div>
      <p>{text}</p>
      <TTSButton content={text} voiceId={VOICE_ID} />
      <button onClick={status === "playing" ? stop : play}>
        {status === "playing" ? "Stop" : "Play"}
      </button>
    </div>
  );
}

प्ले पर क्लिक करने वाले पहले यूज़र को ब्राउज़र TTS सुनाई देता है, जबकि आपके TTS2Go डैशबोर्ड पर एक जनरेशन रिक्वेस्ट भेजी जाती है। अप्रूव होने के बाद, आगे के सभी यूज़र्स को AI ऑडियो सुनाई देता है।

वॉइस सिलेक्शन, सटीक उच्चारण के लिए SSML सपोर्ट, और स्क्रीन पर दिख रहे टेक्स्ट को बोले जा रहे शब्दों के साथ सिंक करने वाली highlight API को एक्सप्लोर करें।

एडवांस्ड पैटर्न और उदाहरणों के लिए tts2go.com/docs/react पर React का पूरा डॉक्यूमेंटेशन देखें।