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

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

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

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

โปรดดูนโยบายความเป็นส่วนตัวของเราที่ทำความเข้าใจความเป็นส่วนตัวใน Chrome (อัปเดต: 16 มิ.ย. 2026)