כיצד להוסיף טקסט לדיבור תכונה על כל דף אינטרנט

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

ממשק ה- API של Web Speech

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

בדיקת קוד ותמיכה ראשונית

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

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

הלחצנים יהיו שולט על הקריינות. עכשיו אנחנו צריכים לוודא אם UA תומך SpeechSynthesis ממשק. לשם כך, אנו לבדוק במהירות עם JavaScript אם חלון אובייקט יש 'speechSynthesis' נכס, או שלא.

 onload = function () אם ('wordSynthesis' בחלון) / * סינתזת דיבור נתמכת * / אחר / * סינתזת דיבור לא נתמכת * / 

אם דיבור זמין, תחילה ליצור הפניה עבור דיבור כי אנו להקצות סינטיסייזר משתנה. אנחנו גם ליזום דגל עם ה שקר ערך (אנו רואים את מטרתו מאוחר יותר בתפקיד), ואנחנו ליצור הפניות & לחץ על המטפלים האירוע עבור שלושה לחצנים (Play, Pause, Stop) גם כן.

כאשר המשתמש לוחץ על אחד הלחצנים, הפונקציה המתאימה (onClickPlay (), onClickPause (), onClickStop ()) יקרא.

 אם ('speechSynthesis' בחלון) var synth = speechSynthesis; הו רו / * הפניות לחצנים * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# הפסקה'); var stopEle = document.querySelector ('# stop'); / * לחץ על האירוע מטפלים עבור הכפתורים * / playEle.addEventListener ('לחץ', onClickPlay); pauseEle.addEventListener ('לחץ', onClickPause); stopEle.addEventListener ('לחץ', onClickStop); פונקציה onClickPlay ()  בפונקציה onClickPause ()  בפונקציה onClickStop ()  

צור את הפונקציות המותאמות אישית

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

1. הפעל / המשך

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

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

 פונקציה onClickPlay () if (! flag) flag = true; הביטוי = חדש SpeechSynthesisUtterance (document.querySelector ('מאמר'). utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (אמירה);  אם (synth.paused) / * לבטל הפסקה / לחדש את הקריינות * / synth.resume ();  

אנו משתמשים SpeechSynthesis.getVoices () השיטה post לייעד קול עבור הנאום מהקולות הזמינים במכשיר המשתמש. כאשר שיטה זו מחזירה מערך של כל האפשרויות הקוליות הזמינות בהתקן, אנו להקצות את הקול הראשון זמין המכשיר באמצעות utterance.voice = synth.getVoices () [0]; הצהרה.

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

ואז אנחנו קוראים לזה SpeechSynthesis.speak () שיטה כדי להתחיל את הקריינות. אנחנו גם צריכים לבדוק אם הקריינות מושהית, שבו אנו משתמשים לקריאה בלבד SpeechSynthesis.paused נכס. אם הסיפור הוא מושהה, אנחנו צריכים לחדש את הקריינות על כפתור לחץ, אשר אנו יכולים acheive באמצעות SpeechSynthesis.resume () שיטה.

2. השהה

עכשיו בואו ליצור את onClickPause () שבו אנו בודקים תחילה אם הקריינות נמשכת ולא מושהית. אנחנו יכולים לבדוק את התנאים הללו על ידי שימוש SpeechSynthesis.speaking וה SpeechSynthesis.paused נכסים. אם שני התנאים נכונים, שלנו onClickPause () פונקציה מפסיק את הנאום על ידי קורא את SpeechSynthesis.pause () שיטה.

 הפונקציה onClickPause () if (synth.speaking &&! synth.paused) / * השהה את הקריינות * / synth.pause ();  

3. עצור

ה onClickStop () פונקציה שנבנה באופן דומה onClickPause (). אם הדיבור נמשך, אנחנו לעצור את זה על ידי קורא את SpeechSynthesis.cancel () השיטה מסיר את כל המלים.

 הפונקציה onClickStop () אם (synth.speaking) / * להפסיק את הקריינות * / * * עבור Safari * / flag = false; synth.cancel ();  

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

תמיכה בדפדפן

כל הגרסאות העדכניות ביותר של דפדפנים מודרניים יש תמיכה מלאה או חלקית עבור ה- API של סינתזת הדיבור. דפדפני Webkit אינם מפעילים דיבור מכרטיסיות מרובות, השהייה היא buggy (פועל אבל באגי), והדיבור אינו מאופס כאשר המשתמש טוען מחדש את הדף בדפדפני Webkit.

הדגמת עבודה

יש להסתכל על הדגמה חיה להלן, או לבדוק את הקוד המלא על Github.

ראה את עט  ??  ° ¸ד¢Â ??  ?? טקסט ל דיבור - JavaScript על ידי הונגקיאט (@ hkdc) על CodePen.