कैसे खेला ऑडियो के साथ समयबद्ध प्रतिलेख प्रदर्शित करने के लिए

ऑडियो ट्रांसक्रिप्ट भाषण का पाठ संस्करण है, जो उपयोगी सामग्री जैसे रिकॉर्ड किए गए व्याख्यान, सेमिनार आदि को श्रव्य रूप से चुनौती देने के लिए उपयोगी है। वे साक्षात्कार, अदालत की सुनवाई और बैठकों जैसी घटनाओं के शाब्दिक रिकॉर्ड रखने के लिए भी उपयोग किए जाते हैं.

वेबपेजों (जैसे पॉडकास्ट में) में भाषण ऑडियो आम तौर पर उन लोगों के लाभ के लिए होता है, जो उन लोगों के लाभ के लिए हैं जो सुनने में असमर्थ हैं या बिल्कुल भी नहीं सुन पा रहे हैं। वे कर सकते हैं ऑडियो के साथ पाठ "खेल" देखें. ऑडियो ट्रांसक्रिप्ट बनाने का सबसे अच्छा तरीका मैनुअल व्याख्या और रिकॉर्डिंग के माध्यम से है.

इस पोस्ट में, हम देखने जा रहे हैं ऑडियो के साथ-साथ चल रहे ऑडियो ट्रांसक्रिप्ट को कैसे प्रदर्शित किया जाए. आरंभ करने के लिए हमें प्रतिलेख तैयार करना होगा। इस पोस्ट के लिए, मैंने एक नमूना ऑडियो और इसके ट्रांसक्रिप्ट को डाउनलोड किया है voxtab.

मैं HTML का उपयोग करता हूं उल नीचे दिए गए वेबपेज पर संवाद प्रदर्शित करने के लिए सूची:

 
 
जस्टिन: मैं जो कहना चाह रहा हूं वह यह है कि अपील और समझौता अलग-अलग हैं.
 
एलिस्टेयर: आपका मतलब है कि आंतरिक और बाहरी संचार और घोषणाओं को अपील प्रक्रिया में लाया जाएगा.
 
जस्टिन: सही है, क्योंकि वे अपील से जुड़ते हैं.
... 
 
 

अगला, मैं चाहता हूं कि सभी उपलब्ध पाठ धुंधले हों और ऑडियो रिकॉर्डिंग द्वारा चलाए जा रहे वर्तमान भाषण से मेल खाने वाले संवाद को ही रद्द करें. इसलिए, मैं सीएसएस फिल्टर "कलंक" का उपयोग करने के लिए संवादों को अनब्लॉक करूं.

#transcript> li -webkit- फ़िल्टर: ब्लर (3px) फ़िल्टर: ब्लर (3px); संक्रमण: सभी .8 की आसानी ...

IE 10+ के लिए आप जोड़ सकते हैं पाठ की छाया एक धुंधला प्रभाव पैदा करने के लिए। आप इस कोड का उपयोग यह पता लगाने के लिए कर सकते हैं कि सीएसएस धब्बा लागू किया गया है या नहीं, और अपने IE विशिष्ट स्टाइलशीट को लोड करने के लिए। एक बार पाठ धुंधला हो जाने के बाद, मैं आगे बढ़ा और ट्रांसक्रिप्ट में कुछ शैली जोड़ दी.

 if (getComputedStyle (डायलॉग्स [0]) ('संपर्क'); linkEle.type = 'text / css'; linkEle.rel = 'स्टाइलशीट'; linkEle.href = 'अर्थात।'; headEle.appendChild (linkEle); 

अब, इसके साथ ऑडियो को पेज पर जोड़ें.

ontimeupdate की घटना ऑडियो तत्व को हर बार निकाल दिया जाता है वर्तमान समय अपडेट किया गया है, इसलिए हम उस घटना का उपयोग ऑडियो के वर्तमान चालू समय की जांच करने और ट्रांसक्रिप्ट में संबंधित संवाद को हाइलाइट करने के लिए करेंगे। आइए सबसे पहले कुछ वैश्विक चर बनाएं जिनकी हमें आवश्यकता होगी.

डायलॉगिंग = [0,4,9,11,18,24,29,31,44,45,47]; संवाद = document.querySelectorAll ('# ट्रांसस्क्रिप्ट> ली'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); ऑडियो = document.querySelector ('# ऑडियो'); पिछला डायलॉग टाइम = -1; 

dialogueTimings प्रतिलेख में प्रत्येक संवाद शुरू होने पर सेकंड का प्रतिनिधित्व करने वाली एक संख्या है। पहला संवाद 0s से शुरू होता है, दूसरा 4s पर, और इसी तरह से शुरू होता है. previousDialogueTime संवाद परिवर्तनों को ट्रैक करने के लिए उपयोग किया जाएगा.

चलिए आखिरकार हुक किए गए फ़ंक्शन पर जाते हैं ontimeupdate, जिसे "playTranscript" नाम दिया गया है। जबसे playTranscript लगभग हर दूसरे सेकंड में ऑडियो चलाया जा रहा है, हमें सबसे पहले यह पहचानना होगा कि वर्तमान में कौन सा संवाद चल रहा है। मान लीजिए कि ऑडियो 0:14 पर है, तो यह उस संवाद को खेल रहा है जो 0:11 से शुरू हुआ (देखें) dialogueTimings सरणी), अगर ऑडियो में वर्तमान समय 0:30 है तो यह संवाद है जो 0:29 से शुरू हुआ है.

इसलिए, यह पता लगाने के लिए कि वर्तमान संवाद कब शुरू हुआ, हम सबसे पहले हर समय फ़िल्टर करते हैं dialogueTimings सरणी जो ऑडियो के वर्तमान समय से नीचे है। यदि वर्तमान समय 0:14 है, तो हम सभी नाकों को फ़िल्टर करते हैं। सरणी में जो 14 से नीचे हैं (जो 0, 4, 9 और 11 हैं) और अधिकतम संख्या ज्ञात करें। उनमें से, जो 11 है (इस प्रकार संवाद 0:11 से शुरू हुआ).

function playTranscript () var currentDialogueTime = Math.max.apply (गणित, संभाषणटाइम्स.फिल्टर (फंक्शन (v)) v <= audio.currentTime));  

एक बार currentDialogueTime गणना की जाती है, हम जांचते हैं कि क्या यह उसी के समान है previousDialogueTime(यदि ऑडियो में संवाद बदल गया है या नहीं), यदि यह मेल नहीं है (यदि संवाद बदल गया है), तो currentDialogueTime को सौंपा गया है previousDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (गणित, संभाषणटाइम्स.फिल्टर (फंक्शन (v)) v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

अब के सूचकांक का उपयोग करते हैं currentDialogueTime में dialogueTimings यह पता लगाने के लिए कि ट्रांसक्रिप्ट संवादों की सूची में कौन सा संवाद हाइलाइट किया जाना है। उदाहरण के लिए, यदि currentDialogueTime 11 है, तो 11 का सूचकांक dialogueTimings सरणी 3 है जिसका अर्थ है कि हमें सूचकांक 3 में संवाद को उजागर करना है संवादों सरणी.

function playTranscript () var currentDialogueTime = Math.max.apply (गणित, संभाषणटाइम्स.फिल्टर (फंक्शन (v)) v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

एक बार जब हमने संवाद को उजागर करने के लिए पाया (वह है currentDialogue), हम स्क्रॉल करते हैं transcriptWrapper (यदि स्क्रॉल करने योग्य) तक currentDialogue रैपर के शीर्ष से 50px नीचे है, फिर हम पहले से हाइलाइट किए गए संवाद का पता लगाते हैं और क्लास को हटा देते हैं बोला जा रहा है इसमें से और इसे जोड़ें currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (गणित, संभाषणटाइम्स.फिल्टर (फंक्शन (v)) v <= 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';   

वर्ग के साथ तत्व बोला जा रहा है असंबद्ध पाठ प्रदर्शित करेगा.

.बोलना -विब्रिट-फिल्टर: ब्लर (0px) फिल्टर: ब्लर (0px); 

और वह यह है, यहाँ पूर्ण कोड HTML और JS कोड है.

 
 
जस्टिन: मैं जो कहना चाह रहा हूं वह यह है कि अपील और समझौता अलग-अलग हैं.
 
एलिस्टेयर: आपका मतलब है कि आंतरिक और बाहरी संचार और घोषणाओं को अपील प्रक्रिया में लाया जाएगा.
 
जस्टिन: सही है, क्योंकि वे अपील से जुड़ते हैं.
... 
 
 
  
  

डेमो

सभी कोड एक साथ रखे जाने पर यह पता लगाने के लिए नीचे डेमो देखें कि यह कैसे काम करता है.