วิธีการแสดง Transcript ที่ตั้งเวลาไว้พร้อมเสียงที่เล่น

การถอดเสียงเป็นเวอร์ชันของคำพูดที่มีประโยชน์ในการจัดหาสื่อที่มีประโยชน์เช่นการบรรยายที่บันทึกไว้การสัมมนาและอื่น ๆ ให้กับผู้พิการทางเสียง พวกเขายังใช้ในการเก็บบันทึกต้นฉบับของเหตุการณ์เช่นการสัมภาษณ์การพิจารณาคดีของศาลและการประชุม.

เสียงพูดในหน้าเว็บ (เช่นในพอดคาสต์) มักจะมาพร้อมกับบทบรรยายเพื่อประโยชน์ของผู้ที่บกพร่องทางการได้ยินหรือไม่สามารถได้ยินได้เลย พวกเขาสามารถ ดูข้อความ "กำลังเล่น" ข้างเสียง. วิธีที่ดีที่สุดในการสร้างการถอดเสียงคือการตีความและบันทึกด้วยตนเอง.

ในโพสต์นี้เราจะไปดูกัน วิธีการแสดงทรานสคริปต์เสียงที่ใช้งานอยู่ข้างเสียง. ในการเริ่มต้นเราจำเป็นต้องมีการถอดเสียงพร้อม สำหรับโพสต์นี้ฉันได้ดาวน์โหลดตัวอย่างเสียงและการถอดเสียงจาก voxtab.

ฉันใช้ HTML ยู รายการที่จะแสดงการสนทนาในหน้าเว็บดังต่อไปนี้:

  จัสติน: สิ่งที่ฉันพยายามจะพูดคือการอุทธรณ์และการระงับคดีแยกจากกัน.
 อลิสแต: คุณหมายถึงการสื่อสารและการประกาศภายในและภายนอกจะถูกนำเข้าสู่กระบวนการอุทธรณ์.
 จัสติน: ถูกต้องเพราะพวกเขาเชื่อมต่อกับการอุทธรณ์.
...

ต่อไปฉันต้องการให้ข้อความที่มีอยู่ทั้งหมดเบลอและไปที่ unblur เฉพาะบทสนทนาที่จะตรงกับคำพูดปัจจุบันที่กำลังเล่นโดยการบันทึกเสียง. ดังนั้นเพื่อยกเลิกการสนทนาฉันใช้ตัวกรอง CSS "เบลอ".

#transcript> li -webkit-filter: ตัวกรองเบลอ (3px): เบลอ (3px); การเปลี่ยนภาพ: ความง่ายทั้งหมด. 8s; …

สำหรับ IE 10+ คุณสามารถเพิ่มได้ ข้อความเงา เพื่อสร้างเอฟเฟกต์เบลอ คุณสามารถใช้รหัสนี้เพื่อตรวจสอบว่ามีการใช้งาน CSS blur หรือไม่และโหลดสไตล์ชีทเฉพาะ IE ของคุณ เมื่อข้อความเบลอฉันไปข้างหน้าและเพิ่มสไตล์ให้กับการถอดเสียง.

 if (getComputedStyle (กล่องโต้ตอบ [0]). webkitFilter === ไม่ได้กำหนด && getComputedStyle (กล่องโต้ตอบ [0]). ตัวกรอง === "none") var headEle = document.querySelector ('head'), linkEle = document.createElement ( 'เชื่อมโยง'); linkEle.type = 'text / css'; linkEle.rel = 'สไตล์ชีท'; linkEle.href = 'ie.css'; headEle.appendChild (linkEle);

ตอนนี้เรามาเพิ่มเสียงให้กับหน้าด้วยสิ่งนี้.

ontimeupdate เหตุการณ์ของ เสียง องค์ประกอบถูกยิงทุกครั้ง currentTime มีการอัปเดตดังนั้นเราจะใช้เหตุการณ์นั้นเพื่อตรวจสอบเวลาการทำงานปัจจุบันของเสียงและเน้นการสนทนาที่เกี่ยวข้องในการถอดเสียง ก่อนอื่นเรามาสร้างตัวแปรระดับโลกที่เราต้องการ.

dialogueTimings = [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 คืออาร์เรย์ของตัวเลขที่แสดงวินาทีเมื่อแต่ละบทสนทนาในการถอดเสียงเริ่มต้นขึ้น บทสนทนาแรกเริ่มต้นที่ 0 วินาทีวินาทีที่ 4s และอื่น ๆ. previousDialogueTime จะถูกใช้เพื่อติดตามการเปลี่ยนแปลงการสนทนา.

ในที่สุดเราก็ย้ายไปที่ฟังก์ชั่นของ ontimeupdate, ซึ่งมีชื่อว่า "playTranscript" ตั้งแต่ playTranscript ถูกยิงเกือบทุกวินาทีที่มีการเล่นเสียงก่อนอื่นเราต้องระบุว่ามีการเล่นบทสนทนาใดอยู่ สมมติว่าเสียงอยู่ที่ 0:14 จากนั้นก็เล่นบทสนทนาที่เริ่มต้นที่ 0:11 (อ้างอิง dialogueTimings อาร์เรย์) ถ้าเวลาปัจจุบันคือ 0:30 ในเสียงแสดงว่าเป็นบทสนทนาที่เริ่มต้นที่ 0:29.

ดังนั้นเพื่อดูว่าเมื่อใดที่บทสนทนาปัจจุบันเริ่มขึ้นเราจะกรองทุกครั้งใน dialogueTimings อาร์เรย์ซึ่งอยู่ด้านล่างเวลาปัจจุบันของเสียง ถ้าเวลาปัจจุบันคือ 0:14 เราจะกรอง nos ทั้งหมด ในอาร์เรย์ที่ต่ำกว่า 14 (ซึ่งคือ 0, 4, 9 และ 11) และค้นหาหมายเลขสูงสุด จากนั้นคือ 11 (ดังนั้นบทสนทนาเริ่มต้นที่ 0:11).

ฟังก์ชั่น playTranscript () var currentDialogueTime = Math.max.apply (คณิตศาสตร์ dialogueTimings.filter (ฟังก์ชั่น (v) return v <= audio.currentTime));

เมื่อครั้ง currentDialogueTime มีการคำนวณเราตรวจสอบว่ามันเป็นเช่นเดียวกับ previousDialogueTime(นั่นคือถ้าบทสนทนาในเสียงมีการเปลี่ยนแปลงหรือไม่) ถ้ามันไม่ใช่การแข่งขัน (นั่นคือถ้าบทสนทนามีการเปลี่ยนแปลง) แล้ว currentDialogueTime ได้รับมอบหมายให้ previousDialogueTime.

ฟังก์ชั่น playTranscript () var currentDialogueTime = Math.max.apply (คณิตศาสตร์ dialogueTimings.filter (ฟังก์ชั่น (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;

ทีนี้ลองใช้ดัชนีของ currentDialogueTime ใน dialogueTimings อาร์เรย์เพื่อค้นหาว่าการสนทนาใดในรายการบทสนทนาการถอดเสียงที่จะต้องมีการเน้น ตัวอย่างเช่นถ้า currentDialogueTime คือ 11 จากนั้นดัชนี 11 ใน dialogueTimings array คือ 3 ซึ่งหมายความว่าเราต้องเน้นการสนทนาที่ index 3 ใน การหารือ แถว.

ฟังก์ชั่น playTranscript () var currentDialogueTime = Math.max.apply (คณิตศาสตร์ dialogueTimings.filter (ฟังก์ชั่น (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];

เมื่อเราพบบทสนทนาเพื่อเน้น (นั่นคือ currentDialogue) เราเลื่อน transcriptWrapper (ถ้าเลื่อนได้) จนถึง currentDialogue ต่ำกว่า 50px ของเสื้อคลุมด้านบนจากนั้นเราจะหาบทสนทนาที่เน้นไว้ก่อนหน้านี้และนำคลาสออก การพูด จากมันและเพิ่มลงใน currentDialogue.

ฟังก์ชั่น playTranscript () var currentDialogueTime = Math.max.apply (คณิตศาสตร์ dialogueTimings.filter (ฟังก์ชั่น (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: ตัวกรองเบลอ (0px): เบลอ (0px);

และนี่คือรหัส HTML และ JS แบบเต็ม.

  จัสติน: สิ่งที่ฉันพยายามจะพูดคือการอุทธรณ์และการระงับคดีแยกจากกัน.
 อลิสแต: คุณหมายถึงการสื่อสารและการประกาศภายในและภายนอกจะถูกนำเข้าสู่กระบวนการอุทธรณ์.
 จัสติน: ถูกต้องเพราะพวกเขาเชื่อมต่อกับการอุทธรณ์.
...

การสาธิต

ตรวจสอบตัวอย่างด้านล่างเพื่อรับทราบวิธีการทำงานเมื่อใส่รหัสทั้งหมดเข้าด้วยกัน.