वॉइस से चलने वाले वेब ऐप्लिकेशन - Web Speech API के बारे में जानकारी

नए JavaScript Web Speech API की मदद से, अपने वेब पेजों में आवाज़ की पहचान करने की सुविधा जोड़ना आसान हो जाता है. इस एपीआई की मदद से, Chrome के वर्शन 25 और इसके बाद के वर्शन में, आवाज़ की पहचान करने की सुविधाओं को बेहतर तरीके से कंट्रोल किया जा सकता है. साथ ही, इनमें ज़्यादा विकल्प भी मिलते हैं. यहां एक उदाहरण दिया गया है, जिसमें बोलते समय पहचाना गया टेक्स्ट तुरंत दिखने लगता है.

Web Speech API का डेमो

डेमो / सोर्स

आइए, इसके बारे में ज़्यादा जानते हैं. सबसे पहले, हम यह देखते हैं कि ब्राउज़र, Web Speech API के साथ काम करता है या नहीं. इसके लिए, हम यह देखते हैं कि webkitSpeechRecognition ऑब्जेक्ट मौजूद है या नहीं. अगर यह ऑब्जेक्ट मौजूद नहीं है, तो हम उपयोगकर्ता को अपना ब्राउज़र अपग्रेड करने का सुझाव देते हैं. (एपीआई अब भी एक्सपेरिमेंटल है. इसलिए, फ़िलहाल इसमें वेंडर प्रीफ़िक्स जोड़ा गया है.) आखिर में, हम webkitSpeechRecognition ऑब्जेक्ट बनाते हैं. यह ऑब्जेक्ट, आवाज़ की पहचान करने के लिए इंटरफ़ेस उपलब्ध कराता है. साथ ही, हम इसके कुछ एट्रिब्यूट और इवेंट हैंडलर सेट करते हैं.

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

continuous की डिफ़ॉल्ट वैल्यू 'गलत' होती है. इसका मतलब है कि जब उपयोगकर्ता बोलना बंद कर देगा, तो आवाज़ की पहचान करने की सुविधा बंद हो जाएगी. यह मोड, छोटे इनपुट फ़ील्ड जैसे सामान्य टेक्स्ट के लिए सही है. इस डेमो में, हमने इसे 'सही' पर सेट किया है, ताकि उपयोगकर्ता के बोलते समय रुकने पर भी, आवाज़ की पहचान करने की सुविधा जारी रहे.

interimResults की डिफ़ॉल्ट वैल्यू 'गलत' होती है. इसका मतलब है कि आवाज़ की पहचान करने वाले टूल से मिलने वाले नतीजे सिर्फ़ फ़ाइनल होते हैं और इनमें बदलाव नहीं किया जा सकता. डेमो में, इसे 'सही' पर सेट किया गया है, ताकि हमें शुरुआती और बीच के नतीजे मिल सकें. इनमें बदलाव किया जा सकता है. डेमो को ध्यान से देखें. ग्रे रंग का टेक्स्ट, बीच का टेक्स्ट होता है और इसमें कभी-कभी बदलाव हो सकता है. वहीं, काले रंग का टेक्स्ट, आवाज़ की पहचान करने वाले टूल से मिलने वाले वे जवाब होते हैं जिन्हें फ़ाइनल के तौर पर मार्क किया गया है और इनमें बदलाव नहीं किया जा सकता.

शुरू करने के लिए, उपयोगकर्ता माइक्रोफ़ोन बटन पर क्लिक करता है. इससे यह कोड ट्रिगर होता है:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

हम आवाज़ की पहचान करने वाले टूल "lang" के लिए, बोली जाने वाली भाषा को BCP-47 वैल्यू पर सेट करते हैं. यह वैल्यू, उपयोगकर्ता ने ड्रॉप-डाउन सूची से चुनी होती है. उदाहरण के लिए, अंग्रेज़ी-अमेरिका के लिए “en-US”. अगर इसे सेट नहीं किया जाता है, तो यह डिफ़ॉल्ट रूप से, एचटीएमएल दस्तावेज़ के रूट एलिमेंट और क्रम के lang पर सेट हो जाता है. Chrome में आवाज़ की पहचान करने की सुविधा, कई भाषाओं के साथ काम करती है. डेमो के सोर्स में “langs” टेबल देखें. इसके अलावा, यह सुविधा, दाएं से बाएं की ओर लिखी जाने वाली कुछ भाषाओं के साथ भी काम करती है. हालांकि, इन भाषाओं को इस डेमो में शामिल नहीं किया गया है. जैसे, हिब्रू-इज़रायल और अरबी-मिस्र.

भाषा सेट करने के बाद, हम आवाज़ की पहचान करने वाले टूल को चालू करने के लिए, recognition.start() को कॉल करते हैं. ऑडियो कैप्चर करना शुरू करने के बाद, यह onstart इवेंट हैंडलर को कॉल करता है. इसके बाद, नतीजों के हर नए सेट के लिए, यह onresult इवेंट हैंडलर को कॉल करता है.

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

यह हैंडलर, अब तक मिले सभी नतीजों को दो स्ट्रिंग में जोड़ता है: final_transcript और interim_transcript. नतीजे के तौर पर मिलने वाली स्ट्रिंग में "\n" शामिल हो सकता है. जैसे, जब उपयोगकर्ता “नया पैराग्राफ़” बोलता है. इसलिए, हम इन्हें एचटीएमएल टैग <br> या <p> में बदलने के लिए, linebreak फ़ंक्शन का इस्तेमाल करते हैं. आखिर में, यह इन स्ट्रिंग को, इनसे जुड़े <span> एलिमेंट के innerHTML के तौर पर सेट करता है: final_span, जिसे काले रंग के टेक्स्ट के साथ स्टाइल किया गया है. साथ ही, interim_span, जिसे ग्रे रंग के टेक्स्ट के साथ स्टाइल किया गया है.

interim_transcript एक लोकल वैरिएबल है. इस इवेंट को हर बार कॉल करने पर, इसे पूरी तरह से फिर से बनाया जाता है. ऐसा इसलिए है, क्योंकि यह हो सकता है कि पिछले onresult इवेंट के बाद से, बीच के सभी नतीजे बदल गए हों. हम final_transcript के लिए भी ऐसा ही कर सकते हैं. इसके लिए, बस फ़ॉर लूप को 0 से शुरू करें. हालांकि, फ़ाइनल टेक्स्ट कभी नहीं बदलता. इसलिए, हमने यहां कोड को थोड़ा ज़्यादा कारगर बनाया है. इसके लिए, final_transcript को ग्लोबल बनाया गया है, ताकि यह इवेंट, फ़ॉर लूप को event.resultIndex से शुरू कर सके और सिर्फ़ नए फ़ाइनल टेक्स्ट को जोड़ सके.

बस इतना ही! बाकी कोड सिर्फ़ इसलिए है, ताकि सब कुछ बेहतर दिखे. यह स्थिति बनाए रखता है, उपयोगकर्ता को जानकारी देने वाले कुछ मैसेज दिखाता है, और माइक्रोफ़ोन बटन पर मौजूद जीआईएफ़ इमेज को बदलता रहता है. इसके लिए, यह स्टैटिक माइक्रोफ़ोन, माइक-स्लैश इमेज, और पल्सिंग रेड डॉट के साथ माइक-ऐनिमेट का इस्तेमाल करता है.

recognition.start() को कॉल करने पर, माइक-स्लैश इमेज दिखती है. इसके बाद, onstart फ़ायर होने पर, इसे माइक-ऐनिमेट से बदल दिया जाता है. आम तौर पर, यह इतनी तेज़ी से होता है कि स्लैश नज़र नहीं आता. हालांकि, पहली बार आवाज़ की पहचान करने की सुविधा का इस्तेमाल करने पर, Chrome को उपयोगकर्ता से माइक्रोफ़ोन इस्तेमाल करने की अनुमति मांगनी पड़ती है. ऐसे में, onstart सिर्फ़ तब फ़ायर होता है, जब उपयोगकर्ता अनुमति देता है. एचटीटीपीएस पर होस्ट किए गए पेजों को बार-बार अनुमति मांगने की ज़रूरत नहीं होती. वहीं, एचटीटीपी पर होस्ट किए गए पेजों को बार-बार अनुमति मांगनी पड़ती है.

इसलिए, अपने वेब पेजों को उपयोगकर्ताओं की आवाज़ सुनने की अनुमति देकर, उन्हें और बेहतर बनाएं!

हमें आपकी राय का इंतज़ार रहेगा...

हमारी निजता नीति के बारे में जानने के लिए, Chrome में निजता को समझना लेख पढ़ें. यह नीति 16 जून, 2026 को अपडेट की गई है.