מדריך JavaScript: הוסף זיהוי דיבור לאפליקציית האינטרנט שלך

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

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

האפליקציה שלנו, עם האתחול create-react-app, תהיה מפה במסך מלא המופעלת על ידי רכיבי React עבור Leaflet.js. לאחר ההפעלה create-react-app, yarn add leaflet, ו yarn add react-leaflet, נצטרך לפתוח שלנו Appהרכיב ולהגדיר שלנו Mapרכיב:

ייבא את React, {Component} מ- 'react';

ייבא את {Map, TileLayer} מ- 'עלון תגובה'

יבוא './App.css';

App App מרחיב את הרכיב {

  מדינה = {

    מרכז: [41.878099, -87.648116],

    זום: 12,

  };

  updateViewport = (viewport) => {

    this.setState ({

      מרכז: viewport.center,

      זום: viewport.zoom,

    });

  };

  לדקלם () {

    const {

      מֶרְכָּז,

      תקריב,

    } = this.state;

    להחזיר (

          סגנון = {{גובה: '100%', רוחב: '100%'}}

          מרכז = {מרכז}

          זום = {זום}

          onViewportChange = {this.updateViewport}>

            url = "// {s} .tile.openstreetmap.org / {z} / {x} / {y} .png"

            attribution = "© תורמי OpenStreetMap"

          />

    )

  }

}

יישום יישום ברירת מחדל;

Appהרכיב הוא רכיב מצבי עוקב אחר מאפייני מרכז וזום, עובר אותם לתוך Mapהרכיב. כאשר המשתמש מקיים אינטראקציה עם המפות באמצעות אינטראקציות מובנית בין עכבר ומקלדת, אנו מקבלים הודעה על עדכון מצבנו ברמות המרכז והזום החדשות.

עם הגדרת רכיב במסך מלא, האפליקציה שלנו נראית כמו הבאה:

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

קיימות ספריות רבות לביצוע זיהוי דיבור בדפדפן. יש אפילו ממשק API SpeechDetection בסיסי הנתמך על ידי Chrome. אנו נשתמש ב- annyang, ספריית זיהוי טקסטים פופולרית ופשוטה. עם annyang אתה מגדיר פקודות ומטפלים בהן באובייקט JavaScript, כך:

פקודות const = {

  'ב': () => console.log ('בפקודה שהתקבלה'),

  'out': () => console.log ('הפקודה out שהתקבלה'),

};

ואז, כל שעליך לעשות הוא להעביר את האובייקט הזה לשיטה על annyangהאובייקט ולקרוא start()לאובייקט הזה. דוגמה מלאה נראית כך:

ייבא אנאנג מ'אנניאנג ';

פקודות const = {

  'ב': () => console.log ('בפקודה שהתקבלה'),

  'out': () => console.log ('הפקודה out שהתקבלה'),

};

annyang.addCommands (פקודות);

annyang.start ();

זה סופר פשוט, אך מחוץ להקשר לא הגיוני במיוחד, אז בואו נשלב אותו ברכיב התגובה שלנו. בתוך componentDidMountהוו, נוסיף את הפקודות שלנו ונתחיל להקשיב, אך במקום להיכנס למסוף, נקרא לשתי שיטות שמעדכנות את רמת הזום במצבנו:

  zoomIn = () => {

    this.setState ({

      זום: this.state.zoom + 1

    });

  };

  zoomOut = (... args) => {

    this.setState ({

      זום: this.state.zoom - 1

    });

  };

  componentDidMount () {

    annyang.addCommands ({

      'ב': this.zoomIn,

      'החוצה': this.zoomOut,

    });

    annyang.start ();

  }

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

    annyang.addCommands ({

      / * פקודות קיימות * /

      'רמת זום: רמה': {regexp: / ^ רמת זום (\ d +) /, התקשרות חוזרת: this.zoomTo},

    });

:levelכי הוא חלק מהמפתח הוא הדרך הסטנדרטית של הגדרה מציינת מיקום מילה בודדת. (אם רצינו מספר מציינים בעולם, נוכל להשתמש *levelבמקום זאת.) כברירת מחדל, המילה שנתפסה על ידי מציין המיקום מועברת כארגומנט מחרוזת לפונקציית המטפל. אבל אם אנחנו מגדירים את המטפל כאובייקט עם regexו callbackמפתחות, נוכל להמשיך ולהגביל מה לממלא המקום יכול להיות. במקרה זה אנו מגבילים את מציין המיקום לספרות בלבד. מציין המיקום הזה עדיין יועבר כמחרוזת, לכן נצטרך לכפות אותו למספר כשאנחנו מגדירים את רמת הזום:

  zoomTo = (zoomLevel) => {

    this.setState ({

      זום: + זום רמה,

    });

  }

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

אם אתה רוצה לשחק עם הקוד, אתה יכול למצוא אותו ב- GitHub. אל תהסס לפנות לטוויטר כדי לשתף ממשקים מולטי-מודלים משלך: @freethejazz.