אפליקציות אינטרנט מבוססות-Voice – מבוא ל-Web Speech API

ה-JavaScript Web Speech API החדש מאפשר להוסיף בקלות זיהוי דיבור לדפי האינטרנט. ממשק ה-API הזה מאפשר שליטה מדויקת וגמישות ביכולות זיהוי הדיבור ב-Chrome מגרסה 25 ואילך. הנה דוגמה שבה הטקסט המזוהה מופיע כמעט מיד בזמן הדיבור.

הדגמה של Web Speech API

הדגמה / מקור

בואו נבדוק מה קורה מאחורי הקלעים. קודם כל, אנחנו בודקים אם הדפדפן תומך ב-Web Speech API על ידי בדיקה אם האובייקט webkitSpeechRecognition קיים. אם לא, אנחנו מציעים למשתמש לשדרג את הדפדפן. (מכיוון שה-API עדיין ניסיוני, הוא כרגע כולל קידומת ספק). לבסוף, אנחנו יוצרים את האובייקט webkitSpeechRecognition שמספק את ממשק הדיבור, ומגדירים חלק מהמאפיינים ומטפלי האירועים שלו.

if (!('webkitSpeechRecognition' in window)) {
    upgrade();
} else {
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = true;

    recognition.onstart = function() { ... }
    recognition.onresult = function(event) { ... }
    recognition.onerror = function(event) { ... }
    recognition.onend = function() { ... }
    ...

ערך ברירת המחדל של continuous הוא false, כלומר, כשהמשתמש מפסיק לדבר, זיהוי הדיבור מסתיים. המצב הזה מצוין לטקסט פשוט כמו שדות קלט קצרים. בהדגמה הזו, הגדרנו את הערך כ-True, כדי שהזיהוי יימשך גם אם המשתמש מפסיק לדבר.

ערך ברירת המחדל של interimResults הוא false, כלומר התוצאות היחידות שמוחזרות על ידי הכלי לזיהוי דיבור הן סופיות ולא ישתנו. בסרטון ההדגמה, הערך מוגדר כ-true כדי לקבל תוצאות מוקדמות וזמניות שעשויות להשתנות. צריך לצפות בהדגמה בקפידה. הטקסט האפור הוא טקסט זמני שלפעמים משתנה, ואילו הטקסט השחור הוא תשובות מהמערכת לזיהוי דיבור שמסומנות כסופיות ולא ישתנו.

כדי להתחיל, המשתמש לוחץ על לחצן המיקרופון, שמפעיל את הקוד הזה:

function startButton(event) {
    ...
    final_transcript = '';
    recognition.lang = select_dialect.value;
    recognition.start();

הגדרנו את השפה המדוברת של מזהה הדיבור lang לערך BCP-47 שהמשתמש בחר באמצעות התפריט הנפתח, לדוגמה en-US לאנגלית בארצות הברית. אם לא מוגדר ערך, ברירת המחדל היא lang של רכיב הבסיס וההיררכיה של מסמך ה-HTML. זיהוי הדיבור ב-Chrome תומך בשפות רבות (אפשר לראות את הטבלה langs במקור ההדגמה), וגם בשפות מסוימות שנקראות מימין לשמאל שלא נכללות בהדגמה הזו, כמו he-IL ו-ar-EG.

אחרי שמגדירים את השפה, קוראים ל-recognition.start() כדי להפעיל את מזהה הדיבור. אחרי שהיא מתחילה ללכוד אודיו, היא קוראת ל-onstart גורם מטפל באירועים, ואז לכל קבוצה חדשה של תוצאות, היא קוראת ל-onresult גורם מטפל באירועים.

recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
        } else {
            interim_transcript += event.results[i][0].transcript;
        }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
    };
}

ה-handler הזה משרשר את כל התוצאות שהתקבלו עד עכשיו לשני מחרוזות: final_transcript ו-interim_transcript. המחרוזות שמתקבלות עשויות לכלול את התו '‎\n‎', למשל כשהמשתמש אומר 'פסקה חדשה', ולכן אנחנו משתמשים בפונקציה linebreak כדי להמיר אותן לתגי HTML‏ <br> או <p>. בסיום, הוא מגדיר את המחרוזות האלה כ-innerHTML של רכיבי <span> התואמים: final_span שמעוצב עם טקסט שחור, ו-interim_span שמעוצב עם טקסט אפור.

‫interim_transcript הוא משתנה מקומי, והוא נבנה מחדש בכל פעם שהאירוע הזה נקרא, כי יכול להיות שכל התוצאות הזמניות השתנו מאז האירוע האחרון onresult. אנחנו יכולים לעשות את אותו הדבר עבור final_transcript פשוט על ידי התחלת לולאת ה-for ב-0. עם זאת, מכיוון שהטקסט הסופי אף פעם לא משתנה, שיפרנו את הקוד כאן והגדרנו את final_transcript כמשתנה גלובלי, כך שהאירוע הזה יכול להתחיל את לולאת ה-for ב-event.resultIndex ולהוסיף רק טקסט סופי חדש.

זה הכול! שאר הקוד נועד רק כדי שהכול ייראה טוב. הוא שומר את המצב, מציג למשתמש הודעות מידע ומחליף את תמונת ה-GIF של לחצן המיקרופון בין המיקרופון הסטטי, תמונת המיקרופון עם הקו האלכסוני והמיקרופון המונפש עם הנקודה האדומה המהבהבת.

התמונה של המיקרופון עם הקו האלכסוני מוצגת כשמתקשרים אל recognition.start(), ואז היא מוחלפת בתמונה של המיקרופון עם האנימציה כשמופעלת onstart. בדרך כלל זה קורה כל כך מהר שלא שמים לב לסלאש, אבל בפעם הראשונה שמשתמשים בזיהוי דיבור, Chrome צריך לבקש מהמשתמש הרשאה להשתמש במיקרופון. במקרה כזה, הפונקציה onstart מופעלת רק אם המשתמש מאשר את ההרשאה. בדפים שמארחים ב-HTTPS לא צריך לבקש הרשאה שוב ושוב, אבל בדפים שמארחים ב-HTTP כן.

כדי להפיח חיים בדפי האינטרנט, כדאי לאפשר להם להקשיב למשתמשים.

נשמח לקבל ממך משוב...

אפשר לעיין במדיניות הפרטיות שלנו במאמר הסבר על הפרטיות ב-Chrome (העדכון האחרון: 16 ביוני 2026).