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

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

การสาธิต Web Speech API

DEMO / SOURCE

เรามาเจาะลึกกัน ก่อนอื่น เราจะตรวจสอบว่าเบราว์เซอร์รองรับ 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 คือเท็จ ซึ่งหมายความว่าเมื่อผู้ใช้หยุดพูด การจดจำคำพูดจะสิ้นสุดลง โหมดนี้เหมาะสําหรับข้อความธรรมดา เช่น ช่องป้อนข้อมูลสั้นๆ ในการสาธิตนี้ เราตั้งค่าเป็น "จริง" เพื่อให้การจดจําทำงานต่อไปแม้ว่าผู้ใช้จะหยุดพูดชั่วคราว

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

ในการเริ่มต้นใช้งาน ผู้ใช้คลิกปุ่มไมโครโฟน ซึ่งจะทริกเกอร์โค้ดนี้

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

เราตั้งค่าภาษาที่พูดสำหรับ "lang" ของตัวจดจำคำพูดเป็นค่า BCP-47 ที่ผู้ใช้เลือกผ่านรายการแบบเลื่อนลง เช่น "en-US" สำหรับภาษาอังกฤษแบบสหรัฐอเมริกา หากไม่ได้ตั้งค่านี้ ระบบจะใช้ lang ขององค์ประกอบรูทและลําดับชั้นของเอกสาร 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> สุดท้าย โค้ดจะตั้งค่าสตริงเหล่านี้เป็น innerHTML ขององค์ประกอบ <span> ที่เกี่ยวข้อง ซึ่งก็คือ final_span ที่มีการจัดรูปแบบเป็นข้อความสีดํา และ interim_span ที่มีการจัดรูปแบบเป็นข้อความสีเทา

interim_transcript คือตัวแปรภายใน และระบบจะสร้างใหม่ทั้งหมดทุกครั้งที่มีการเรียกเหตุการณ์นี้ เนื่องจากผลลัพธ์ชั่วคราวทั้งหมดอาจเปลี่ยนแปลงไปนับตั้งแต่เหตุการณ์ onresult รายการล่าสุด เราทําแบบเดียวกันสําหรับ final_transcript ได้โดยเริ่มลูป for ที่ 0 อย่างไรก็ตาม เนื่องจากข้อความสุดท้ายไม่มีการเปลี่ยนแปลง เราจึงทำให้โค้ดที่นี่มีประสิทธิภาพมากขึ้นเล็กน้อยโดยทำให้ final_transcript เป็นตัวแปรส่วนกลาง เพื่อให้เหตุการณ์นี้เริ่มลูป for ที่ event.resultIndex และเพิ่มข้อความสุดท้ายใหม่ต่อท้ายเท่านั้น

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

รูปภาพไมโครโฟนที่มีเครื่องหมายทับจะแสดงเมื่อเรียก recognition.start() จากนั้นระบบจะแทนที่ด้วย mic-animate เมื่อ onstart เริ่มทำงาน โดยปกติแล้ว การดำเนินการนี้จะรวดเร็วมากจนผู้ใช้มองไม่เห็นเครื่องหมายทับ แต่หากมีการใช้การจดจำคำพูดเป็นครั้งแรก Chrome จะต้องขอสิทธิ์จากผู้ใช้เพื่อใช้ไมโครโฟน ซึ่งในกรณีนี้ onstart จะทำงานก็ต่อเมื่อผู้ใช้ให้สิทธิ์เท่านั้น หน้าเว็บที่โฮสต์ใน HTTPS ไม่จำเป็นต้องขอสิทธิ์ซ้ำๆ แต่หน้าเว็บที่โฮสต์ใน HTTP จะต้องขอสิทธิ์ซ้ำๆ

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

เรายินดีรับฟังความคิดเห็นจากคุณ...

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