كيفية عرض توقيت نسخة جنبا إلى جنب مع تشغيل الصوت

النص الصوتي هو النسخة النصية للكلام ، وهو مفيد في توفير مواد مفيدة مثل المحاضرات المسجلة ، والندوات ، وما إلى ذلك لذوي الاحتياجات الخاصة. كما أنها تستخدم للاحتفاظ بالسجلات النصية للأحداث مثل المقابلات وجلسات المحكمة والاجتماعات.

عادةً ما يكون صوت الكلام في صفحات الويب (كما هو الحال في ملفات podcast) مصحوبًا بنسخ ، لصالح أولئك الذين يعانون من ضعف السمع أو غير قادرين على السمع على الإطلاق. يستطيعون عرض النص "اللعب" إلى جانب الصوت. أفضل طريقة لإنشاء نسخة صوتية هي عن طريق التفسير اليدوي والتسجيل.

في هذا المنشور ، سنرى كيفية عرض نسخة تشغيل الصوت جنبا إلى جنب مع الصوت. للبدء ، نحتاج إلى أن يكون النص جاهزًا. بالنسبة لهذا المنشور ، قمت بتنزيل نموذج صوتي ونسخة منه voxtab.

أنا استخدم HTML المجاهدين قائمة لعرض الحوارات على صفحة ويب مثل أدناه:

 
 
جوستين: ما أحاول قوله هو أن الطعن والتسوية منفصلان.
 
أليستير: تقصد أن الاتصالات والإعلانات الداخلية والخارجية سيتم إدخالها في عملية الاستئناف.
 
جوستين: صحيح ، لأنها تتصل النداء.
... 
 
 

بعد ذلك ، أريد أن يكون النص المتاح غير واضح بالكامل فك فقط الحوار الذي سيتطابق مع الخطاب الحالي الذي يتم تشغيله بواسطة التسجيل الصوتي. لذلك ، لإظهار الحوارات ، استخدم مرشح CSS "طمس".

#transcript> li -webkit-filter: blur (3px) filter: blur (3px)؛ الانتقال: جميع .8s سهولة ؛ ...

ل IE 10+ يمكنك إضافة نص الظل لخلق تأثير واضح. يمكنك استخدام هذا الرمز لاكتشاف ما إذا كان تم تطبيق CSS blur أم لا ، ولتحميل ورقة أنماط IE محددة. بمجرد تمويه النص ، تقدمت وأضفت بعض الأنماط على النص.

 إذا (getComputedStyle (حوارات [0]). webkitFilter === undefined && getComputedStyle (حوارات [0]). filter === "none") var headEle = document.querySelector ('head') ، linkEle = document.createElement ('حلقة الوصل')؛ linkEle.type = 'text / css'؛ linkEle.rel = 'stylesheet'؛ linkEle.href = 'ie.css'؛ headEle.appendChild (linkEle)؛ 

الآن ، دعونا نضيف الصوت إلى الصفحة ، مع هذا.

ال ontimeupdate حدث لل سمعي يتم إطلاق العنصر في كل مرة الوقت الحالي تم تحديثه ، لذلك سنستخدم هذا الحدث للتحقق من وقت التشغيل الحالي للصوت وإبراز الحوار المقابل في النص. لنقم أولاً بإنشاء بعض المتغيرات العالمية التي سنحتاجها.

dialogTimings = [0،4،9،11،18،24،29،31،44،45،47]؛ dialogues = document.querySelectorAll ('# transcript> li')؛ transcriptWrapper = document.querySelector ('# transcriptWrapper')؛ audio = document.querySelector ('# audio')؛ previousDialogueTime = -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 (Math، dialogTimings.filter (function (v) return v <= audio.currentTime));  

مرة واحدة في currentDialogueTime يتم حسابه ، ونحن نتحقق مما إذا كان هو نفسه previousDialogueTime(أي إذا كان الحوار في الصوت قد تغير أم لا) ، وإذا لم يكن التطابق (أي إذا تغير الحوار) ، فعندئذ currentDialogueTime تم تعيين ل previousDialogueTime.

function playTranscript () var currentDialogueTime = Math.max.apply (Math، dialogTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

الآن دعونا نستخدم مؤشر currentDialogueTime في ال dialogueTimings صفيف لمعرفة أي حوار في قائمة حوارات النص يجب تسليط الضوء عليه. على سبيل المثال ، إذا كان currentDialogueTime هو 11 ، ثم مؤشر 11 في dialogueTimings الصفيف هو 3 وهو ما يعني أن علينا تسليط الضوء على الحوار في الفهرس 3 في الحوارات مجموعة مصفوفة.

function playTranscript () var currentDialogueTime = Math.max.apply (Math، dialogTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

بمجرد العثور على الحوار لتسليط الضوء (وهذا هو currentDialogue) ، نحن نمرر transcriptWrapper (إذا التمرير) حتى currentDialogue أقل بواقع 50 بكسل عن قمة الغلاف ، ثم نكتشف مربع الحوار الذي تم تمييزه مسبقًا ونزيل الفئة تكلم منه وإضافته إلى currentDialogue.

function playTranscript () var currentDialogueTime = Math.max.apply (Math، dialogTimings.filter (function (v) return 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';   

العنصر مع الفصل تكلم سيعرض نص غير مؤكد.

.يتحدث -webkit-filter: blur (0px) filter: blur (0px)؛ 

وهذا كل شيء ، إليك رمز HTML و JS الكامل.

 
 
جوستين: ما أحاول قوله هو أن الطعن والتسوية منفصلان.
 
أليستير: تقصد أن الاتصالات والإعلانات الداخلية والخارجية سيتم إدخالها في عملية الاستئناف.
 
جوستين: صحيح ، لأنها تتصل النداء.
... 
 
 
  
  

عرض

تحقق من العرض التوضيحي أدناه للحصول على فكرة كيف يعمل عندما يتم وضع جميع الرموز معا.