JavaScript Web Speech API ใหม่ช่วยให้การเพิ่มการจดจำคำพูดลงในหน้าเว็บเป็นเรื่องง่าย API นี้ช่วยให้ควบคุมและมีความยืดหยุ่นในความสามารถในการจดจำคำพูดใน Chrome เวอร์ชัน 25 ขึ้นไป นี่เป็นตัวอย่างข้อความที่รู้จักซึ่งจะปรากฏขึ้นเกือบจะทันทีขณะพูด
มาดูเบื้องหลังกัน ก่อนอื่น เราจะตรวจสอบว่าเบราว์เซอร์รองรับ Web Speech API หรือไม่โดยตรวจสอบว่ามีออบเจ็กต์ webkitSpeechRecognition
อยู่ไหม หากไม่ เราขอแนะนำให้ผู้ใช้อัปเกรดเบราว์เซอร์ (เนื่องจาก API ยังอยู่ในขั้นทดลอง ปัจจุบันจึงนำหน้าด้วยผู้ให้บริการแทน) สุดท้ายนี้ เราสร้างออบเจ็กต์ 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
คือ false ซึ่งหมายความว่าเมื่อผู้ใช้หยุดพูด การรู้จำคำพูดจะสิ้นสุดลง โหมดนี้เหมาะสำหรับข้อความง่ายๆ เช่น ช่องป้อนข้อมูลสั้นๆ ในการสาธิตนี้ เราตั้งค่าเป็น "จริง" ดังนั้นการจดจำจะดำเนินต่อไปแม้ว่าผู้ใช้จะหยุดในขณะที่พูด
ค่าเริ่มต้นสำหรับ interimResults
คือ "เท็จ" ซึ่งหมายความว่าผลลัพธ์เดียวที่เครื่องมือจดจำจะแสดงเป็นผลลัพธ์สุดท้ายและจะไม่มีการเปลี่ยนแปลง การสาธิตนี้จะตั้งค่าเป็น "จริง" เราจึงได้รับผลลัพธ์ชั่วคราวตั้งแต่เนิ่นๆ ซึ่งอาจมีการเปลี่ยนแปลง ดูการสาธิตอย่างละเอียด ข้อความสีเทาเป็นข้อความชั่วคราวและบางครั้งมีการเปลี่ยนแปลง ขณะที่ข้อความสีดำเป็นคำตอบจากโปรแกรมจดจำที่ทำเครื่องหมายว่าเป็นที่สิ้นสุดและจะไม่มีการเปลี่ยนแปลง
ในการเริ่มต้นใช้งาน ผู้ใช้สามารถคลิกปุ่มไมโครโฟนซึ่งจะเรียกใช้โค้ดนี้
function startButton(event) {
...
final_transcript = '';
recognition.lang = select_dialect.value;
recognition.start();
เราตั้งค่าภาษาพูดสำหรับโปรแกรมจดจำเสียงพูด "lang" เป็นค่า BCP-47 ที่ผู้ใช้เลือกผ่านรายการแบบเลื่อนลงสำหรับการเลือก ตัวอย่างเช่น "en-US" สำหรับภาษาอังกฤษ-สหรัฐอเมริกา หากไม่ได้ตั้งค่าไว้ ค่าเริ่มต้นจะเป็นภาษาขององค์ประกอบรากและลำดับชั้นของเอกสาร HTML การรู้จำคำพูดของ 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);
};
}
ตัวแฮนเดิลนี้จะเชื่อมโยงผลลัพธ์ทั้งหมดที่ได้รับจนถึงปัจจุบันเป็น 2 สตริง ได้แก่ final_transcript
และ interim_transcript
สตริงที่ได้อาจมี "\n" เช่น เมื่อผู้ใช้พูด "ย่อหน้าใหม่" เราจึงใช้ฟังก์ชัน linebreak
เพื่อแปลงสตริงเหล่านี้เป็นแท็ก HTML <br>
หรือ <p>
สุดท้าย จะกำหนดสตริงเหล่านี้เป็น inlineHTML ขององค์ประกอบ <span>
ที่เกี่ยวข้องซึ่งได้แก่ final_span
ซึ่งจัดรูปแบบด้วยข้อความสีดำและ interim_span
ที่จัดรูปแบบด้วยข้อความสีเทา
interim_transcript
เป็นตัวแปรภายใน และจะสร้างขึ้นใหม่ทั้งหมดทุกครั้งที่มีการเรียกใช้เหตุการณ์นี้ เนื่องจากผลลัพธ์ชั่วคราวทั้งหมดอาจมีการเปลี่ยนแปลงนับตั้งแต่เหตุการณ์ onresult
ล่าสุด เราสามารถทำแบบเดียวกันนี้สำหรับ final_transcript
ได้ง่ายๆ ด้วยการเริ่มลูปที่ 0 อย่างไรก็ตาม เนื่องจากข้อความสุดท้ายไม่มีการเปลี่ยนแปลง เราจึงปรับปรุงโค้ดในส่วนนี้ให้มีประสิทธิภาพมากขึ้นโดยทำให้ final_transcript
เป็นส่วนกลาง เพื่อให้เหตุการณ์นี้สามารถเริ่มต้นการวนซ้ำที่ event.resultIndex
และต่อท้ายเฉพาะข้อความสุดท้ายใหม่เท่านั้น
เท่านี้ก็เรียบร้อย โค้ดที่เหลือก็มีไว้เพื่อทำให้ทุกอย่างดูดี โดยจะรักษาสถานะ แสดงข้อความที่ให้ข้อมูลบางส่วนแก่ผู้ใช้ และสลับรูปภาพ GIF บนปุ่มไมโครโฟนระหว่างไมโครโฟนนิ่ง รูปภาพเครื่องหมายทับไมค์ และภาพเคลื่อนไหวของไมค์โดยมีจุดสีแดงกะพริบ
รูปภาพสแลชของไมค์จะแสดงเมื่อมีการเรียก recognition.start()
จากนั้นแทนที่ด้วยไมค์เคลื่อนไหวเมื่อ onstart
เริ่มทำงาน โดยปกติขั้นตอนนี้จะเกิดขึ้นอย่างรวดเร็วจนไม่สามารถสังเกตได้ แต่เมื่อมีการใช้การจดจำคำพูดเป็นครั้งแรก Chrome จะต้องขอสิทธิ์ในการใช้ไมโครโฟนจากผู้ใช้ ซึ่งในกรณีนี้ onstart
จะเริ่มทำงานก็ต่อเมื่อผู้ใช้อนุญาตเท่านั้น หน้าที่โฮสต์บน HTTPS ไม่จำเป็นต้องขอสิทธิ์ซ้ำๆ ในขณะที่หน้าที่โฮสต์ HTTP จะทำเช่นนั้น
ดังนั้น ทำให้หน้าเว็บของคุณมีชีวิตชีวาโดยเปิดให้หน้าเว็บรับฟังผู้ใช้ของคุณ!
เราอยากทราบความคิดเห็นของคุณ...
- สำหรับความคิดเห็นเกี่ยวกับข้อกำหนดของ W3C Web Speech API: อีเมล, ที่เก็บอีเมลถาวร, กลุ่มชุมชน
- สำหรับความคิดเห็นเกี่ยวกับการปรับใช้ข้อกำหนดนี้ของ Chrome: อีเมล การส่งอีเมลที่เก็บถาวร
โปรดอ่านสมุดปกขาวเรื่องความเป็นส่วนตัวของ Chrome เพื่อดูวิธีที่ Google จัดการข้อมูลเสียงจาก API นี้