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

नए JavaScript Web Speech API की मदद से आपके वेब पेजों में बोली पहचान जोड़ना आसान हो जाता है. यह 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();

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

भाषा सेट करने के बाद, हम 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> एलिमेंट के अंदरूनी एचटीएमएल के तौर पर सेट करता है: final_span जिसकी स्टाइल काले रंग से बनाई गई है और interim_span की स्टाइल ग्रे टेक्स्ट से की गई है.

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

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

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

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

हमें आपके सुझाव या राय का इंतज़ार है...

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