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

अपनी वेबसाइट में टेक्स्ट-टू-स्पीच (TTS) जोड़ने के लिए आपको किसी फ़्रेमवर्क की ज़रूरत नहीं है। चाहे आप सादे HTML और JavaScript के साथ काम कर रहे हों, किसी स्टैटिक साइट जनरेटर के साथ, या सर्वर-रेंडर्ड पेज के साथ, अपने कंटेंट में आवाज़ जोड़ना आसान है।

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

आधुनिक ब्राउज़र में Web Speech API पहले से मौजूद होता है। vanilla JavaScript की कुछ लाइनों से आप यह कर सकते हैं:

```js

const utterance = new SpeechSynthesisUtterance("Hello world");

window.speechSynthesis.speak(utterance);

```

न कोई npm पैकेज, न API key, न सर्वर। यह मुफ़्त है और ऑफ़लाइन भी काम करता है।

कमी है क्वालिटी और एकरूपता की:

• आवाज़ें अक्सर रोबोटिक लगती हैं।
• आवाज़ की क्वालिटी और विकल्प हर प्लेटफ़ॉर्म पर अलग होते हैं।
• Windows पर Chrome की आवाज़ macOS पर Safari से अलग सुनाई देती है।
• आप सभी यूज़र्स के लिए एक जैसे सुनने के अनुभव की गारंटी नहीं दे सकते।

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

एक विकल्प यह है कि अपने पूरे कंटेंट के लिए ऑडियो पहले से जनरेट कर लें और फ़ाइलों को CDN पर होस्ट करें।

फ़ायदे

• यूज़र्स के लिए तुरंत प्लेबैक
• हर जगह एक जैसी क्वालिटी और आवाज़

नुकसान

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

छोटे और स्थिर कैटलॉग के लिए प्री-जनरेशन ठीक काम करता है, लेकिन बड़े पैमाने पर यह महँगा और कठोर हो जाता है।

ज़्यादा कुशल तरीका यह है कि ऑडियो तभी जनरेट किया जाए जब कोई सच में प्ले पर क्लिक करे।

फ़ायदे

• आप सिर्फ़ उसी ऑडियो का भुगतान करते हैं जिसे यूज़र्स माँगते हैं
• डायनामिक और यूज़र-जनरेटेड कंटेंट आसानी से संभल जाता है

चुनौती

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

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

1. सुरक्षित क्लाइंट-साइड key

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

1. पहला विज़िटर: तुरंत ब्राउज़र TTS + बैकग्राउंड में जनरेशन

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

1. अप्रूवल और बजट कंट्रोल

अपने TTS2Go डैशबोर्ड में आप:

• जनरेशन रिक्वेस्ट को मैन्युअली अप्रूव कर सकते हैं, या
• AI अप्रूवल सिस्टम को कॉन्फ़िगर कर सकते हैं ताकि आपकी शर्तें पूरी करने वाली रिक्वेस्ट अपने-आप अप्रूव हो जाएँ।

इससे आपको अपने जनरेशन बजट पर पूरा नियंत्रण मिलता है।

1. बाद के विज़िटर: CDN से प्रीमियम AI ऑडियो

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

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

npm से TTS2Go का vanilla JavaScript पैकेज इंस्टॉल करें:

npm install @tts2go/vanilla

अगर आप bundler का इस्तेमाल नहीं कर रहे हैं, तो इसे <script> टैग के साथ CDN से लोड करके window.TTS2Go के रूप में एक्सेस कर सकते हैं।

अपने प्रोजेक्ट क्रेडेंशियल्स के साथ एक नया TTS2Go इंस्टेंस बनाएँ:

import { TTS2Go } from "@tts2go/vanilla";

const tts = new TTS2Go({

apiKey: "your-api-key",

projectId: "your-project-id",

});

अपने टेक्स्ट और एक voice ID के साथ tts.create() कॉल करें और पूरे प्लेबैक कंट्रोल वाला TTS इंस्टेंस पाएँ:

const instance = tts.create(
"Hello from TTS2Go in plain JavaScript!",)

यहाँ से आप TTS2Go की पूरी JavaScript API एक्सप्लोर कर सकते हैं, जिसमें शामिल है:

• tts.getVoices() – अपने प्रोजेक्ट के लिए उपलब्ध आवाज़ों की सूची देखें