שימוש ב־API טקסט לדיבור (TTS) עם JavaScript יכול לשדרג משמעותית את חוויית המשתמש באפליקציות ווב. Web Speech API, הנתמך בדפדפנים מודרניים כמו כרום ופיירפוקס, מספק כלים מתקדמים לקריאת טקסט ולהכתבת דיבור. במדריך זה נלמד איך לשלב API כזה בקוד, להמיר טקסט לדיבור, להגדיר אפשרויות ולהשתמש בקולות זמינים.
מתחילים עם JavaScript וטקסט לדיבור
כדי להתחיל, דרוש ידע בסיסי ב־HTML, CSS ו־JavaScript. צרו קובץ HTML וקשרו את קובץ ה־JavaScript שלכם עם תג <script src>. בקובץ ה־JS אתחלו את אובייקט הדיבור וקבעו event כאשר הקולות נטענים. const synth = window.speechSynthesis; // חכו לטעינת הקולות synth.onvoiceschanged = () => { const voices = synth.getVoices(); // עשו משהו עם הקולות הזמינים }; אחרי שהקולות נטענים, אפשר לגשת אליהם בעזרת synth.getVoices(). תקבלו רשימת קולות לשימוש. עברו על הקולות עם forEach והציגו אותם ב־HTML. const voiceSelect = document.getElementById('voice-select'); voices.forEach((voice) => { const option = document.createElement('option'); option.textContent = ${voice.name} (${voice.lang}); option.setAttribute('value', voice.lang); voiceSelect.appendChild(option); }); לאחר מכן, צרו פונקציה שמקריאה טקסט עם הקול שנבחר. הפונקציה מקבלת את הטקסט משדה textarea ומשתמשת בקול כדי ליצור דיבור. const speak = () => { const text = document.getElementById('text-input').value; const voice = voices[voiceSelect.selectedIndex]; const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; synth.speak(utterance); }; הוסיפו מאזין לאירוע לכפתור/שליחה שיפעיל את הפונקציה. const button = document.getElementById('speak-button'); button.addEventListener('click', speak); עם קטע קוד קצר זה אפשר להמיר טקסט לדיבור בזמן אמת. התאימו מהירות, גובה ועוצמה של הדיבור דרך SpeechSynthesisUtterance: utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; תוך כדי חקר Web Speech API תמצאו גם יכולות להכתבה ושליטה באירועי דיבור. מומלץ לעיין בתיעוד הרשמי לעוד פרטים ואטריביוטים.
שילוב חלק עם Speechify
בעת שימוש ב־API טקסט לדיבור עם JavaScript, Speechify בולט כבחירה מצוינת. אינטגרציה פשוטה עם Web Speech API מקלה על המרת טקסט לקול מיידית. תיעוד מקיף ומדריכים ברורים עוזרים לכל מפתח, מתחיל או מנוסה. יש מגוון קולות לבחירה ואפשרות להתאים מהירות וגובה הדיבור. Speechify הוא כלי אידיאלי לשדרוג אפליקציות ווב וליצירת חוויית משתמש נגישה ומרתקת. בשורה התחתונה, טקסט לדיבור עם JavaScript פותח אפשרויות חדשות לפיתוח ווב. שילוב קריאת טקסט יוצר חוויות משתמש נגישות ואינטראקטיביות ומעשיר את ארגז הכלים של המפתחים. נסו זאת ותנו לדפי הווב שלכם חיים עם כוח הדיבור.
