היום למדתי: טקסט לדיבור באפליקציות ווב

21/04/2023

אחד התחומים שמאוד התקדם בשנים האחרונות ובמיוחד עם תנופת ה AI הוא דיבור מלאכותי. מחשב היום יכול לדבר בצורה שוטפת. אמזון פולי לדוגמה יכול לייצר דיבור שנשמע ממש טבעי ולפעמים משתלם להשקיע ולעבור דרך השרת שלהם.

מצד שני לפעמים אנחנו צריכים פיתרון מהיר שפשוט יגיד כמה מילים, ומוכנים להתפשר על האיכות. בשביל המצבים האלה נוכל להשתמש ב Web Speech API. בואו נראה איך זה עובד:

  1. האוביקט SpeechSynthesisUtterance מייצג משהו שאנחנו רוצים להגיד. יוצרים אותו עם new והפרמטר היחיד הוא הטקסט (אפשר בכל שפה).

  2. בשדה voice של אותו Utterance אנחנו כותבים את הקול שאנחנו רוצים שיגיד את המשפט. אפשר לקבל את רשימת כל הקולות מ speechSynthesis.getVoices(). יש עוד כמה שדות באוביקט זה שמאפשרים לנו לבקש ממנו לדבר יותר מהר או להתאים פרמטרים אחרים.

  3. אחרי שיש לנו Utterance מוכן נשלח אותו לפונקציה speak של window.speechSynthesis כדי לשמוע אותו.

קוד? בטח. לחצו על הכפתור בקודפן כדי לשמוע את כרמית אומרת בעברית "היו שלום ותודה על הדגים":

וזה הקוד:

synth =  window.speechSynthesis;
voice = synth.getVoices().find(v => v.lang === "he-IL");

text = new SpeechSynthesisUtterance("היו שלום ותודה על הדגים");
text.voice = voice;

function say() {
  synth.speak(text);
}

btn.addEventListener('click', say);