שליטה קולית באתרים: Speech API, הכתבה, TTS

Firefox ו-Safari חוסמים את SpeechRecognition המקורי — עד 30% מהמשתמשים מאבדים את פונקציונליות בקרת הקול. זמן התגובה הממוצע הוא 1.2 שניות. אנו פותרים זאת עם גישה היברידית: ממשק API של הדפדפן כעיקרי עבור Chrome ו-Edge, ו-Whisper מ-OpenAI כגיבוי לדפדפנים אחרים. גישה זו מפחיתה את זמן התגובה ל-1–4 שניות ומכסה 100% מהדפדפנים. במעל 30 פרויקטים, אספנו מקרי שימוש: הקלדה קולית ב-CRM, שליטה במצגות, חיפוש קולי במסחר אלקטרוני. סטטיסטיקות מראות שיותר מ-60% ממשתמשי הנייד מעדיפים קלט קולי על פני הקלדה. Whisper משיג דיוק של 95% אפילו בהקלטות רועשות.

מהו Web Speech API?

Web Speech API הוא תקן W3C הכולל זיהוי דיבור (ASR) וסינתזת דיבור (TTS). הוא מאפשר הוספת אינטראקציה קולית ללא ספריות חיצוניות. עם זאת, בשל מגבלות ב-Firefox ו-Safari, נדרש גיבוי בצד השרת. SpeechRecognition של הדפדפן זמין רק ב-Chrome/Edge, בעוד ש-SpeechSynthesis עובד בכל מקום, אך עם הסתייגויות (חיתוך טקסט ארוך).

למה לשלב ASR של דפדפן ו-Whisper לבקרת קול?

ASR של דפדפן מספק תגובה מיידית ועלות אפסית לכל בקשה. Whisper מבטיח פעולה בכל דפדפן ואיכות גבוהה על שמע רועש. השילוב חוסך עד 30% מזמן הפיתוח: אין צורך לכתוב צינור מורכב בצד השרת — פרוקסי פשוט מספיק. העלות לכל בקשה ל-Whisper היא כ-$0.006 לדקת שמע, בעוד ש-ASR של דפדפן הוא חינמי. המשתמשים מקבלים חוויה חלקה.

ASR מקורי מגיב פי 2 מהר יותר מ-Whisper, אך Whisper מדויק פי 1.5 בהקלטות רועשות — השילוב מספק איזון אופטימלי.

איך עובד זיהוי דיבור

כדי להתחיל, אנו מבקשים הרשאת מיקרופון באמצעות getUserMedia. ה-API המקורי מחזיר תוצאות ביניים וסופיות. אנו מעבדים אותן בזמן אמת: מציגים טקסט ביניים באפור, וסופי בשחור. זה ידידותי למשתמש — הם רואים שהזיהוי מתבצע. התצורה המרכזית היא מצב continuous: להקלדת טקסטים ארוכים אנו מאפשרים הקלטה רציפה; לפקודות קוליות, הקלטה של משפט בודד חוסכת רוחב פס.

מקרה בוחן: חיפוש קולי עם גיבוי Whisper — בקרת קול לאתר

עבור לקוח מסחר אלקטרוני, יישמנו חיפוש קולי: המשתמש לוחץ על כפתור, אומר את שם המוצר, והתוצאה מופיעה מיד. עבור Chrome השתמשנו ב-SpeechRecognition המקורי; עבור Firefox/Safari הקלטנו שמע באמצעות MediaRecorder ושלחנו אותו ל-/api/transcribe, שמעביר את הבקשה ל-Whisper API. זמן תגובה: 1-2 שניות למקורי, 2-4 ל-Whisper. לאחר ההשקה, שיעור ההמרה בחיפוש עלה ב-15%, ועומס התמיכה ירד ב-20% (משתמשים הקלידו פחות טקסט ידנית). טיפול בשגיאות: אנו מציגים הודעות ברורות — "הגישה למיקרופון נדחתה", "לא זוהה דיבור", "שגיאת רשת". המשתמש תמיד יודע מה השתבש.

סינתזת דיבור (טקסט לדיבור)

TTS (SpeechSynthesis) נתמך בכל מקום, אך יש ניואנסים: ב-Chrome, טקסטים ארוכים (~500 תווים) נחתכים אחרי 15 שניות. פתרנו זאת על ידי השהיה/חידוש בגבולות משפטים — הסינתיסייזר לא נתקע. אנו גם בוחרים קולות: לרוסית, 3-4 קולות זמינים לכל מערכת הפעלה; ניתן לבחור ספציפי. פרטים נוספים ב-MDN Web Speech API.

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'ru-RU';
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = (event) => {
  for (let i = event.resultIndex; i < event.results.length; i++) {
    const transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      console.log('Final:', transcript);
    } else {
      console.log('Interim:', transcript);
    }
  }
};
recognition.start();

תהליך יישום תכונות קוליות

1. אנליטיקה — קביעת אילו תרחישים נדרשים (חיפוש קולי, הקלדה, פקודות), הערכת סביבת הדפדפן של המשתמשים (לדוגמה, 60% Chrome, 20% Safari, 20% Firefox).
2. עיצוב — בחירת ארכיטקטורה: ASR מקורי + גיבוי Whisper, תצורת TTS. ציור זרימת UX (כפתור, מצב המתנה, תוצאה).
3. יישום — כתיבת React hooks const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); recognition.lang = 'ru-RU'; recognition.continuous = true; recognition.interimResults = true; recognition.onresult = (event) => { for (let i = event.resultIndex; i < event.results.length; i++) { const transcript = event.results[i][0].transcript; if (event.results[i].isFinal) { console.log('Final:', transcript); } else { console.log('Interim:', transcript); } } }; recognition.start(); , useSpeechRecognition, מחלקה useVoiceCommands. כיסוי הקוד בבדיקות יחידה (Jest).
4. בדיקות — אימות ב-Chrome, Firefox, Safari, iOS, Android. תיקון באגים (לדוגמה, הבדלים ב-TextToSpeech).
5. השקה — העלאה לשרת בדיקות, ביצוע בדיקות עומס של TTS (משתמשים במקביל), לאחר אישור — עלייה לאוויר.

לוחות זמנים ומה כלול

לוחות זמנים משוערים: חיפוש קולי או הקלדה — מיומיים; פקודות קוליות + TTS — מ-3 ימים; שילוב גיבוי Whisper — +יום אחד. העלות מחושבת באופן אישי. עלות פונקציית Serverless עבור Whisper — מ-$0.20 לחודש בעומס נמוך.

מה כלול במסירה:

• קוד React/TypeScript עובד עם hooks ורכיבים.
• תיעוד ב-README (תיאור API, דוגמאות, הוראות השקה).
• תצורת פונקציית Serverless עבור Whisper (אם נדרש גיבוי).
• הדרכת צוות (הדגמת וידאו של שעה).
• אחריות על קוד — 30 יום לאחר המסירה (תיקוני באגים).

רשימת טעויות נפוצות

אנו מדגישים 5 טעויות נפוצות ביישום תכונות קוליות:

• אי בדיקת תמיכת דפדפן — המשתמש רואה ממשק ריק.
• אי טיפול בשגיאת webkitSpeechRecognition — אין גיבוי כשהמיקרופון נדחה.
• בהקלדה ארוכה, not-allowed לא מוגדר — ההקלטה נעצרת.
• TTS ב-Chrome נחתך בטקסטים ארוכים — אין פתרון (השהיה/חידוש).
• מדיניות השמעה אוטומטית חוסמת TTS בטעינת עמוד — נדרשת פעולת משתמש.

העריכו את הפוטנציאל של בקרת קול לפרויקט שלכם — צרו קשר לייעוץ. הזמינו ביקורת לאתר שלכם לתאימות ממשק קולי. מידע נוסף על Web Speech API ניתן למצוא בתיעוד הרשמי של MDN.