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

Web Speech API החדש של JavaScript מאפשר להוסיף בקלות זיהוי דיבור לדפי האינטרנט שלך. ה-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 עבור אנגלית-ארצות הברית. אם המדיניות לא מוגדרת, ברירת המחדל תהיה השפה של רכיב הבסיס וההיררכיה של מסמך ה-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>. לבסוף, היא מגדירה את המחרוזות האלה בתור ה-HTML הפנימי של רכיבי <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 כדי להבין איך Google מטפלת בנתוני קול מה-API הזה.