כיצד להציג תמלול מתוזמן לצד אודיו שיחק

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

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

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

אני משתמש ב- HTML ul רשימה כדי להציג את הדיאלוגים בדף אינטרנט כמו להלן:

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

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

#transcript> li -webkit-filter: טשטוש (3px) מסנן: טשטוש (3px); המעבר: כל הקלות .8;

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

 אם (getComputedStyle (דיאלוגים [0]) webkitFilter === undefined && getComputedStyle (דיאלוגים [0]) מסנן === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ('קישור'); linkEle.type = 'text / css'; linkEle.rel = 'stylesheet'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle); 

עכשיו, בואו להוסיף את השמע לדף, עם זה.

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

dialogueTimings = [0,4,9,11,18,24,29,31,44,45,47]; dialues ​​= document.querySelectorAll ('# תמליל> li'); TranscriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); precDialogueTime = -1; 

dialogueTimings הוא מערך של מספרים המייצג את השניות כאשר כל דיאלוג בתמליל מתחיל. הדיאלוג הראשון מתחיל ב 0s, השני ב 4, וכן הלאה. הקודם ישמש למעקב אחר שינויי דיאלוג.

בואו סוף סוף להעביר את הפונקציה מכור ontimeupdate, אשר נקרא "playTranscript". מאז תמליל הוא ירה כמעט כל שנייה את השמע הוא משחק, אנחנו קודם צריך לזהות איזה דיאלוג כרגע להיות שיחק. נניח את השמע הוא ב 0:14, אז זה משחק את הדיאלוג שהחל ב 0:11 (עיין dialogueTimings מערך), אם הזמן הנוכחי הוא 0:30 בשמע אז זה הדיאלוג שהחל בשעה 0:29.

לפיכך, כדי לברר מתי מתחיל הדיאלוג הנוכחי, אנו מסננים תחילה את כל הזמנים dialogueTimings מערך שנמצא מתחת לזמן הנוכחי של השמע. אם הזמן הנוכחי הוא 0:14 אנו מסננים את כל ה- nos. במערך כי הם מתחת 14 (שהם 0, 4, 9 ו 11) ולגלות את המספר המרבי. מתוך אלה, שהוא 11 (ובכך התחיל הדיאלוג ב 0:11).

() current (v) current = <= audio.currentTime));  

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

() current (v) current = <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

עכשיו בואו להשתמש במדד של זרם בתוך ה dialogueTimings מערך כדי לגלות איזה דיאלוג ברשימה של דיאלוגים תמליל צריך להיות מודגש. לדוגמה, אם זרם הוא 11, ואז מדד של 11 ב dialogueTimings מערך הוא 3 כלומר, עלינו להדגיש את הדיאלוג באינדקס 3 ב דיאלוגים מערך.

() current (v) current = <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

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

() current (v) current = <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)]; transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50; var previousDialogue = document.getElementsByClassName('speaking')[0]; if(previousDialogue !== undefined) previousDialogue.className = previousDialogue.className.replace('speaking',"); currentDialogue.className +=' speaking';   

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

.מדבר -webkit-filter: מסנן (0px) מסנן: טשטוש (0px); 

וזהו, הנה קוד HTML מלא קוד JS.

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

הדגמה

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