Build a voice controlled UI

फ़ाइलों को डाउनलोड करें इस ट्यूटोरियल के लिए।

• [1 1] आवाज इंटरफेस डिजाइन करने के लिए 8 युक्तियाँ

01. प्रोजेक्ट शुरू करें [2 9]

प्रोजेक्ट फाइल फ़ोल्डर से, अपने कोड आईडीई में 'स्टार्ट' फ़ोल्डर खोलें और संपादित करने के लिए 'spece.html' फ़ाइल खोलें। परियोजना के लिए सभी सीएसएस लिखा गया है कि भाषण एपीआई का केंद्र नहीं है, इसलिए नोटो सेरिफ़ टाइपफेस प्राप्त करने के लिए यहां दिखाए गए लिंक को जोड़ें और सीएसएस फ़ाइल को लिंक करें।

 & lt; लिंक href = "https://fonts.googlepeasis.com/css?family=noto+serif" rel = "स्टाइलशीट" & gt;
& lt; लिंक rel = "stylesheet" href = "css / style.css" & gt; 

02. सामग्री जोड़ें [2 9]

इसके पहले तत्वों में एक रैपर होना होगा जिसमें हमारी सभी स्क्रीन सामग्री को पकड़ने के लिए। यहां पहला तत्व एक छिपा संदेश होगा जो उपयोगकर्ता को बताता है कि भाषण एपीआई ब्राउज़र में समर्थित है। यह केवल तभी देखा जाएगा जब यह नहीं है। फिर एक शीर्षक उपयोगकर्ता को बताता है कि फॉर्म तत्वों का पालन करने का उपयोग उनके संदेश के लिए किया जाएगा।

 & lt; div id = "रैपर" & gt;
& lt; अवधि आईडी = "असमर्थित" वर्ग = "समर्थन छिपा हुआ" & gt; भाषण एपीआई समर्थित नहीं है & lt; / अवधि & gt;
& lt; h2 & gt; आपका संदेश: & lt; / h2 & gt; 

03. परिणाम चुनें [2 9]

भाषण एपीआई का उपयोग करते समय सामग्री को प्रदर्शित करने के दो तरीके हैं। एक में, जब उपयोगकर्ता ने बोलना बंद कर दिया है तो टेक्स्ट डिस्प्ले करता है और 'सुनवाई' बटन बंद हो जाता है। दूसरा स्क्रीन पर बोलने के रूप में शब्द दिखाता है। यह पहला रेडियो बटन अंतिम भाषण परिणाम दिखाने की अनुमति देता है।

 & lt; div id = "typofinput" & gt;
& lt; अवधि & gt; परिणाम: & lt; / अवधि & gt;
& lt; लेबल & gt;
& lt; इनपुट प्रकार = रेडियो नाम = मान्यता-प्रकार मान = अंतिम & gt; अंतिम भाषण & lt; / लेबल & gt; 

04. रेडियो दो [2 9]

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

 & lt; लेबल & gt;
& lt; इनपुट प्रकार = रेडियो नाम = मान्यता-प्रकार मान = अंतरिम चेक और जीटी; जैसा कि आप बोलते हैं & lt; / लेबल & gt;
& lt; / div & gt; 

05. पाठ प्रदर्शित करें [2 9]

[7 9]

जिस पाठ को उपयोगकर्ता पृष्ठ में बोलता है उसे स्क्रीन पर प्रदर्शित करने की आवश्यकता होगी। यहां टेक्स्ट-एरिया जोड़ा गया है जिसमें 'ट्रांसक्रिप्शन' की आईडी है - यह लक्षित किया जाएगा ताकि उपयोगकर्ता का भाषण यहां समाप्त हो जाए। पाठ को हटाने के लिए एक स्पष्ट बटन भी है।

 & lt; textarea id = "प्रतिलेखन" पाठक और जीटी;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; बटन आईडी = "साफ़-ऑल" क्लास = "बटन" & gt; साफ़ टेक्स्ट & lt; / बटन & gt; 

06. अंतिम इंटरफ़ेस [2 9]

अंतिम इंटरफ़ेस तत्व अब स्क्रीन में जोड़े जाते हैं। भाषण बटन भाषण को सक्षम और अक्षम करता है, इसलिए इसे बोलने से पहले क्लिक किया जाना चाहिए। फिर से क्लिक करना बंद कर देता है। चूंकि यह अपेक्षाकृत नई बातचीत है, इसलिए लॉग नीचे उपयोगकर्ताओं को बताएगा कि क्या करना है।

& lt; div class = "बटन-रैपर" & gt;
    & lt; div id = "specybutton" वर्ग = "प्रारंभ" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "लॉग" & gt; बोलने के लिए क्लिक करें & lt; / div & gt;
& lt; / div & gt; 

07. जावास्क्रिप्ट जोड़ें [2 9]

अब समापन बॉडी टैग से पहले स्क्रिप्ट टैग जोड़ें। यह वह जगह है जहां सभी जावास्क्रिप्ट जाएंगे। पहली दो पंक्तियां मेल खाने वाली आईडी के साथ पृष्ठ तत्वों को पकड़ती हैं और उन्हें एक चर में स्टोर करती हैं। प्रतिलेखन भाषण का पाठ परिणाम है। लॉग उपयोगकर्ता को इसका उपयोग करने के तरीके के साथ अपडेट करेगा।

 & lt; स्क्रिप्ट और जीटी;
var प्रतिलेखन = document.getElementByid ('प्रतिलेखन');
var log = document.getElementByID ('लॉग');
& lt; / स्क्रिप्ट & gt; 

08. परिवर्तनीय परिणाम [2 9]

अगले कुछ चर का उपयोग करके, अधिक इंटरफ़ेस तत्वों को कैश किया जाता है। भाषण बटन एक टॉगल बन जाएगा, उपयोगकर्ताओं को भाषण को चालू और बंद करने देना।, एक बूलियन, सत्य / झूठे चर द्वारा निगरानी की जाती है। स्पष्ट-सभी बटन असंतोषजनक भाषण परिणामों को हटा देगा।

 var start = document.getElementByID ('SpeechButton');
var clear = document.getElementByID ('साफ़-सब');
var बोलने = गलत; 

09. क्या यह समर्थित है? [2 9]

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

 window.speechlecognition = window.speechlecisnition ||
window.webkitspeechecognition ||
शून्य;
यदि (window.speechlec ginconition === शून्य) {
document.getElementById ('असमर्थित')। क्लासलिस्ट। remove ('छुपा');
start.classlist.add ('छुपा');
} और {

10. मान्यता शुरू करें [2 9]

भाषण मान्यता उपलब्ध भाषण मान्यता के लिए 'अन्य' के रूप में शुरू किया गया है। निरंतर इनपुट शुरू होता है क्योंकि यह रेडियो बटन पर डिफ़ॉल्ट है। 'Onresult' फ़ंक्शन भाषण इनपुट के परिणामों को संभालेगा। यह प्रतिलेखन के पाठ क्षेत्र में जोड़ा जाएगा।

 var पहचानकर्ता = नई विंडो।
वाक् पहचान();
पहचानकर्ता। मौन = सत्य;
पहचानकर्ता। Onresult = फ़ंक्शन (ईवेंट) {
प्रतिलेखन। TextContent = '';
के लिए (var i = event.resultindex; i & lt; घटना।
परिणाम। लम्बाई; I ++) {

11. अंतिम या अंतरिम? [2 9]

यदि कथन अब यह देखने के लिए जांचता है कि उपयोगकर्ता टेक्स्ट प्रदर्शित करना चाहता है क्योंकि वे बात कर रहे हैं (अंतरिम) या केवल बोलने के बाद ही (अंतिम)। आप देखेंगे कि यदि यह अंतरिम है, तो प्रत्येक शब्द को '+ =' के साथ पाठ में जोड़ा जाता है, जबकि अंतिम केवल पूरे पाठ को डंप करता है।

 यदि (Event.Results [i] .isfinal) {
प्रतिलेखन। TextContent = Event.Results [i] 
। Transcript;
} अन्य {
प्रतिलेखन। TextContent + = Event.Results [i] 
। Transcript;
}
}
}; 

12. त्रुटियों को संभालना [2 9]

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

 पहचानकर्ता.ऑनरोर = समारोह (घटना) {
log.innerhtml = 'मान्यता त्रुटि:' +
Event.message + '& lt; br / & gt;' + log.innerhtml;
}; 

13. बोलना शुरू करो! [2 9]

यहां ईवेंट श्रोता प्रारंभ किया गया है जब उपयोगकर्ता बोलने के लिए बटन पर क्लिक करता है। यदि उपयोगकर्ता बोलने वाला नहीं है, तो बटन को बोलने के लिए रंग बदल जाता है, बोलने के लिए रंग बदल गया है, बोलने के लिए चर को सत्य पर सेट किया गया है और 'अंतरिम' रेडियो बटन की जांच की जाती है यह देखने के लिए कि क्या यह इनपुट के लिए उपयोगकर्ता की पसंद है या नहीं।

 start.addeventlistener ('क्लिक', फ़ंक्शन () {
अगर (बोल रहा है) {
बोलना = सच;
start.classlist.toggle ('रोकें');
पहचानकर्ता। interimresults = दस्तावेज़।
क्वेरीसेक्टर ('इनपुट [नाम = "पहचान
ऑन-टाइप "] [मान =" अंतरिम "] ')। जाँच की गई; 

14. इनपुट लें [2 9]

'ट्राई एंड कैच' कथन अब भाषण मान्यता शुरू करता है और उपयोगकर्ता को बताता है कि उन्हें बोलना शुरू करना चाहिए और जब वे किया जाता है, तो 'फिर से रोकने के लिए क्लिक करें'। कैच त्रुटि उठाएगा और इसे 'लॉग' div में फेंक देगा ताकि उपयोगकर्ता समझ सके कि क्या गलत हो सकता है।

 कोशिश करो {
पहचानकर्ता.स्टार्ट ();
log.innerhtml = 'अब बोलना शुरू करें
& lt; br / & gt; रोकने के लिए क्लिक करें ';
} पकड़ (पूर्व) {
log.innerhtml = 'मान्यता त्रुटि:
& lt; br / & gt; ' + EX.Message;
} 

15. रोकने के लिए क्लिक करें [2 9]

अब जब उपयोगकर्ता बात करने से रोकने के लिए क्लिक करता है, तो भाषण मान्यता रोक दी जाती है। बात करते समय बटन को लाल से हरे रंग में बदल दिया जाता है। उपयोगकर्ता इंटरफ़ेस अपडेट किया गया है ताकि उपयोगकर्ता को सूचित किया जा सके कि सेवा बंद हो गई है। बोलने वाला चर गलत पर सेट है, उपयोगकर्ता को फिर से बोलने के लिए तैयार है।

} और {
पहचानकर्ता.स्टॉप ();
start.classlist.toggle ('रोकें');
log.innerhtml = 'मान्यता रुक गई
& lt; br / & gt; बोलने के लिए क्लिक करें ';
बोलना = झूठा;
}
}); 

16. पाठ साफ़ करें [2 9]

इस खंड के लिए अंतिम कोड गलत तरीके से व्याख्या किए जाने पर भाषण इनपुट पाठ को हटाने के लिए एक स्पष्ट बटन है। फ़ाइल को सहेजें और अपने ब्राउज़र में इसका परीक्षण करें। आप कंप्यूटर में बोलने और परिणामों को देखने के लिए बटन पर क्लिक करने में सक्षम होंगे।

 clear.addeventlistener ('क्लिक', फ़ंक्शन () {प्रतिलेखन। TextContent = '';
});
} 

17. उद्देश्य जोड़ें [2 9]

अब जब आपके पास एक कामकाजी उदाहरण है, तो इंटरफ़ेस के लिए कुछ उद्देश्य होने की आवश्यकता है, तो आइए इसे बनाएं ताकि उपयोगकर्ता समीक्षा इनपुट कर सकें। पृष्ठ को सहेजें और फिर 'समीक्षा। Html' के नए नाम के साथ सहेजें चुनें। & Lt; div id = "रैपर" & gt; के बाद निम्नलिखित HTML तत्व जोड़ें; रेखा।

 & lt; h1 & gt; उत्पाद समीक्षा & lt; / h1 & gt;
& lt; div id = "समीक्षा" & gt; & lt; / div & gt; 

18. कुल जमा [2 9]

[20 9]

पिछला कोड समीक्षा आयोजित करेगा। उपयोगकर्ता को अपना भाषण इनपुट सबमिट करने की आवश्यकता होगी, इसलिए 'साफ़ टेक्स्ट' बटन के ठीक बाद सबमिट बटन जोड़ें, जो आपके कोड में 28 के आसपास होगा। फिर आप अगले चरण के लिए जावास्क्रिप्ट पर जा सकते हैं।

 & lt; बटन आईडी = "सबमिट करें" क्लास = "बटन" & gt; सबमिट समीक्षा & lt; / बटन & gt; 

19. नए इंटरफ़ेस तत्व [2 9]

अपनी जावास्क्रिप्ट के शीर्ष पर नए इंटरफ़ेस तत्वों के संदर्भों को रखने के लिए नए चर जोड़ें जिन्हें अभी जोड़ा गया है। ये आपको पृष्ठ के 'समीक्षा' अनुभाग में स्क्रीन पर परिणामों को जमा करने और प्रदर्शित करने का एक तरीका प्रदान करेंगे।

 var सबमिट = document.getElementByID ('सबमिट');
var समीक्षा = document.getElementByID ('समीक्षा'); 

20. प्रविष्टि जमा करें [2 9]

अब यहां कोड संभाल लेंगे जब उपयोगकर्ता सबमिट बटन पर क्लिक करता है, तो इसे 'साफ़ करें' बटन कोड से पहले इसे रखें, जो आपके कोड में 88 के आसपास होना चाहिए। सबसे पहले, एक अनुच्छेद टैग बनाया गया है और भाषण इनपुट को बाद में इसमें जोड़ा गया है। इसे तब 'समीक्षा' खंड में जोड़ा जाएगा।

 Submit.AddEventListener ('क्लिक', फ़ंक्शन () {
चलो p = document.createlement ('p');
var textnode = document.creatextnode
(प्रतिलेखन। Value);
p.appendchild (टेक्स्टनोड);
review.appendchild (पी);
आज = नई तारीख ();
एस = दस्तावेज़। Createlement ('छोटा'); 

21. अंतिम सबमिशन [2 9]

दिनांक जोड़ा जाता है ताकि समीक्षा दस्तावेज़ में टाइमस्टैम्प हो गई हो। अंत में एक क्षैतिज नियम यह दिखाने के लिए जोड़ा जाता है कि प्रत्येक समीक्षा कहां समाप्त होती है, तो पाठ को नए इनपुट के लिए तैयार किया जाता है। पृष्ठ को सहेजें और इसका परीक्षण करें। आप देखेंगे कि अब आप अपने भाषण को पेज में समीक्षा के रूप में सबमिट कर सकते हैं। दृढ़ता के लिए आपको इन परिणामों को स्टोर करने के लिए डेटाबेस का उपयोग करने की आवश्यकता होगी।

 TextNode = Document.CreateTextNode (आज);
s.appendchild (टेक्स्टनोड);
review.appendchild (ओं);
चलो एचआर = दस्तावेज़। Createlement ('एचआर');
review.appendchild (घंटा);
प्रतिलेखन। TextContent = '';
}); 

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका के अंक 286 में प्रकाशित किया गया था [1 1] वेब डिजाइनर

संबंधित आलेख:

• [1 1] 14 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई