สร้าง UI ควบคุมด้วยเสียง

Sep 11, 2025

วิธีการ

เราได้เห็น API ใหม่จำนวนมากที่เพิ่มเข้ามาในเว็บในช่วงไม่กี่ปีที่ผ่านมาที่เปิดใช้งานเนื้อหาเว็บที่เปิดใช้งานจริง ๆ เพื่อให้มีฟังก์ชั่นแบบเดียวกันกับแอพจำนวนมากที่มีบางครั้ง API ที่ค่อนข้างใหม่คือ API การรู้จำเสียงดังที่คุณอาจคาดเดาให้คุณใช้ข้อความเป็นอินพุตบนหน้า ต้องใช้คลิกเพื่อเริ่มบริการและหยุดอีกครั้ง

กรณีที่ยอดเยี่ยมสำหรับสิ่งนี้อาจช่วยให้ผู้ใช้งานของคุณสามารถเข้าถึงเสียงเป็นทางเลือกในการคลิก หากการวิเคราะห์ของคุณแสดงให้เห็นว่าคุณมีการท่องเว็บบนมือถือจำนวนมากแล้วคิดว่ามันง่ายแค่ไหนที่จะพูดในโทรศัพท์ของคุณมากกว่าการใช้แป้นพิมพ์

มีการคาดการณ์ว่าอินเทอร์เฟซบนหน้าจออาจเริ่มหายไปภายในสิบปี ตอนแรกสิ่งนี้อาจฟังดูคล้ายกับนิยายวิทยาศาสตร์ แต่เนื่องจากผู้ใช้รู้สึกสะดวกสบายมากขึ้นด้วยการพูดเป็นอินพุตผ่านการชื่นชมของ Alexa และ Siri นั้นเป็นเหตุผลที่ว่าสิ่งนี้จะกลายเป็นวิธีการป้อนข้อมูลที่แพร่หลาย บทช่วยสอนที่นี่จะช่วยให้คุณได้รับความเร็วในการป้อนคำพูดจากนั้นใช้สิ่งนั้นเพื่อออกความคิดเห็นของผลิตภัณฑ์ใน เว็บไซต์อีคอมเมิร์ซ .

ดาวน์โหลดไฟล์ สำหรับการกวดวิชานี้

8 เคล็ดลับสำหรับการออกแบบอินเตอร์เฟสเสียง

01. เริ่มโครงการ

Build a voice controlled UI: Start the project — ไม่ต้องกังวลกับ CSS เป็นที่เขียนอยู่แล้ว [รูปภาพ: นักออกแบบเว็บไซต์]

จากโฟลเดอร์ไฟล์โครงการให้เปิดโฟลเดอร์ 'เริ่ม' ในรหัสของคุณ IDE และเปิดไฟล์ 'speech.html' เพื่อแก้ไข CSS ทั้งหมดสำหรับโครงการเขียนขึ้นเนื่องจากไม่ใช่จุดสนใจของคำพูด API ดังนั้นเพิ่มลิงค์ที่แสดงที่นี่เพื่อรับ Noto Serif Typeface และเชื่อมโยงไฟล์ CSS ขึ้น

 & lt; ลิงค์ href = "https://fonts.gleapis.com/css?family=noto+serif" rel = "stylesheet" & gt;
& lt; link rel = "stylesheet" href = "css / style.css" & gt;

02. เพิ่มเนื้อหา

องค์ประกอบแรกของสิ่งนี้จะมีการห่อหุ้มที่จะเก็บเนื้อหาบนหน้าจอทั้งหมดของเรา องค์ประกอบแรกในที่นี่จะเป็นข้อความที่ซ่อนอยู่ที่บอกผู้ใช้ว่าคำพูด API ได้รับการสนับสนุนในเบราว์เซอร์ สิ่งนี้จะเห็นได้หากไม่ใช่ จากนั้นหัวเรื่องจะบอกผู้ใช้ว่าองค์ประกอบแบบฟอร์มที่ตามมาจะถูกใช้สำหรับข้อความของพวกเขา

 & lt; div id = "wrapper" & gt;
& lt; span id = "ไม่สนับสนุน" class = "support hidden" & gt; คำพูด API ไม่รองรับ & lt; / span & gt;
& lt; h2 & gt; ข้อความของคุณ: & lt; / h2 & gt;

03. เลือกผลลัพธ์

เมื่อใช้คำพูด API มีสองวิธีในการแสดงเนื้อหา ในหนึ่งข้อความแสดงเมื่อผู้ใช้หยุดพูดและปุ่ม 'ฟัง' ถูกคลิกออก อื่น ๆ แสดงคำบนหน้าจอตามที่พูด ปุ่มตัวเลือกแรกนี้ช่วยให้สามารถแสดงผลลัพธ์การพูดครั้งสุดท้ายได้

 & lt; div id = "typefinput" & gt;
& lt; span & gt; ผลลัพธ์: & lt; / span & gt;
& lt; ฉลาก & gt;
& lt; input type = ชื่อวิทยุ = ค่าการจดจำ = final & gt; คำพูดสุดท้าย & lt; / ฉลาก & gt;

04. วิทยุสอง

ปุ่มตัวเลือกที่สองจะถูกเพิ่มที่นี่และอันนี้ช่วยให้ผู้ใช้สามารถเลือกข้อความที่จะแสดงได้ตามที่พวกเขาพูด ปุ่มตัวเลือกวิทยุเหล่านี้จะถูกหยิบขึ้นมาโดย JavaScript ในภายหลังและใช้เพื่อควบคุมอินพุตคำพูด แต่ตอนนี้สิ่งนี้ช่วยให้ผู้ใช้สามารถมีอินเทอร์เฟซเพื่อควบคุมได้

 & lt; ฉลาก & gt;
& lt; ประเภทอินพุต = ชื่อวิทยุ = ค่าประเภทการจดจำ = การตรวจสอบระหว่างกาล & GT; ในขณะที่คุณพูด & lt; / ฉลาก & gt;
& lt; / div & gt;

05. แสดงข้อความ

Build a voice controlled UI: Display the text — คำพูดของผู้ใช้จะจบลงในพื้นที่ข้อความ 'การถอดความ' [ภาพ: นักออกแบบเว็บไซต์]

ข้อความที่ผู้ใช้พูดในหน้าจะต้องแสดงบนหน้าจอ ที่นี่มีการเพิ่มพื้นที่ข้อความที่มี ID ของ 'การถอดความ' ซึ่งจะถูกกำหนดเป้าหมายเพื่อให้คำพูดของผู้ใช้สิ้นสุดลงที่นี่ นอกจากนี้ยังมีปุ่มชัดเจนเพื่อลบข้อความ

 & lt; textarea id = "การถอดความ" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; id ปุ่ม = "clear-blass =" ปุ่ม "& gt; ล้างข้อความ & lt; / ปุ่ม & gt;

06. อินเทอร์เฟซสุดท้าย

Build a voice controlled UI: The last interface — การคลิกปุ่มคำพูดเริ่มต้นและหยุดการตรวจจับคำพูด [ภาพ: นักออกแบบเว็บไซต์]

องค์ประกอบอินเทอร์เฟซสุดท้ายจะถูกเพิ่มไปยังหน้าจอตอนนี้ ปุ่ม Speech เปิดใช้งานและปิดใช้งานคำพูดดังนั้นจึงต้องคลิกก่อนพูด คลิกอีกครั้งหยุดมัน เนื่องจากเป็นปฏิสัมพันธ์ที่ค่อนข้างใหม่บันทึกการเข้าสู่ระบบจะบอกผู้ใช้ว่าต้องทำอย่างไร

& lt; div class = "ปุ่ม - wrapper" & gt;
    & lt; div id = "sipressbutton" class = "start" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "บันทึก" & gt; คลิกเพื่อเริ่มการพูด & lt; / div & gt;
& lt; / div & gt;

07. เพิ่ม JavaScript

ตอนนี้เพิ่มแท็กสคริปต์ก่อนที่จะปิดแท็กร่างกาย นี่คือที่จาวาสคริปต์ทั้งหมดจะไป สองบรรทัดแรกคว้าองค์ประกอบของหน้าด้วย ID ที่ตรงกันและเก็บไว้ในตัวแปร การถอดความเป็นผลข้อความของคำพูด บันทึกจะอัปเดตผู้ใช้ด้วยวิธีการใช้งาน

 & lt; สคริปต์ & gt;
var transcription = document.getElementbyid ('การถอดความ');
var log = document.getElementbyid ('บันทึก');
& lt; / สคริปต์ & gt;

08. ผลลัพธ์ตัวแปร

การใช้ตัวแปรสองสามตัวถัดไปองค์ประกอบของอินเทอร์เฟซจะถูกแคชไว้ในนั้น ปุ่ม Speech จะกลายเป็นสลับช่วยให้ผู้ใช้เปลี่ยนคำพูดในและปิดตรวจสอบโดยบูลีนตัวแปรจริง / เท็จ ปุ่มชัดเจนทั้งหมดจะลบผลลัพธ์การพูดที่น่าพอใจ

 var start = document.getElementbyid ('sijeeButton');
var clear = document.getElementbyid ('ชัดเจนทั้งหมด');
var พูด = false;

09. รองรับหรือไม่

สิ่งแรกที่โค้ดของเราจะทำคือดูว่าคุณสมบัติการพูดนี้ได้รับการสนับสนุนจากเบราว์เซอร์ของผู้ใช้หรือไม่ หากผลลัพธ์นี้กลับมาเป็น NULL หากคำสั่งถ้าข้อความที่ซ่อนอยู่ในขณะที่ใช้ปุ่มเริ่มต้นพร้อมกันให้อยู่ห่างจากอินเทอร์เฟซเพื่อหยุดการป้อนเสียง

 window.speechrecognition = window.speechrecognition ||
window.webkitspeechrecognition ||
null;
ถ้า (window.speechrecognition === null) {
Document.GetElementByID ('ไม่สนับสนุน') ClassList.Remove ('ซ่อน');
start.classlist.add ('ซ่อน');
} อื่น {

10. เริ่มการรับรู้

การรู้จำเสียงเริ่มต้นเป็น 'อื่น' สำหรับการรู้จำเสียงที่มีอยู่ อินพุตอย่างต่อเนื่องเริ่มต้นตามที่เป็นค่าเริ่มต้นบนปุ่มตัวเลือก ฟังก์ชั่น 'OnResult' จะจัดการกับผลลัพธ์ของอินพุตคำพูด สิ่งนี้จะถูกเพิ่มเข้าไปในฟิลด์ข้อความของการถอดความ

 ตัวจำแนก var = หน้าต่างใหม่
การขอสุนทรพจน์ ();
จำได้. ผิดปกติ = true;
Recognizer.onresult = ฟังก์ชั่น (กิจกรรม) {
transcription.textcontent = '';
สำหรับ (var i = event.resultindex; i & lt; เหตุการณ์
ผลลัพธ์ความยาว; i ++) {

11. สุดท้ายหรือระหว่างกาล?

คำสั่ง IF ตอนนี้ตรวจสอบเพื่อดูว่าผู้ใช้ต้องการแสดงข้อความตามที่พวกเขากำลังพูดถึง (ชั่วคราว) หรือหลังจากที่พวกเขาพูดเสร็จ (สุดท้าย) เท่านั้น คุณจะสังเกตเห็นว่าหากเป็นระหว่างกาลแต่ละคำจะถูกเพิ่มลงในข้อความด้วย '+ =' ในขณะที่สุดท้ายเพียงแค่ทิ้งข้อความทั้งหมดในนั้น

 ถ้า (event.results [i] .sfinal) {
transcription.textcontent = event.results [i] . thtranscript;
} อื่น {
transcription.textcontent + = event.results [i] . thtranscript;
}
}
};

12. การจัดการข้อผิดพลาด

เช่นเดียวกับ JavaScript API ส่วนใหญ่มีตัวจัดการข้อผิดพลาดที่จะช่วยให้คุณตัดสินใจว่าจะทำอย่างไรกับปัญหาใด ๆ ที่อาจเกิดขึ้น สิ่งเหล่านี้ถูกโยนลงไปใน DIV 'บันทึก' เพื่อให้ข้อเสนอแนะแก่ผู้ใช้เนื่องจากเป็นสิ่งสำคัญที่พวกเขาตระหนักถึงสิ่งที่อาจเกิดขึ้นกับอินเทอร์เฟซ

 refremizer.onerror = ฟังก์ชั่น (กิจกรรม) {
log.innerhtml = 'ข้อผิดพลาดการรับรู้:' +
event.message + '& lt; br / & gt;' + log.innerhtml;
};

13. เริ่มพูด!

ผู้ฟังกิจกรรมที่นี่เริ่มต้นเมื่อผู้ใช้คลิกที่ปุ่มเพื่อเริ่มการพูด หากผู้ใช้ไม่ได้พูดปุ่มจะเปลี่ยนสีเพื่อแสดงการพูดเริ่มต้นขึ้นตัวแปรสำหรับการพูดถูกตั้งค่าเป็นจริงและปุ่มตัวเลือก 'ระหว่างกาล' จะถูกตรวจสอบว่านี่เป็นตัวเลือกของผู้ใช้สำหรับอินพุตหรือไม่

 start.addeventlistener ('คลิก' ฟังก์ชั่น () {
ถ้า (! พูด) {
พูด = จริง;
start.classlist.toggle ('หยุด');
recomsizer.interimresults = เอกสาร
queryselector ('อินพุต [name = "remoniti
แบบ on-type "] [value =" interim "] ') ตรวจสอบ;

14. นำอินพุต

ตอนนี้คำสั่ง 'TRY and Catch' เริ่มการจดจำเสียงพูดและบอกผู้ใช้ว่าพวกเขาควรเริ่มพูดและเมื่อพวกเขาทำเสร็จแล้ว 'คลิกอีกครั้งเพื่อหยุด' การจับจะรับข้อผิดพลาดและโยนลงใน DIV 'บันทึก' เพื่อให้ผู้ใช้สามารถเข้าใจสิ่งที่อาจผิด

 ลอง {
จำได้ ();
log.innerhtml = 'เริ่มพูดตอนนี้
& lt; br / & gt; คลิกเพื่อหยุด ';
} catch (ex) {
log.innerhtml = 'ข้อผิดพลาดการรับรู้:
& lt; br / & gt; ' + ex.message;
}

15. คลิกเพื่อหยุด

ตอนนี้เมื่อผู้ใช้คลิกที่จะหยุดพูดการรู้จำเสียงหยุดลง ปุ่มถูกเปลี่ยนกลับเป็นสีเขียวจากสีแดงขณะพูดคุย อัปเดตส่วนต่อประสานผู้ใช้เพื่อให้ผู้ใช้ทราบว่าบริการหยุดทำงาน ตัวแปรการพูดถูกตั้งค่าเป็นเท็จพร้อมที่จะให้ผู้ใช้พูดอีกครั้ง

} อื่น {
Recognizer.stop ();
start.classlist.toggle ('หยุด');
การจดจำ log.innerhtml = 'หยุดทำงาน
& lt; br / & gt; คลิกเพื่อพูด ';
พูด = เท็จ;
}
});

16. ล้างข้อความ

Build a voice controlled UI: Clear the text — ปุ่มที่ชัดเจนลบคำพูดที่ตีความผิด ๆ [ภาพ: นักออกแบบเว็บไซต์]

รหัสสุดท้ายสำหรับส่วนนี้เป็นเพียงปุ่มชัดเจนเพื่อลบข้อความอินพุตคำพูดในกรณีที่มีการตีความผิดอย่างผิด ๆ บันทึกไฟล์และทดสอบสิ่งนี้ในเบราว์เซอร์ของคุณ คุณจะสามารถคลิกปุ่มเพื่อพูดลงในคอมพิวเตอร์และดูผลลัพธ์

 clear.addeventristener ('คลิก', ฟังก์ชั่น () {transcription.textcontent = '';
});
}

17. เพิ่มจุดประสงค์

ตอนนี้ในขณะที่คุณมีตัวอย่างที่ทำงานจะต้องมีจุดประสงค์บางอย่างในการเชื่อมต่อดังนั้นเรามาทำสิ่งนี้เพื่อให้ผู้ใช้สามารถใส่ความคิดเห็นได้ บันทึกหน้าแล้วเลือกบันทึกเป็นชื่อใหม่ของ 'Review.html' เพิ่มองค์ประกอบ html ต่อไปนี้หลังจาก & lt; div id = "wrapper" & gt; ไลน์.

 & lt; h1 & gt; รีวิวผลิตภัณฑ์ & lt; / h1 & gt;
& lt; div id = "รีวิว" & gt; & lt; / div & gt;

18. การส่งทั้งหมด

Build a voice controlled UI: Total submission — ปุ่มส่งส่งคำพูดของ Inputted [ภาพ: นักออกแบบเว็บไซต์]

รหัสก่อนหน้านี้จะถือความคิดเห็น ผู้ใช้จะต้องส่งอินพุตคำพูดของพวกเขาดังนั้นเพิ่มปุ่มส่งทันทีหลังจากปุ่ม 'ข้อความที่ชัดเจน' ซึ่งจะอยู่ที่ประมาณ 28 ในรหัสของคุณ จากนั้นคุณสามารถเลื่อนลงไปที่ JavaScript สำหรับขั้นตอนต่อไป

 & lt; ปุ่มปุ่ม = "ส่ง" Class = "ปุ่ม" & GT; ส่งรีวิว & lt; / ปุ่ม & gt;

19. องค์ประกอบอินเทอร์เฟซใหม่

ที่ด้านบนของ JavaScript ของคุณเพิ่มตัวแปรใหม่เพื่อเก็บข้อมูลอ้างอิงไปยังองค์ประกอบอินเทอร์เฟซใหม่ที่เพิ่งเพิ่ม สิ่งเหล่านี้จะให้วิธีการส่งและแสดงผลลัพธ์บนหน้าจอภายในส่วน 'ความคิดเห็น' ของหน้า

 var submit = document.getelementbyid ('ส่ง');
Var Review = Document.GetElementByID ('ความคิดเห็น');

20. ส่งรายการ

ตอนนี้รหัสที่นี่จะจัดการเมื่อผู้ใช้คลิกที่ปุ่มส่งให้วางสิ่งนี้ให้ถูกต้องก่อนที่โค้ดปุ่ม 'ล้าง' ซึ่งควรอยู่ที่แถว 88 ในรหัสของคุณ ครั้งแรกที่มีการสร้างแท็กย่อหน้าและอินพุตคำพูดจะถูกเพิ่มเข้ามาในภายหลัง สิ่งนี้จะถูกเพิ่มเข้าไปในส่วน 'รีวิว'

 submit.addeventlistener ('คลิก' ฟังก์ชั่น () {
ให้ p = document.createelement ('p');
var textnode = document.createtextnode
(transcription.value);
p.appendchild (textnode);
รีวิว. Appendchild (p);
ให้วันนี้ = วันที่ใหม่ ();
ให้ s = document.createelement ('เล็ก');

21. การส่งครั้งสุดท้าย

Build a voice controlled UI: Final submission — หากคุณต้องการจัดเก็บคำพูดที่ส่งคุณจะต้องใช้ฐานข้อมูล [รูปภาพ: นักออกแบบเว็บไซต์]

วันที่จะถูกเพิ่มเพื่อให้การตรวจสอบนั้นติดตั้งในเอกสาร ในที่สุดกฎแนวนอนจะถูกเพิ่มเพื่อแสดงว่าการตรวจสอบแต่ละครั้งจบลงแล้วข้อความจะถูกล้างให้พร้อมสำหรับอินพุตใหม่ บันทึกหน้าและทดสอบนี้ คุณจะเห็นว่าตอนนี้คุณสามารถส่งคำพูดของคุณเข้าสู่หน้าเป็นความคิดเห็น สำหรับการคงอยู่คุณจะต้องใช้ฐานข้อมูลเพื่อเก็บผลลัพธ์เหล่านี้

 textnode = document.createtextnode (วันนี้);
s.appendchild (textnode);
รีวิว. Appendchild;
ให้ hr = document.createelement ('hr');
รีวิว. Appendchild (HR);
transcription.textcontent = '';
});

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 286 ของนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . ซื้อปัญหา 286 ที่นี่ หรือ สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

14 ของ apis JavaScript ที่ดีที่สุด
สร้าง chatbot ที่ขับเคลื่อนด้วย AI
5 แนวโน้ม UX ที่เกิดขึ้นใหม่ในปี 2019

สร้าง UI ควบคุมด้วยเสียง

01. เริ่มโครงการ

02. เพิ่มเนื้อหา

03. เลือกผลลัพธ์

04. วิทยุสอง

05. แสดงข้อความ

06. อินเทอร์เฟซสุดท้าย

07. เพิ่ม JavaScript

08. ผลลัพธ์ตัวแปร

09. รองรับหรือไม่

10. เริ่มการรับรู้

11. สุดท้ายหรือระหว่างกาล?

12. การจัดการข้อผิดพลาด

13. เริ่มพูด!

14. นำอินพุต

15. คลิกเพื่อหยุด

16. ล้างข้อความ

17. เพิ่มจุดประสงค์

18. การส่งทั้งหมด

19. องค์ประกอบอินเทอร์เฟซใหม่

20. ส่งรายการ

21. การส่งครั้งสุดท้าย

วิธีการ - บทความยอดนิยม

การแต่งกายในแอนิเมชั่น: เรียนรู้พื้นฐาน

วาดพลังของความคมชัดในศิลปะ

วิธีการโพสต์ใหม่บน Instagram

หยุดบอทด้วย Google recaptcha

วิธีการสร้างมนุษย์หมาป่า 3 มิติใน Unreal Engine

สร้างฝนดาวตกใน 3DS Max

สร้างเอฟเฟกต์สแปลชใน Realflow

วิธีการสร้างสภาพแวดล้อมฤดูหนาว

หมวดหมู่