वॉइस से चलने वाले वेब ऐप्लिकेशन - 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 की बोली पहचानने की सुविधा कई भाषाओं के साथ काम करती है. इनमें दाईं से बाईं ओर लिखी जाने वाली कुछ भाषाएं भी शामिल हैं, जो इस डेमो में शामिल नहीं हैं. जैसे, he-IL और ar-EG. डेमो सोर्स में “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 के लिए भी ऐसा किया जा सकता है. इसके लिए, for लूप को 0 से शुरू करें. हालांकि, फ़ाइनल टेक्स्ट कभी नहीं बदलता. इसलिए, हमने final_transcript को ग्लोबल बनाकर, यहां कोड को थोड़ा बेहतर बनाया है. इससे यह इवेंट, event.resultIndex पर फ़ॉर लूप शुरू कर सकता है और सिर्फ़ नया फ़ाइनल टेक्स्ट जोड़ सकता है.

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

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

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

हमें आपका सुझाव/राय पाकर बेहद खुशी होगी...

इस एपीआई से मिले वॉइस डेटा को Google कैसे मैनेज करता है, यह जानने के लिए Chrome की निजता से जुड़ा व्हाइट पेपर देखें.