כך תוסיפו שליטה קולית לאתר שלכם עם Annyang.js

תמיד חלמתם על סירי אישית באתר שלכם שתוכלו להגדיר כרצונכם? כעת הדבר אפשרי, עם ספריית קוד פתוח כחולה-לבנה חדשה ב-Javascript בשם Annyang.js.

על מנת להתרשם מהרעיון המרכזי שבפוסט עליכם לאשר בקשת גישה למיקרופון שלכם (שתוצג בראש העמוד) ולעשות שימוש בדפדפן כרום.

רוצים לקרוא עוד? אמרו: “קרא עוד” (והתאזרו בסבלנות)

מקור: צילום מסך

מקור: צילום מסך

כיום, הגלישה באינטרנט בדרך כלל מתבטאת בלופ אינסופי של קליקים, מאתר אחד לאתר אחר. למרות זאת, יחד עם עלייתן של העוזרות הקוליות השונות במכשירי המובייל, Siri של אפל, Google Now של גוגל ובעתיד הקרוב גם Cortana של מיקרוסופט, נראה כי המשתמשים מחפשים דרכים נוספות ונטולות מגע לתקשר עם המכשירים שלהם, ולאו דווקא הסלולאריים – אלא גם השולחניים.

דוגמאות טובות לכך ניתן לראות כבר בתקופה האחרונה, כאשר לא מעט “עוזרות קוליות” שולחניות כאלו הושקו למשתמש הביתי. אחת מהן היא ה-ivee Sleek שגייסה כמעט 160 אלף דולרים בקיקסטארטר – עוזרת קולית מבוססת על חיבור Wi-Fi המקשיבה למשתמש ויכולה להשיב לו על שאלות, לחפש דברים באינטרנט ואף לשלוט על מכשירים חשמליים נתמכים בבית. אך השאלה הגדולה נותרה בעינה – כיצד אנחנו מביאים את היכולת הזו גם אל הידיים של מפתחי האתרים, בכדי שכל אתר יוכל להקשיב באמת למשתמש?

תשובה אפשרית מגיעה מטל אטר, מפתח ישראלי אשר השיק לפני מספר ימים את הגירסא הראשונה של Annyang.js – ספריית ג’אווסקריפט המאפשרת לכל בעל אתר אינטרנט להוסיף תמיכה בפקודות קוליות באתר שלו (אם תהיתם מה זה Annyang – התשובה היא “שלום” בקוריאנית). הספרייה למעשה מבקשת הרשאה אל המיקרופון של המשתמש דרך הדפדפן, מקשיבה למשתמש דרך קבע וברגע שהיא מזהה פקודה שהמשתמש הגדיר דרך הספרייה – היא מבצעת את הפעולה הרצויה באופן מיידי.

ההטמעה נעשית באופן הבא

ראשית, יש לכלול את קוד ה-Javascript הבא בין תגיות ה-Body בדף. הקוד הנ”ל מפנה לספריית Annyang כך שנוכל להשתמש בו ולהגדיר עבורו פונקציות ייעודיות ביתר הדף:

מקור: צילום מסך

קטע הקוד המתחיל ב-var commands ומסתיים ב- ;{ מגדיר למעשה את תחום הפונקציות אליהן אנו מעוניינים להפנות את המשתמש בעת ההאזנה לפקודות הקוליות. בדוגמא למעלה, בעת שהמשתמש אומר את המילים הבאות: “show tps report” זה מפנה אותו ישירות לפונקציה שמראה למשתמש באנימציה את האובייקט בדף שיש לו ID בשם tpsreport, במקרה שלנו אובייקט תמונה, המוסתר כברירת מחדל ומוצג מתי שצריך:

מקור: צילום מסך

דוגמא אחרת היא הטענת תוכן אל תוך הדף ישירות ממקורות אחרים, למשל, תמונות מ-Flickr. בדוגמא, ניתן לראות שברגע שתגידו “Show Me …” תקבלו תמונות מ-Flickr בהתאם למה שאמרתם.

מקור: צילום מסך

מקור: צילום מסך

רוצים לנסות בעצמכם?

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

Annyang היא ספריית קוד פתוח (MIT) חינמית אשר עדיין נמצאת בפיתוח, ומה שעוד יותר מגניב בה זה שאתם, בתור מפתחים, תוכלו להמשיך לשנות ולהשפיע על הפיתוח שלה. ספריית ה-GitHub של Annyang נמצאת בדיוק כאן: https://github.com/TalAter/annyang

את הדוגמא הנידונה בפוסט תוכלו למצוא ולחוות באתר הבית של טל.

אבישי בר

מנהל מוצר. מפתח Web ו-React Native, חולה גאדג'טים, הולך נגד הזרם ואוהב את כל מה שקשור לגוגל, לאנדרואיד ולקוד פתוח. עיסוקו העיקרי הוא לפרק לחלקים כל צעצוע חדש שמגיע למשרד ואז לכתוב עליו מדריך.

הגב

8 תגובות על "כך תוסיפו שליטה קולית לאתר שלכם עם Annyang.js"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
נתנאל
Guest

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

טל אטר
Guest

כרום מבקש אישור כל פעם רק על שרתי HTTP. על שרתי HTTPS מספיק לאשר את זה פעם אחת, וכרום זוכר את ההרשאה.

הנה עוד כמה הדגמות של זה בפעולה: https://www.talater.com/annyang/

נתנאל
Guest

אם הייתי יודע שאתה קורא פה הייתי מגיב אחרת :)
כל הכבוד! שיחקת אותה. מדהים.

טל אטר
Guest

תודה :)

דני
Guest

מגיב ביותר
מה עם יכולות לוקליזציה?

טל אטר
Guest

יש.
כמו שאתה רואה, הדוגמא למעלה בעברית. וכאן יש דוגמאות באנגלית: https://www.talater.com/annyang/

אתה יכול לקבוע שפות, ואפילו לשנות אותם אחרי שאיתחלת את הספריה, לפי בקשת המשתמש.

יותם
Guest

נחמד אבל אני לא יודע אם זה רק במחשב המעפן שלי או לא אבל יש לי דילאי קטן, זה ממש מציק…

ליאור
Guest

באמת מדהים ! כל הכבוד !
רק שאלה, יש סיבה כאשר אני מריץ עמוד שמשתמש בספרייה ב Localhost,
אין לי אפשרות לאשר את הגישה למיקרופון (גם אחרי שאני משנה את ההגדרה כך שתשאל האם לאשר את הגישה, לאחר רענון הדף אין גישה למיקרופון)?

wpDiscuz

תגיות לכתבה:

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