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