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

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

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

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> สุดท้ายนี้ ระบบจะตั้งค่าสตริงเหล่านี้เป็น InsideHTML ขององค์ประกอบ <span> ที่ตรงกัน: final_span ซึ่งจัดรูปแบบด้วยข้อความสีดำ และ interim_span ซึ่งได้รับการจัดรูปแบบเป็นข้อความสีเทา

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

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

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

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

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

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