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

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

הדגמה של Web Speech API

DEMO / SOURCE

בואו נסתכל מאחורי הקלעים. קודם כול, אנחנו בודקים אם הדפדפן תומך ב-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 של רכיב הבסיס (root) וההיררכיה של מסמך ה-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);
    };
}

הטיפול הזה מקשר את כל התוצאות שהתקבלו עד כה לשתי מחרוזות: 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 בלחצן המיקרופון בין המיקרופון הסטטי, התמונה של המיקרופון עם הקווים האופקיים והמיקרופון האנימציה עם הנקודה האדומה הפורצת.

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

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

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

בסקירת הפרטיות של Chrome מוסבר איך Google מטפלת בנתוני הקול מה-API הזה.