เว็บแอปที่ขับเคลื่อนด้วยเสียง - ข้อมูลเบื้องต้นเกี่ยวกับ Web Speech API

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

การสาธิต Web Speech API

การสาธิต / แหล่งที่มา

มาดูเบื้องหลังกัน ก่อนอื่น เราจะตรวจสอบว่าเบราว์เซอร์รองรับ 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 จะทำเช่นนั้น

ดังนั้น ทำให้หน้าเว็บของคุณมีชีวิตชีวาโดยเปิดให้หน้าเว็บรับฟังผู้ใช้ของคุณ!

เราอยากทราบความคิดเห็นของคุณ...

โปรดอ่านสมุดปกขาวเรื่องความเป็นส่วนตัวของ Chrome เพื่อดูวิธีที่ Google จัดการข้อมูลเสียงจาก API นี้