ภาษา JavaScript ที่เราใช้กันอยู่นั้นมีส่วนเชื่อมต่อหนึ่งที่ช่วยให้หน้าเว็บหรือโปรแกรมที่เราเขียนสามารถอ่านออกเสียงได้ นั่นคือ Web Speech API. สำหรับเว็บเบราว์เซอร์ที่รองรับนั้นก็รองรับเป็นส่วนมากแล้วสำหรับโค้ดที่สั่งให้ออกเสียงจากตัวหนังสือ อาทิเช่น Google Chrome, Firefox, Edge, Opera. สำหรับคำสั่งที่ให้ออกเสียงจากตัวหนังสือนั้น โดยหลักๆเราจะใช้แค่ window.speechSynthesis กับ SpeechSynthesisUtterance() เท่านั้น ดังตัวอย่างต่อไปนี้.
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('hello');
synth.speak(utterance);เมื่อโหลดหน้าเว็บที่มีโค้ดด้านบนนี้ เบราว์เซอร์ก็จะส่งเสียง hello ออกมา. แต่ถ้าเราเปลี่ยนจากคำว่า hello เป็นภาษาไทย เช่น สวัสดี เป็นต้น ก็จะอาจจะไม่มีเสียงใดๆเนื่องจากระบบและค่าเริ่มต้นของภาษานั้นไม่รองรับ ให้เราทำการเพิ่ม utterance.lang = 'th-TH'; ก็จะสามารถอ่านภาษาไทยได้แล้ว.
สำหรับการตั้งค่าอื่นๆ เรายังกำหนดได้อีก ผ่าน properties ต่างๆ เช่น เสียงที่จะใช้ (voice), ความสูงต่ำของเสียง (pitch), ความเร็วในการพูด (rate), ความดัง (volume) ทั้งนี้ขอให้คุณผู้อ่านคลิกดูเอกสารอ้างอิงจากลิ้งค์ในชื่อ class ที่ระบุด้านบนของบทความ. คุณผู้อ่านสามารถเข้าไปทดลองตัวอย่างที่ผมได้เขียนไว้แล้วได้ที่ https://jsfiddle.net/y7eLp8g4/ หรือ https://codepen.io/ve3/pen/MYWzEwg.
ตัวอย่าง
ปัญหา
การไม่สามารถอ่านตัวเลขที่มีจำนวนเยอะๆได้ เช่นเลข 123455669 จะไม่สามารถอ่านออกมาเป็นจำนวนร้อยล้านได้เลย ทั้งภาษาไทยและอังกฤษ จากการทดสอบบน Windows Firefox, Windows Edge. แต่มันจะสามารถอ่านได้ถ้าหากเพิ่มเครื่องหมาย , ให้ทุกๆ 3 หลัก เช่นเลข 123,455,669 เป็นต้น. ดังนั้นในส่วนนี้หากต้องการให้อ่านออกมาเป็นแบบใด จำเป็นจะต้องเขียนโค้ดเพิ่มเติมในการตรวจสอบและแก้ไขก่อนส่งให้ตัวโปรแกรมทำการอ่านในลำดับต่อมา.
การอ่านออกเสียงไม่ตรงภาษาของค่าเริ่มต้น. จากการทดสอบบน Android Google Chrome พบว่า เมื่อเขียนโค้ดที่พื้นฐานที่สุด แล้วเรียกใช้ property lang เข้าไป สลับกับไม่ใช้ พบว่าบางครั้งตัวโปรแกรมจะค้างเอาค่า property lang ของเก่ามาใช้ ทำให้การออกเสียงไม่ตรงค่าเริ่มต้นหรือเป็นไปตามที่ต้องการ. ทางแก้ไขคือให้กำหนดค่า property lang ทุกครั้ง.
