יישומי אינטרנט של דיבור – מבוא ל-Speech Synthesis API

Web Speech API מוסיף זיהוי קולי (דיבור לטקסט) וסינתזת דיבור (טקסט לדיבור) ל-JavaScript. בפוסט מתואר בקצרה על הפרטים השניים, מאחר שה-API הגיע לאחרונה ל-Chrome 33 (נייד ומחשב). אם התעניינת בזיהוי דיבור, הכתיבה של Glen Shires הייתה מעולה לפני זמן מה לגבי תכונת הזיהוי הקולי, "Voice Driven Web Apps: Introduction to the 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), הראיתי הדגמה דמוית-Siri של Google Now/Siri על שימוש בשירות SpeechRecognition של Web Speech API עם Google Translate API כדי לתרגם באופן אוטומטי קלט של מיקרופון לשפה אחרת:

הדגמה: http://www.moreawesomeweb.com/demos/speech_translate.html

לצערנו, המערכת השתמשה ב-API לא מתועד (ולא רשמי) כדי לבצע את סינתזת הדיבור. עכשיו יש לנו את ממשק ה-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!
}