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

Web Speech API מוסיף ל-JavaScript זיהוי דיבור (המרת דיבור לטקסט) וסינתז דיבור (המרת טקסט לדיבור). בפוסט הזה נסביר בקצרה על האפשרות השנייה, כי ה-API נוסף לאחרונה ל-Chrome 33 (לנייד ולמחשב). אם אתם מתעניינים בזיהוי דיבור, לפני זמן מה Glen Shires פרסם סקירה מעולה על התכונה 'זיהוי דיבור', בשם Voice Driven Web Apps: Introduction to the 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, 'More Awesome Web: features you've always wanted' (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 המלא כדי לקרוא בחזרה את התרגום! עדכנתי את הדמו כך שישתמש ב-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!
}