ایک آواز کنٹرول UI کی تعمیر

ہم نے گزشتہ چند سالوں میں بہت سے نئے APIs کو ویب میں شامل کیا ہے جس نے واقعی ویب مواد کو ایک ہی قسم کی فعالیت حاصل کی ہے جیسے ہی بہت سے اطلاقات کچھ وقت کے لئے ہیں. ایک نسبتا نیا API تقریر کی شناخت API ہے، جس کے طور پر آپ شاید اندازہ لگا سکتے ہیں، آپ کو آپ کے متن کو صفحے پر ان پٹ کے طور پر استعمال کرنے کی اجازت دیتا ہے. یہ سروس شروع کرنے کے لئے اور دوبارہ روکنے کے لئے ایک کلک کی ضرورت ہوتی ہے.

اس کے لئے ایک عظیم کیس آپ کے صارفین کے درمیان رسائی کی اجازت دیتا ہے، آواز کے ان پٹ کو کلک کرنے کے متبادل کے طور پر. اگر آپ کے تجزیات سے پتہ چلتا ہے کہ آپ کے پاس بہت زیادہ موبائل براؤزنگ ہے، تو لگتا ہے کہ کی بورڈ کو استعمال کرنے سے کہیں زیادہ آپ کے فون میں بات کرنا آسان ہے.

وہاں پیش گوئی کی گئی ہے کہ اسکرین پر مبنی انٹرفیس دس سالوں کے اندر غائب ہوسکتی ہیں. سب سے پہلے یہ سائنس فکشن کی طرح آواز آتی ہے، لیکن جیسا کہ صارفین کو الیکسا اور سری کی پسند کے ذریعہ ان پٹ کے طور پر زیادہ سے زیادہ آرام دہ اور پرسکون ہو جاتا ہے، اس وجہ سے یہ اس وجہ سے ہے کہ یہ ان پٹ کے طریقہ کار کے طور پر وسیع ہو جائے گا. سبق یہاں آپ کو تقریر ان پٹ پر تیز کرنے کے لئے مل جائے گا اور پھر اس کا استعمال کریں کہ مصنوعات کے جائزے کو چھوڑ دیں ای کامرس سائٹ .

فائلوں کو ڈاؤن لوڈ کریں اس سبق کے لئے.

• وائس انٹرفیس ڈیزائن کرنے کے لئے 8 تجاویز

01. منصوبے شروع کریں

پروجیکٹ فائلوں کے فولڈر سے، آپ کے کوڈ IDE میں 'شروع' فولڈر کھولیں اور ترمیم کرنے کے لئے 'تقریر. html' فائل کھولیں. اس منصوبے کے لئے تمام سی ایس ایس لکھا جاتا ہے جیسا کہ تقریر API کی توجہ نہیں ہے، لہذا اس لنک کو SERIF Typeface حاصل کرنے کے لئے یہاں دکھایا گیا لنک شامل کریں اور سی ایس ایس فائل کو لنک کریں.

 & lt؛ لنک href = "https://fonts.googleapis.com/css؟family=noto+serif" rel = "styleSheet" اور GT؛
& lt؛ لنک REL = "Stylesheet" href = "سی ایس ایس / style.css" & gt؛ 

02. مواد شامل کریں

اس کے پہلے عناصر کو ایک لاپتہ ہونا پڑے گا جس میں ہماری تمام اسکرین مواد کو پکڑنے کے لۓ. یہاں میں پہلا عنصر ایک چھپی ہوئی پیغام ہو گا جس میں صارف کو بتاتا ہے کہ اگر براؤزر میں تقریر API کی حمایت کی جاتی ہے. یہ صرف دیکھا جائے گا اگر یہ نہیں ہے. اس کے بعد ایک سرخی صارف کو بتاتا ہے کہ فارم کے عناصر جو پیروی کرتے ہیں ان کے پیغام کے لئے استعمال کیا جائے گا.

 & lt؛ div id = "wrapper" & gt؛
& lt؛ اسپین کی شناخت = "غیر معاون" کلاس = "سپورٹ پوشیدہ" اور GT؛ تقریر API کی حمایت نہیں کی اور ایل ٹی؛ / اسپین اور GT؛
& lt؛ h2 & gt؛ آپ کا پیغام: & lt؛ / h2 & gt؛ 

03. نتائج کا انتخاب کریں

جب تقریر API کا استعمال کرتے ہوئے مواد کو ظاہر کرنے کے دو طریقے ہیں. ایک میں، متن ظاہر کرتا ہے جب صارف نے بولا اور 'سننے' کے بٹن پر کلک کیا جاتا ہے. دوسرے الفاظ کے طور پر اسکرین پر الفاظ دکھاتے ہیں. یہ پہلا ریڈیو بٹن حتمی تقریر کے نتیجے میں دکھایا جائے گا.

 & lt؛ div id = "typeofinput" & gt؛
& lt؛ اسپین اور GT؛ نتائج: & lt؛ / span & gt؛
& lt؛ لیبل اور جی ٹی؛
& lt؛ ان پٹ کی قسم = ریڈیو نام = شناختی قسم کی قیمت = فائنل اور جی ٹی؛ حتمی تقریر اور ایل ٹی؛ / لیبل اور جی ٹی؛ 

04. ریڈیو دو

دوسرا ریڈیو بٹن یہاں شامل کیا جاتا ہے اور یہ صارف کو صارف کو منتخب کرنے کے لئے متن کو منتخب کرنے کی اجازت دیتا ہے. یہ ریڈیو بٹن بعد میں جاوا اسکرپٹ کی طرف سے اٹھایا جائے گا اور تقریر ان پٹ کو کنٹرول کرنے کے لئے استعمال کیا جاتا ہے، لیکن اب یہ صارف کو کنٹرول کرنے کے لئے ایک انٹرفیس کرنے کی اجازت دیتا ہے.

 اور ایل ٹی؛ لیبل اور جی ٹی؛
& lt؛ ان پٹ کی قسم = ریڈیو نام = شناختی قسم کی قیمت = انٹرم چیک شدہ اور جی ٹی؛ جیسا کہ آپ بولتے ہیں اور لیفٹیننٹ / لیبل اور جی ٹی؛
& lt؛ / div & gt؛ 

05. متن دکھائیں

اس متن کو جو صارف صفحہ میں بولتا ہے وہ اسکرین پر ظاہر کرنے کی ضرورت ہوگی. یہاں ٹیکسٹ علاقے میں شامل کیا گیا ہے جس میں 'ٹرانسمیشن' کی شناخت ہے - یہ نشانہ بنایا جائے گا تاکہ صارف کی تقریر یہاں ختم ہوجائے. متن کو دور کرنے کے لئے ایک واضح بٹن بھی ہے.

 & lt؛ textarea id = "ٹرانسمیشن" Readonly & GT؛
& lt؛ / textarea & gt؛
& lt؛ br / & gt؛
& lt؛ بٹن کی شناخت = "واضح - تمام" کلاس = "بٹن" اور GT؛ واضح متن اور ایل ٹی؛ / بٹن اور جی ٹی؛ 

06. آخری انٹرفیس

آخری انٹرفیس عناصر اب اسکرین میں شامل ہیں. تقریر کے بٹن کو تقریر کو قابل بناتا ہے اور غیر فعال کرتا ہے، لہذا اس سے پہلے بات کرنے سے قبل اسے کلک کیا جانا چاہئے. دوبارہ کلک کریں اسے روکتا ہے. جیسا کہ یہ نسبتا نئی بات چیت ہے، ان کے نیچے لاگ ان صارفین کو کیا کرنا ہے.

& lt؛ div class = "بٹن - wrapper" & gt؛
    & lt؛ div id = "speechbutton" کلاس = "شروع" اور GT؛ & lt؛ / div & gt؛
  & lt؛ / div & gt؛
  & lt؛ div id = "لاگ" & gt؛ بات چیت شروع کرنے کے لئے کلک کریں اور ایل ٹی؛ / ڈی وی اور جی ٹی؛
& lt؛ / div & gt؛ 

07. جاوا اسکرپٹ شامل کریں

اب بند ہونے والے جسم کی ٹیگ سے پہلے سکرپٹ ٹیگ شامل کریں. یہ سب جاوا اسکرپٹ میں جائیں گے. پہلی دو لائنیں صفحہ عناصر کو ملاپ کی شناخت کے ساتھ قبضہ کرتے ہیں اور انہیں متغیر میں ذخیرہ کرتے ہیں. نقل و حمل کا متن کا نتیجہ ہے. لاگ ان صارف کو اس کا استعمال کیسے کرے گا.

 & lt؛ سکرپٹ اور جی ٹی؛
var ٹرانسمیشن = دستاویز. PagelementByID ('نقل و حمل')؛
var log = micture.getelementByid ('لاگ')؛
& lt؛ / script & gt؛ 

08. متغیر نتائج

اگلے چند متغیرات کا استعمال کرتے ہوئے، زیادہ انٹرفیس عناصر ان میں جا رہے ہیں. تقریر کا بٹن ایک ٹوگل بن جائے گا، صارفین کو تقریر کو اور بند کرنے کی اجازت دیتا ہے.، ایک بولین، حقیقی / غلط متغیر کی طرف سے نگرانی. واضح طور پر تمام بٹن غیر اطمینان بخش تقریر کے نتائج کو خارج کر دیں گے.

 وار شروع = دستاویز
var صاف = دستاویز. PagelementByid ('واضح' ')؛
وار بولنے = غلط؛ 

09. کیا اس کی حمایت کی جاتی ہے؟

پہلی بات یہ ہے کہ ہمارے کوڈ کو یہ پتہ چلتا ہے کہ اگر یہ تقریر کی خصوصیت صارف کے براؤزر کی طرف سے حمایت کی جاتی ہے. اگر یہ نتیجہ نچلے کے طور پر واپس آتا ہے تو پھر اگر بیان پوشیدہ پیغام کو پھینک دیتا ہے، جبکہ ایک ہی وقت میں شروع کے بٹن کو انٹرفیس سے دور تقریر ان پٹ کو روکنے کے لۓ لے جا رہا ہے.

 ونڈو. SpeechRecognition = ونڈو. SpeechReCognition ||
ونڈو. WebkitsPeechRecognition ||
خالی؛
اگر (ونڈو. SpeechRecognition === نپل) {
دستاویز. PagetelementById ('غیر معاون'). کلاسلسٹ. remove ('پوشیدہ')؛
start.classlist.add ('پوشیدہ')؛
} اور {

10. شناخت شروع کرو

تقریر کی شناخت دستیاب ہونے کے لئے 'اور' کے طور پر شروع کی گئی ہے. مسلسل ان پٹ شروع کر دیا گیا ہے کیونکہ یہ ریڈیو بٹن پر ڈیفالٹ ہے. 'orresult' تقریب تقریر ان پٹ کے نتائج کو سنبھال لیں گے. یہ ٹرانسمیشن کے ٹیکسٹ فیلڈ میں شامل کیا جائے گا.

 وار شناختی = نئی ونڈو.
تقریر Rextrecognition ()؛
تسلیم کنندہ. continuous = سچ؛
تسلیم کنندہ. result = تقریب (ایونٹ) {
ٹرانسمیشن. textcontent = ''؛
کے لئے (var i = event.resultindex؛ i & lt؛ واقعہ.
نتائج. طاقت؛ میں ++) {

11. حتمی یا عبوری؟

اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. براہ مہربانی دوبارہ کوشش کریں. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. براہ مہربانی دوبارہ کوشش کریں. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے. آپ کو یہ محسوس ہوگا کہ اگر یہ عبوری ہے تو، ہر لفظ کو '+ =' کے ساتھ متن میں شامل کیا جاتا ہے، جبکہ فائنل صرف اس میں پورے متن کو ڈمپ دیتا ہے.

 اگر (ایونٹ. results [i] .سفینل) {
ٹرانسمیشن. TextContent = Event.Results [i] 
 .transcript؛
} اور
ٹرانسمیشن. textcontent + = ایونٹ .results [i] 
 .transcript؛
}
}
}؛ 

12. ہینڈلنگ کی غلطیاں

جیسا کہ سب سے زیادہ جاوا اسکرپٹ APIS کے ساتھ ایک غلطی ہینڈلر ہے جو آپ کو اس بات کا فیصلہ کرنے کی اجازت دے گی کہ کسی بھی مسئلے کے ساتھ کیا کرنا ممکن ہو. یہ صارف کو رائے دینے کے لئے 'لاگ' ڈوی میں پھینک دیا جاتا ہے، کیونکہ یہ ضروری ہے کہ وہ اس بات سے واقف ہیں کہ انٹرفیس کے ساتھ کیا ہو سکتا ہے.

 تسلیم کنندہ .آرور = فنکشن (ایونٹ) {
log.innerhtml = 'شناخت کی خرابی:' +.
Event.Message + '& LT؛ BR / & GT؛' + log.innerhtml؛
}؛ 

13. بات چیت شروع کرو!

یہاں ایونٹ سننے والا شروع ہوتا ہے جب صارف بولنے کے لئے بٹن پر کلک کرتا ہے. اگر صارف بول نہیں رہا ہے، تو بٹن کو ظاہر کرنے کے لئے رنگ تبدیل ہوجاتا ہے تو، بولنے کے لئے متغیر صحیح طور پر مقرر کیا جاتا ہے اور 'انٹرم' ریڈیو بٹن کی جانچ پڑتال کی جاتی ہے کہ یہ ان پٹ کے لئے صارف کا انتخاب ہے.

 Start.Addeventlistener ('کلک'، فنکشن () {
اگر (! بول رہا ہے) {
بولنے = سچ؛
start.classlist.toggle ('سٹاپ')؛
تسلیم کنندہ. انٹرپرائزز = دستاویز.
سوالات کا انتخاب ('ان پٹ [نام = "تسلیم شدہ
آن قسم کی قسم "] [قدر =" انٹرم "] '). چیک کیا گیا 

14. ان پٹ لے لو

'کوشش اور پکڑو' بیان اب تقریر کی شناخت شروع ہوتی ہے اور صارف کو بتاتا ہے کہ انہیں بات شروع کرنا چاہئے اور جب وہ کئے جاتے ہیں تو 'روکنے کے لئے دوبارہ کلک کریں'. پکڑو غلطی اٹھاؤ گی اور اسے 'لاگ' ڈوی میں پھینک دیں گے تاکہ صارف سمجھ سکے کہ کیا غلط ہوسکتا ہے.

 کوشش کریں {
تسلیم کنندہ. اسٹارٹ ()؛
log.innerhtml = 'اب بات چیت شروع کریں
& lt؛ br / & gt؛ روکنے کے لئے کلک کریں '؛
} پکڑو (سابق) {
log.innerhtml = 'شناخت کی خرابی:
& lt؛ br / & gt؛ ' + EX.Message؛
} 

15. روکنے کے لئے کلک کریں

اب جب صارف بات چیت روکنے کے لئے کلک کرتا ہے تو، تقریر کی شناخت بند کردی گئی ہے. بات کرتے وقت بٹن سرخ سے سبز سے تبدیل کر دیا جاتا ہے. صارف انٹرفیس کو اپ ڈیٹ کیا جاتا ہے تاکہ صارف کو بتایا جائے کہ سروس بند ہو گئی ہے. بولنے والی متغیر غلط، صارف کو دوبارہ بات کرنے کے لئے تیار کرنے کے لئے تیار ہے.

} اور
تسلیم کنندہ .STOP ()؛
start.classlist.toggle ('سٹاپ')؛
log.innerhtml = 'تسلیم روک دیا
& lt؛ br / & gt؛ بات کرنے کے لئے کلک کریں '؛
بول رہا ہے = غلط؛
}
})؛ 

16. متن صاف کریں

اس سیکشن کے لئے حتمی کوڈ صرف ایک واضح بٹن ہے جس میں یہ غلطی کی تشریح کی گئی ہے. فائل کو محفوظ کریں اور یہ آپ کے براؤزر میں ٹیسٹ کریں. آپ کمپیوٹر میں بات کرنے اور نتائج کو دیکھنے کے لئے بٹن پر کلک کرنے کے قابل ہو جائیں گے.

 Clear.Addeventlistener ('کلک'، فنکشن () {ٹرانسمیشن. textcontent = ''؛
})؛
} 

17. مقصد شامل کریں

اب آپ کے پاس ایک کام کرنے والی مثال ہے، انٹرفیس کے لئے کچھ مقصد کی ضرورت ہے، لہذا ہمیں ایسا کرنے کی اجازت دی جاسکتی ہے کہ صارفین ان پٹ جائزے کرسکتے ہیں. صفحے کو محفوظ کریں اور پھر 'جائزے. html' کے نئے نام کے ساتھ محفوظ کریں. مندرجہ ذیل HTML عناصر کو صرف & lt؛ div id = "wrapper" & gt کے بعد شامل کریں؛ لائن

 & lt؛ H1 اور GT؛ پروڈکٹ کا جائزہ اور ایل ٹی؛ / H1 اور GT؛
& lt؛ div id = "جائزے" اور GT؛ & lt؛ / div & gt؛ 

18. کل جمع کرانے

پچھلے کوڈ جائزے کو برقرار رکھے گی. صارف کو ان کی تقریر ان پٹ جمع کرنے کی ضرورت ہوگی، لہذا 'واضح متن' کے بٹن کے بعد جمع شدہ بٹن کو شامل کریں، جو آپ کے کوڈ میں 28 لائن کے ارد گرد ہو گی. اس کے بعد آپ اگلے مرحلے کے لئے جاوا اسکرپٹ میں منتقل کر سکتے ہیں.

 & lt؛ بٹن کی شناخت = "جمع" کلاس = "بٹن" & gt؛ جائزہ لیں اور ایل ٹی؛ / بٹن اور جی ٹی؛ 

19. نیا انٹرفیس عناصر

آپ کے جاوا اسکرپٹ کے سب سے اوپر میں نئے متغیرات شامل کریں نئے انٹرفیس عناصر کے حوالہ جات کو پکڑنے کے لئے جو صرف شامل کیا گیا ہے. یہ آپ کو صفحے کے 'جائزے' سیکشن کے اندر اسکرین پر نتائج جمع کرنے اور ظاہر کرنے کا ایک طریقہ فراہم کرے گا.

 var جمع کرائیں = دستاویز. PicelementByidd ('جمع کرائیں')؛
Var نظر ثانی شدہ = دستاویز. PagelementByID ('جائزے')؛ 

20. داخلہ جمع کرو

اب یہاں کوڈ ہینڈل کرے گا جب صارف جمع شدہ بٹن پر کلک کرتا ہے، 'واضح' بٹن کوڈ کوڈ سے پہلے اس کا حق رکھتا ہے، جو آپ کے کوڈ میں 88 لائن کے ارد گرد ہونا چاہئے. سب سے پہلے، ایک پیراگراف ٹیگ پیدا کیا جاتا ہے اور اس کے بعد تقریر ان پٹ اس میں شامل کیا جاتا ہے. اس کے بعد 'جائزہ لینے کے سیکشن میں شامل کیا جائے گا.

 prustt.addeventlistener ('کلک'، فنکشن () {
پی = دستاویز. createelment ('p') دو
var textnode = دستاویز. createtextnode.
(ٹرانسمیشن. value)؛
P.AppendChild (Textnode)؛
جائزہ .appendchild (p)؛
آج دو = نئی تاریخ ()؛
ایس = دستاویز. createelment ('چھوٹا')؛ 

21. حتمی جمع کرانے

تاریخ کو شامل کیا جاسکتا ہے کہ جائزہ اس دستاویز میں ٹائمسٹیمپیا جاتا ہے. آخر میں ایک افقی حکمرانی کو ظاہر کرنے کے لئے شامل کیا جاتا ہے کہ ہر جائزہ کو ختم ہوجاتا ہے، تو متن نئے ان پٹ کے لئے تیار ہے. صفحے کو محفوظ کریں اور اسے آزمائیں. آپ دیکھیں گے کہ اب آپ اپنی تقریر کو جائزے کے طور پر صفحے میں جمع کر سکتے ہیں. مسلسل آپ کو ان نتائج کو ذخیرہ کرنے کے لئے ڈیٹا بیس کا استعمال کرنے کی ضرورت ہوگی.

 textnode = دستاویز. creattexttextnode (آج)؛
S.AppendChild (TextNode)؛
جائزہ .appendchild؛
HR = دستاویز. Createelment ('HR') دو
جائزہ .appendchild (HR)؛
ٹرانسمیشن. textcontent = ''؛
})؛ 

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین کے مسئلہ 286 میں شائع کیا گیا تھا ویب ڈیزائنر . مسئلہ 286 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .

متعلقہ مضامین:

• سب سے بہترین جاوا اسکرپٹ Apis کے 14
• AI طاقتور چیٹ بٹ کی تعمیر کریں
• 2019 میں 5 ابھرتی ہوئی UX رجحانات