JavaScript स्पीच रिकग्निशन ट्यूटोरियल: वॉइस UX बनाएं 

Web Speech API जैसे ब्राउज़र-नेटिव स्पीच टू टेक्स्ट (STT) API की मदद से अब वेबसाइटों और ब्राउज़र-आधारित ऐप्स में स्पीच रिकग्निशन जोड़ना आसान हो गया है। डेवलपर लोकल ऑटोमैटिक स्पीच रिकग्निशन सर्वर बनाए बिना API कॉल करके आसानी से माइक्रोफ़ोन इनपुट स्ट्रीम कर सकते हैं, ऑडियो डेटा का विश्लेषण कर सकते हैं और ट्रांसक्रिप्ट प्रोसेस कर सकते हैं। 

Web Speech API, JavaScript में वॉइस कमांड लागू करने के लिए एक आम स्पीच रिकग्निशन API है। यह ऐसे मेथड, आर्ग्युमेंट और प्रॉपर्टी देता है जिनसे आप वेब ब्राउज़र में रीयल-टाइम ट्रांसक्रिप्शन चला सकते हैं। हालांकि, जटिल वेब क्लाइंट्स के लिए डेवलपर्स को Web Speech API सीमित लग सकता है।

इस गाइड में Web Speech API से एक सरल JavaScript स्पीच रिकग्निशन वेब ऐप सेट अप करना, इसकी सीमाएं और अधिक मज़बूत रीयल-टाइम ट्रांसक्रिप्शन क्लाइंट बनाने के विकल्प बताए गए हैं। 

सारांश

• Web Speech API एक ब्राउज़र-नेटिव स्पीच टू टेक्स्ट API है, जो प्रोसेसिंग के लिए माइक्रोफ़ोन ऑडियो को बैकएंड क्लाउड सर्विस पर भेजता है।
• डेवलपर JavaScript वॉइस कमांड ऐप्लिकेशन बनाने के लिए SpeechRecognition API क्लास का इस्तेमाल करते हैं। 
• स्पीच रिकग्निशन ऐप बनाते समय, ऑडियो रिकॉर्डिंग जारी होने का संकेत देकर यूज़र की प्राइवेसी का ध्यान रखें। 
• Web Speech API की कई सीमाएं हैं, जिनमें असंगत ट्रांसक्रिप्शन, ब्राउज़र पर निर्भरता और इंटेंट समझने की कमी शामिल है। 
• ElevenLabs बेहद सटीक, प्रोडक्शन-ग्रेड स्पीच टू टेक्स्ट API देता है, जो क्लाइंट और सर्वर-साइड, दोनों तरह की स्ट्रीमिंग सपोर्ट करता है। 

Web Speech API कैसे काम करता है

Web Speech API वेब डेवलपर्स को लोकल सर्वर की जरूरत के बिना ब्राउज़र-नेटिव स्पीच रिकग्निशन देता है। मूल रूप से, Web Speech API आपके वेब ब्राउज़र से ऑडियो स्ट्रीम को प्रोसेस, विश्लेषण और ऑडियो को ट्रांसक्रिप्ट में बदलने के लिए बैकएंड क्लाउड सर्विस पर भेजता है। ट्रांसक्रिप्शन के लिए यह ब्राउज़र के बैकएंड इंजन पर निर्भर करता है, इसलिए अलग-अलग ब्राउज़र में नतीजे अलग हो सकते हैं।

आम तौर पर, ऑडियो स्ट्रीम ट्रांसक्राइब करने के लिए Web Speech API को एक सक्रिय इंटरनेट कनेक्शन चाहिए होता है, खासकर यदि आप Chrome और Safari के लिए बना रहे हैं। हालांकि, कुछ ब्राउज़र अब ऑफ़लाइन ट्रांसक्रिप्शन सपोर्ट करते हैं। ऑफ़लाइन ट्रांसक्रिप्शन के लिए ब्राउज़र स्पीच टू टेक्स्ट इंजन की तरह काम करता है, फोनीम पहचानता है और उन्हें सुसंगत टेक्स्ट में बदलता है। 

आप कोई भी ब्राउज़र इस्तेमाल करें, API की बुनियादी बातें समान रहती हैं।

• API रिक्वेस्ट करने के लिए आपको API key की जरूरत नहीं है। 
• Web Speech API निरंतर या एक-बार बोले गए कथनों को सपोर्ट करता है। 
• यह इंटरिम और फ़ाइनल, दोनों ट्रांसक्रिप्ट लौटाता है। 

हालांकि, हर ब्राउज़र STT इंजन को अलग तरीके से लागू कर सकता है, इसलिए सटीकता और लेटेंसी अलग-अलग हो सकती हैं।

Web Speech API इस्तेमाल करने के लिए, अपने JavaScript कोड में SpeechRecognition इंटरफ़ेस शुरू करें। फिर कोड लिखते समय इसके मेथड, एट्रिब्यूट और इवेंट हैंडलर ऐक्सेस करें। वॉइस सर्च वेब क्लाइंट बनाने में आप इनमें से कुछ का इस्तेमाल करेंगे।

• SpeechRecognition.continuous: स्पीच इंजन को true पर सेट करने पर निरंतर स्ट्रीम प्रोसेस करने देता है। 
• SpeechRecognition.lang: ऑडियो की भाषा सेट करता है। 
• SpeechRecognition.interimResults: इंजन को इंटरिम ट्रांसक्रिप्ट लौटाने का निर्देश देता है। 
• SpeechRecognition.start(): स्पीच रिकग्निशन प्रक्रिया शुरू करता है।
• SpeechRecognition.onresult: एक इवेंट हैंडलर स्वीकार करता है, जिसे ट्रांसक्रिप्शन पूरा होने पर API ट्रिगर करता है। 

Web Speech API ट्रांसक्रिप्शन को एक स्ट्रिंग ऐरे में लौटाता है। STT इंजन जब भी कोई ट्रांसक्रिप्ट लौटाता है, चाहे वह इंटरिम हो या फ़ाइनल, तो आप उसे results ऐरे में पा सकते हैं। यह एक या अधिक स्ट्रिंग लौटा सकता है। इसलिए, पूरे ट्रांसक्राइब किए गए टेक्स्ट को पाने के लिए आपको रिज़ल्ट स्ट्रिंग पर इटरेट करना होगा। 

नोट: अगर आपने इंटरिम ट्रांसक्रिप्शन चालू किया है, तो यह जानने के लिए कि टेक्स्ट फ़ाइनल ट्रांसक्रिप्ट है या नहीं, isFinal प्रॉपर्टी जांचें। 

JavaScript स्पीच रिकग्निशन का उदाहरण बनाएं 

यह उदाहरण रीयल-टाइम ट्रांसक्रिप्शन वेब ऐप बनाने के लिए JavaScript SpeechRecognition इंटरफ़ेस का इस्तेमाल करता है। नीचे का स्क्रीनशॉट तैयार पेज दिखाता है।

उदाहरण पेज में Start listening बटन रिकॉर्डिंग शुरू करता है। यूज़र के बोलते ही ब्राउज़र ऑडियो को STT इंजन पर भेजता है, ट्रांसक्रिप्शन का इंतज़ार करता है और इंटरिम व फ़ाइनल, दोनों टेक्स्ट दिखाता है।

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

नीचे दिए गए स्निपेट इस उदाहरण के मुख्य हिस्से दिखाते हैं।

SpeechRecognition API सेट अप करें और माइक्रोफ़ोन ऐक्सेस मांगें 

अपने कोड में इसका इस्तेमाल करने के लिए, पहले आपको SpeechRecognition क्लास का इंस्टेंस बनाना होगा। अगर आप Chrome या Safari का पुराना वर्ज़न इस्तेमाल कर रहे हैं, तो webkitSpeechRecognition रेफ़रेंस करें।

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

फिर SpeechRecognition इंस्टेंस बनाएं और स्ट्रीमिंग मोड, इंटरिम ट्रांसक्रिप्शन सपोर्ट व बोली जाने वाली भाषा कॉन्फ़िगर करें। 

recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = language.value;

फिर, .start() मेथड कॉल करके ट्रांसक्राइब करना शुरू कर सकते हैं। 

recognition.start();

पहली बार स्पीच रिकग्निशन प्रक्रिया शुरू करते समय ब्राउज़र यूज़र से अनुमति मांगेगा। ट्रांसक्राइबिंग शुरू करने के लिए यूज़र को Allow पर क्लिक करना होगा। अन्यथा, API SpeechRecognitionErrorEvent हैंडलर में "not-allowed” वैल्यू लौटाएगा। 

लाइव ट्रांसक्रिप्ट और फ़ाइनल नतीजे दिखाएं 

इस उदाहरण में, यूज़र के माइक्रोफ़ोन में बोलने के दौरान हम ट्रांसक्रिप्ट दिखाते हैं। ऐसा करने के लिए, हम onresult इवेंट में एक फ़ंक्शन जोड़ते हैं। 

recognition.onresult = (event) => {
  let interim = "";

  for (let index = event.resultIndex; index < event.results.length; index += 1) {
    const result = event.results[index][0].transcript;
    if (event.results[index].isFinal) text += `${result.trim()} `;
    else interim += result;
  }

  capturePhrases();
  render(interim);
};

इंटरिम ट्रांसक्रिप्ट फ़ाइनल नहीं होते। इसलिए दिखाया गया टेक्स्ट आपके बोले गए सटीक शब्द न भी हो। STT इंजन को आगे के शब्दों से अधिक संदर्भ मिलता है, तो वह ट्रांसक्रिप्ट सुधारकर उसे स्ट्रिंग में लौटाता है। 

आप इंटरिम टेक्स्ट को अलग रंग में स्टाइल भी कर सकते हैं, ताकि वह फ़ाइनल ट्रांसक्रिप्ट से अलग दिखे। यह CSS ऐसा करता है:

#transcript .final { color: var(--ink); }
#transcript .interim { color: var(--accent); }

JavaScript में वॉइस कमांड जोड़ें 

एक टेक्स्ट बॉक्स जोड़ें, जिसमें यूज़र सेमीकोलन से अलग किए गए वे फ़्रेज़ डालें जिन्हें वे पहचानना चाहते हैं। (वैकल्पिक रूप से, आप फ़्रेज़ को JSON फ़ाइल में स्टोर करके अपने कोड में लोड कर सकते हैं।)

फिर एक फ़ंक्शन बनाएं, जो फ़ाइनल ट्रांसक्रिप्ट की तुलना फ़्रेज़ सूची से करे। टेक्स्ट मैचिंग करते समय, दोनों सूचियों को लोअरकेस में बदलकर नॉर्मलाइज़ करें। ऐसा इसलिए है क्योंकि यूज़र शब्दों को कैपिटलाइज़ कर सकते हैं, जिससे शब्द एक जैसे होने पर भी मैच न हो। उदाहरण के लिए, “Hello World” और “hello world” में मैच होना चाहिए, भले ही एक कैपिटलाइज़ हो। 

function capturePhrases() {
  const lowerText = text.toLocaleLowerCase();
  getTargetPhrases().forEach((phrase) => {
    if (lowerText.includes(phrase.toLocaleLowerCase()) && !capturedPhrases.includes(phrase)) {
      capturedPhrases.push(phrase);
      const item = document.createElement("li");
      item.textContent = phrase;
      capturedText.append(item);
    }
  });
  capturedResult.classList.toggle("visible", capturedPhrases.length > 0);
}

हर बार कोड को ट्रांसक्रिप्ट मिलने पर, वह फ़्रेज़ सूची पर इटरेट करता है। मैच मिलने पर आप कोई कार्रवाई ट्रिगर करते हैं, जैसे ऐप्लिकेशन लॉन्च करना या इस मामले में, मेल खाने वाले फ़्रेज़ को अलग पैनल में दिखाना। 

ब्राउज़र सपोर्ट, अनुमतियां और रिकग्निशन एरर हैंडल करें 

Web Speech API JavaScript में स्पीच टू टेक्स्ट रिकग्निशन को आसान बनाता है, लेकिन यह हमेशा बिना किसी समस्या के नहीं चलता। यूज़र ऐसा ब्राउज़र इस्तेमाल कर सकते हैं जिसमें SpeechRecognition API के लिए बैकएंड सपोर्ट सीमित हो या न हो। कुछ मामलों में नेटवर्क समस्याओं से ट्रांसक्रिप्शन विफल हो सकता है।

इसलिए, आपके कोड को इन स्थितियों को हैंडल करना चाहिए और यूज़र को उसी अनुसार सूचित करना चाहिए। 

उदाहरण के लिए, यूज़र को Chrome या Edge इस्तेमाल करने के लिए कहें, जहां SpeechRecognition API के काम करने की पुष्टि हुई है।

if (!SpeechRecognition) {
  toggleButton.disabled = true;
  notice.textContent = "Speech recognition is not supported. Try Chrome or Edge.";
  notice.classList.add("visible");
} else {

वहीं, एरर हैंडल करने के लिए एक एरर-हैंडलिंग फ़ंक्शन को onerror इवेंट हैंडलर से जोड़ें और संबंधित एरर कोड प्रोसेस करें। 

उदाहरण के लिए, 

recognition.onerror = (event) => {
  const messages = {
    "not-allowed": "Microphone access was blocked. Allow it in browser settings and try again.",
    "no-speech": "No speech was detected. Try speaking closer to the microphone.",
    network: "The speech recognition service could not connect. Check your internet connection.",
    aborted: "Speech recognition was stopped."
  };
  notice.textContent = messages[event.error] || `Recognition error: ${event.error}.`;
  if (event.error !== "aborted") notice.classList.add("visible");
  listening = false;
  toggleButton.textContent = "Start listening";
  statusText.textContent = "Error";
  status.classList.remove("listening");
};

JavaScript वॉइस रिकग्निशन को सुलभ और प्राइवेसी-केंद्रित बनाएं 

Web Speech API को इंटीग्रेट करते समय प्राइवेसी का ध्यान रखें। वेब क्लाइंट रिकॉर्डिंग शुरू करने से पहले हमेशा विज़ुअल या वर्बल संकेत दिखाएं। उदाहरण के लिए, जब JavaScript वॉइस रिकग्निशन कोड सक्रिय रूप से माइक्रोफ़ोन सिग्नल को स्पीच टू टेक्स्ट इंजन पर भेज रहा हो, तो विज़ुअल संकेत के रूप में लिसनिंग आइकन दिखाएं। 

डेवलपर्स को डेटा प्राइवेसी पर भी ध्यान देना चाहिए। SpeechRecognition API से ट्रांसक्राइब करने पर API डिफ़ॉल्ट रूप से ऑनलाइन ट्रांसक्रिप्शन करता है। ब्राउज़र ऑफ़लाइन स्पीच टू टेक्स्ट सपोर्ट करता हो, तब भी API पहले ऑनलाइन ट्रांसक्रिप्शन का प्रयास करेगा। 

जब आप ऐसी ट्रांसक्रिप्शन सर्विस बना रहे हों जहां डेटा रेज़िडेंसी, गवर्नेंस और कंप्लायंस कड़ाई से नियंत्रित हैं, तब ये तकनीकी विशेषताएं बेहद अहम होती हैं। 

जानें कि प्रोडक्शन के लिए ब्राउज़र स्पीच रिकग्निशन कब पर्याप्त नहीं है 

हमने ऑटोमैटिक स्पीच रिकग्निशन के साथ Web Speech API का उपयोग कर ब्राउज़र-आधारित वॉइस ऐप बनाने के चरण बताए हैं। API, JavaScript डेवलपर्स के लिए स्पीच टू टेक्स्ट क्षमताएं सुलभ बनाता है। हालांकि, कई सीमाएं इसके उपयोग के मामले घटा देती हैं, खासकर व्यावसायिक वेब प्रोडक्ट्स के लिए। 

• ब्राउज़र पर निर्भर: ट्रांसक्रिप्शन काफी हद तक यूज़र के ब्राउज़र पर निर्भर करता है। डेवलपर्स का इस्तेमाल किए जा रहे खास वॉइस मॉडल्स पर कोई नियंत्रण नहीं होता, जिससे ट्रांसक्रिप्शन प्रदर्शन असंगत हो जाता है। 
• सीमित भाषा सपोर्ट: API 40 से अधिक भाषाएं सपोर्ट करता है, लेकिन सटीक संख्या ब्राउज़र के अनुसार अलग हो सकती है।
• स्पीकर डायरीकरण: आप यह पहचान नहीं सकते कि कौन बोल रहा है या ट्रांसक्रिप्ट में अलग-अलग स्पीकर्स को नहीं दिखा सकते। 
• कस्टम शब्दावली: SpeechRecognition API में कस्टम शब्दावली के लिए भरोसेमंद सपोर्ट नहीं है। उदाहरण के लिए, यह “ElevenLabs” को सटीक रूप से ट्रांसक्राइब नहीं कर सकता। (आधिकारिक SpeechRecognition API, SpeechGrammarList का उपयोग करके कस्टम शब्दावली इंटरफ़ेस देता है, लेकिन आधुनिक ब्राउज़र अक्सर इसे अनदेखा करते हैं।)

• सटीकता: स्पीकर के शोर वाले माहौल में होने, तेज़ एक्सेंट होने या माइक्रोफ़ोन से दूर होने पर ट्रांसक्रिप्शन की सटीकता कम हो जाती है। 
• सर्वर-साइड स्ट्रीमिंग: आप सिर्फ़ माइक्रोफ़ोन से स्ट्रीम कर सकते हैं, क्योंकि Web Speech API सर्वर स्ट्रीमिंग या मैन्युअल ऑडियो फ़ाइल अपलोड सपोर्ट नहीं करता। 

अगर ये सीमाएं आपको अपने वॉइस रिकग्निशन प्रोडक्ट को व्यावसायिक बनाने से रोक रही हैं, तो हम ElevenLabs Scribe v2 Realtime इस्तेमाल करने की सलाह देते हैं। 

ElevenLabs Scribe v2 Realtime एक स्पीच रिकग्निशन मॉडल है, जो बेहद सटीक 150 ms से कम लेटेंसी वाला रीयल-टाइम ट्रांसक्रिप्शन देता है। यह 90+ भाषाएं, ब्राउज़र से स्वतंत्र एकसमान प्रदर्शन और कस्टम शब्दावली सपोर्ट करता है। ElevenLabs Scribe v2 Realtime से आप अपने वेब ऐप की आर्किटेक्चर के अनुसार क्लाइंट- या सर्वर-साइड स्ट्रीमिंग चला सकते हैं। 

ElevenLabs Scribe v2 Realtime के साथ JavaScript वॉइस रिकग्निशन ट्यूटोरियल  

ElevenLabs के साथ JavaScript में वॉइस कमांड बनाना भी इसी तरह का तरीका अपनाता है। हालांकि, API रिक्वेस्ट को ऑथराइज़ करने के लिए आपको ElevenLabs API key बनानी होगी। नीचे माइक्रोफ़ोन से स्ट्रीम करने वाला वेब क्लाइंट बनाने के त्वरित चरण हैं। 

1. ElevenLabs SDK इंस्टॉल करें

npm install @elevenlabs/client @elevenlabs/elevenlabs-js

2. API key को उजागर किए बिना पास करने के लिए सिंगल-यूज़ टोकन बनाएं

// Node.js server
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";

const elevenlabs = new ElevenLabsClient({
  apiKey: process.env.ELEVENLABS_API_KEY,
});

app.get("/scribe-token", yourAuthMiddleware, async (req, res) => {
  const token = await elevenlabs.tokens.singleUse.create("realtime_scribe");

  res.json(token);
});

3. चाहे गए पैरामीटर के साथ Scribe v2 Realtime मॉडल कॉन्फ़िगर करें और उससे कनेक्ट करें

// Client side
import { Scribe, RealtimeEvents } from "@elevenlabs/client";

// Ensure you have authentication headers set up
const response = await fetch("/scribe-token", yourAuthHeaders);
const { token } = await response.json();

const connection = Scribe.connect({
  token,
  modelId: "scribe_v2_realtime",
  includeTimestamps: true,
  microphone: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true,
  },
});
// Client side
import { Scribe, RealtimeEvents } from "@elevenlabs/client";

// Ensure you have authentication headers set up
const response = await fetch("/scribe-token", yourAuthHeaders);
const { token } = await response.json();

const connection = Scribe.connect({
  token,
  modelId: "scribe_v2_realtime",
  includeTimestamps: true,
  microphone: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true,
  },
});

4. ट्रांसक्रिप्ट प्रोसेस करने और एक्सेप्शन हैंडल करने के लिए इवेंट हैंडलर बनाएं

// Set up event handlers

// Session started
connection.on(RealtimeEvents.SESSION_STARTED, () => {
  console.log("Session started");
});

// Partial transcripts (interim results), use this in your UI to show the live transcript
connection.on(RealtimeEvents.PARTIAL_TRANSCRIPT, (data) => {
  console.log("Partial:", data.text);
});

// Committed transcripts
connection.on(RealtimeEvents.COMMITTED_TRANSCRIPT, (data) => {
  console.log("Committed:", data.text);
});

// Committed transcripts with word-level timestamps. Only received when includeTimestamps is set to true.
connection.on(RealtimeEvents.COMMITTED_TRANSCRIPT_WITH_TIMESTAMPS, (data) => {
  console.log("Committed:", data.text);
  console.log("Timestamps:", data.words);
});

// Errors - will catch all errors, both server and websocket specific errors
connection.on(RealtimeEvents.ERROR, (error) => {
  console.error("Error:", error);
});

// Connection opened
connection.on(RealtimeEvents.OPEN, () => {
  console.log("Connection opened");
});

// Connection closed
connection.on(RealtimeEvents.CLOSE, () => {
  console.log("Connection closed");
});

// When you are done, close the connection
connection.close();

Scribe v2 Realtime के बारे में विस्तृत मार्गदर्शन के लिए देखें हमारे आधिकारिक दस्तावेज़। 

प्रोडक्शन स्पीच टू टेक्स्ट के लिए ElevenAPI से शुरुआत करें 

ElevenAPI प्रोडक्शन-ग्रेड स्पीच टू टेक्स्ट मॉडल वेब क्लाइंट और सर्वर डेवलपमेंट के लिए देता है। रीयल-टाइम स्पीच रिकग्निशन के अलावा, डेवलपर स्पीकर डायरीकरण, शब्द-स्तरीय टाइमस्टैंप और एसिंक्रोनस प्रोसेसिंग के साथ बैच ट्रांसक्रिप्शन चालू करने के लिए ElevenAPI स्पीच टू टेक्स्ट मॉडल इस्तेमाल करते हैं। 

स्पीच टू टेक्स्ट इंजन को लगातार पोल करने के बजाय, आप ElevenLabs डैशबोर्ड पर वेबहुक बना सकते हैं और एक कॉलबैक URL दे सकते हैं, जहां API तैयार ट्रांसक्रिप्ट भेजता है। 

चाहे आप ऑटोमैटिक स्पीच रिकग्निशन के साथ वेब क्लाइंट या सर्वर ऐप बनाना चाहते हों, ElevenAPI ऐसे ऑडियो मॉडल देता है जिन्हें आप आसानी से अपने कोड में इंटीग्रेट कर सकते हैं। 

अपनी ElevenLabs API key पाएं और API दस्तावेज़ देखें और बनाना शुरू करें। 

अक्सर पूछे जाने वाले सवाल