नए JavaScript Web Speech API से आपके वेब पेजों पर बोली की पहचान करने की सुविधा को जोड़ना आसान हो जाता है. यह एपीआई, Chrome 25 और उसके बाद के वर्शन में बोली की पहचान करने की क्षमताओं पर बेहतर कंट्रोल और सुविधा देता है. यहां एक उदाहरण दिया गया है, जिसमें पहचाना गया टेक्स्ट बोलते समय ही दिखने लगता है.
आइए, इनके बारे में जानते हैं. सबसे पहले, हम यह देखते हैं कि ब्राउज़र, 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”. अगर इसे सेट नहीं किया जाता है, तो एचटीएमएल दस्तावेज़ के रूट एलिमेंट और हैरारकी की भाषा डिफ़ॉल्ट रूप से सेट हो जाती है. 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
सिर्फ़ तब चालू होता है, जब उपयोगकर्ता अनुमति देता है. एचटीटीपीएस पर होस्ट किए गए पेजों को बार-बार अनुमति मांगने की ज़रूरत नहीं होती है, जबकि एचटीटीपी पर होस्ट किए गए पेज ऐसा करते हैं.
इसलिए, अपने वेब पेजों को दिलचस्प बनाएं. इसके लिए, उन्हें अपने उपयोगकर्ताओं की बातों को सुनने की सुविधा दें!
हमें आपकी राय जानकर खुशी होगी...
- W3C Web Speech API की खास बातों पर की गई टिप्पणियों के लिए: ईमेल, ईमेल भेजने के लिए फ़ाइलों का संग्रह, कम्यूनिटी ग्रुप
- Chrome पर इस निर्देश को लागू करने से जुड़ी टिप्पणियों के लिए: ईमेल, ईमेल भेजने के लिए संग्रह
Google इस एपीआई से आवाज़ के डेटा को कैसे मैनेज करता है, यह जानने के लिए निजता से जुड़ा Chrome का व्हाइट पेपर देखें.