เว็บแอปพลิเคชันที่พูดได้ - ข้อมูลเบื้องต้นเกี่ยวกับ API การสังเคราะห์เสียง

Web Speech API เพิ่มการจดจำเสียง (การแปลงคำพูดเป็นข้อความ) และการสังเคราะห์เสียงพูด (การอ่านออกเสียงข้อความ) ลงใน JavaScript โพสต์นี้จะพูดถึงอย่างคร่าวๆ เนื่องจากเพิ่งมีการนำ API ไปไว้ใน Chrome 33 (อุปกรณ์เคลื่อนที่และเดสก์ท็อป) เมื่อเร็วๆ นี้ หากคุณสนใจด้านการรู้จำคำพูด Glen Shires เขียนขึ้นได้อย่างดีเยี่ยมเมื่อกลับมาใช้ฟีเจอร์การจดจำเสียง "เว็บแอปที่ขับเคลื่อนด้วยเสียง: ข้อมูลเบื้องต้นเกี่ยวกับ Web Speech API"

พื้นฐาน

การใช้งาน 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 ของฉันเรื่อง "เว็บไซต์สุดเจ๋งเพิ่มเติม: ฟีเจอร์ที่คุณต้องการเสมอ" (www.moreawesomeweb.com) เราได้แสดงการสาธิตการใช้งานแบบ Google Now/Siri เกี่ยวกับการใช้บริการ SpeechRecognition ของ Web Speech API กับ Google Translate API เพื่อแปลอินพุตไมโครโฟนเป็นภาษาอื่นโดยอัตโนมัติ ดังนี้

การสาธิต: http://www.moreawesomeweb.com/demos/speech_translate.html

แต่น่าเสียดายที่มีการใช้ API ที่ไม่ได้บันทึกไว้ (และไม่เป็นทางการ) ในการสังเคราะห์เสียง ตอนนี้เรามี Web Speech API เต็มรูปแบบที่จะตอบกลับคำแปลได้แล้ว ฉันได้อัปเดตการสาธิตให้ใช้ 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!
}