Web Speech API เพิ่มการจดจําเสียง (การพูดเป็นข้อความ) และการสังเคราะห์เสียง (การอ่านออกเสียงข้อความ) ลงใน JavaScript โพสต์นี้กล่าวถึงเรื่องหลังโดยสังเขป เนื่องจาก API เพิ่งเปิดตัวใน Chrome 33 (อุปกรณ์เคลื่อนที่และเดสก์ท็อป) หากสนใจการจดจําคําพูด Glen Shires เขียนบทความที่ยอดเยี่ยมเกี่ยวกับฟีเจอร์การจดจําคําพูดไว้เมื่อไม่นานมานี้ในหัวข้อ "เว็บแอปที่ขับเคลื่อนด้วยเสียง: ข้อมูลเบื้องต้นเกี่ยวกับ Web Speech API"
พื้นฐาน
การใช้งาน Synthesis API ขั้นพื้นฐานที่สุดคือการส่ง speechSynthesis.speak() และคำพูด ดังนี้
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
อย่างไรก็ตาม คุณยังปรับเปลี่ยนพารามิเตอร์เพื่อส่งผลต่อระดับเสียง ความเร็วในการพูด ระดับเสียง เสียง และภาษาได้ด้วย โดยทำดังนี้
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';
msg.onend = function(e) {
console.log('Finished in ' + event.elapsedTime + ' seconds.');
};
speechSynthesis.speak(msg);
การตั้งค่าเสียง
นอกจากนี้ API ยังช่วยให้คุณดูรายการเสียงที่เครื่องมือรองรับได้ด้วย
speechSynthesis.getVoices().forEach(function(voice) {
console.log(voice.name, voice.default ? voice.default :'');
});
จากนั้นตั้งค่าเสียงอื่นโดยตั้งค่า .voice ในออบเจ็กต์คำพูด ดังนี้
var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);
สาธิต
ในการบรรยาย Google I/O 2013 เรื่อง "More Awesome Web: ฟีเจอร์ที่คุณต้องการมาตลอด" (www.moreawesomeweb.com) เราได้แสดงการสาธิตการใช้งานบริการ SpeechRecognition ของ Web Speech API ร่วมกับ Google Translate API เพื่อแปลอินพุตจากไมโครโฟนเป็นภาษาอื่นโดยอัตโนมัติ ซึ่งคล้ายกับ Google Now/Siri ดังนี้
สาธิต: http://www.moreawesomeweb.com/demos/speech_translate.html
แต่น่าเสียดายที่แอปใช้ API ที่ไม่มีเอกสารประกอบ (และไม่เป็นทางการ) เพื่อดำเนินการสังเคราะห์เสียง ตอนนี้เรามี Web Speech API แบบสมบูรณ์ที่อ่านออกเสียงคำแปลให้ฟัง เราได้อัปเดต demo ให้ใช้ Synthesis API แล้ว
การรองรับเบราว์เซอร์
Chrome 33 รองรับ Web Speech API อย่างเต็มรูปแบบ ส่วน Safari สำหรับ iOS7 รองรับเพียงบางส่วน
การตรวจหาองค์ประกอบ
เนื่องจากเบราว์เซอร์อาจรองรับแต่ละส่วนของ Web Speech API แยกกัน (เช่น ในกรณีของ Chromium) คุณจึงอาจต้องตรวจหาแต่ละฟีเจอร์แยกกัน ดังนี้
if ('speechSynthesis' in window) {
// Synthesis support. Make your web apps talk!
}
if ('SpeechRecognition' in window) {
// Speech recognition support. Talk to your apps!
}