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

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

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

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

לכן, אפשרו לדפי האינטרנט שלכם להתעורר לחיים ומאפשרים להם להקשיב למשתמשים!

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

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