Cách hiển thị bản ghi thời gian bên cạnh âm thanh đã phát

Bản ghi âm là phiên bản văn bản của bài phát biểu, hữu ích trong việc cung cấp các tài liệu hữu ích như các bài giảng được ghi lại, hội thảo, vv cho những người bị thách thức rõ ràng. Chúng cũng được sử dụng để lưu giữ hồ sơ văn bản về các sự kiện như phỏng vấn, phiên tòa và các cuộc họp.

Âm thanh lời nói trong các trang web (như trong podcast) thường đi kèm với bảng điểm, vì lợi ích của những người khiếm thính hoặc không thể nghe được. Họ có thể xem văn bản "phát" cùng với âm thanh. Cách tốt nhất để tạo bản ghi âm là bằng cách giải thích và ghi âm thủ công.

Trong bài viết này, chúng ta sẽ thấy Làm thế nào để hiển thị bản ghi âm đang chạy cùng với âm thanh. Để bắt đầu, chúng ta cần chuẩn bị sẵn sàng. Đối với bài đăng này, tôi đã tải xuống một âm thanh mẫu và bản ghi của nó từ voxtab.

Tôi sử dụng HTML ul danh sách để hiển thị các hộp thoại trên một trang web như dưới đây:

 
 
Justin: Điều tôi đang cố gắng nói là kháng cáo và giải quyết là riêng biệt.
 
Alistair: Bạn có nghĩa là thông tin liên lạc và thông báo nội bộ và bên ngoài sẽ được đưa vào quy trình kháng cáo.
 
Justin: Phải, vì họ kết nối với kháng cáo.
Giáo dục 
 
 

Tiếp theo, tôi muốn tất cả các văn bản có sẵn sẽ được làm mờ và để chỉ bỏ qua đoạn hội thoại phù hợp với bài phát biểu hiện tại đang được ghi bởi bản ghi âm. Vì vậy, để làm mờ các hộp thoại, tôi sử dụng bộ lọc CSS "làm mờ".

#transcript> li -webkit-filter: Blur (3px) bộ lọc: Blur (3px); quá trình chuyển đổi: tất cả .8 giây dễ dàng;

Đối với IE 10+ bạn có thể thêm bóng văn bản để tạo hiệu ứng mờ. Bạn có thể sử dụng mã này để phát hiện xem CSS có được áp dụng hay không và để tải biểu định kiểu cụ thể IE của bạn. Khi văn bản bị mờ, tôi tiếp tục và thêm một số kiểu vào bảng điểm.

 if (getComputingStyle (hộp thoại [0]). webkitFilter === không xác định && getComputingStyle (hộp thoại [0]) ('liên kết'); linkEle.type = 'văn bản / css'; linkEle.rel = 'bản định kiểu'; linkEle.href = 'eg.css'; headEle.appendChild (linkEle); 

Bây giờ, hãy thêm âm thanh vào trang, với điều này.

Các ontimeupdate sự kiện của âm thanh yếu tố được bắn mỗi khi nó thời điểm hiện tại được cập nhật, vì vậy chúng tôi sẽ sử dụng sự kiện đó để kiểm tra thời gian chạy hiện tại của âm thanh và đánh dấu đoạn hội thoại tương ứng trong bản phiên âm. Trước tiên chúng ta hãy tạo một số biến toàn cầu mà chúng ta sẽ cần.

đối thoạiTimings = [0,4,9,11,18,24,29,31,44,45,47]; hộp thoại = document.querySelector ALL ('# transcript> li'); transcriptWrapper = document.querySelector ('# transcriptWrapper'); audio = document.querySelector ('# audio'); trướcDialogueTime = -1; 

đối thoại là một dãy số đại diện cho giây khi mỗi đoạn hội thoại trong bảng điểm bắt đầu. Cuộc hội thoại đầu tiên bắt đầu lúc 0, lần thứ hai lúc 4 giờ, v.v.. trướcDialogueTime sẽ được sử dụng để theo dõi các thay đổi đối thoại.

Cuối cùng chúng ta hãy chuyển đến chức năng được nối với ontimeupdate, được đặt tên là "playTranscript". Kể từ khi playTranscript được phát ra gần như mỗi giây âm thanh đang phát, trước tiên chúng ta cần xác định đoạn hội thoại nào đang được phát. Giả sử âm thanh phát ra lúc 0 giờ 14 phút, sau đó nó phát đoạn hội thoại bắt đầu lúc 0 giờ 11 phút (tham khảo đối thoại mảng), nếu thời gian hiện tại là 0:30 trong âm thanh thì đó là cuộc hội thoại bắt đầu lúc 0h29.

Do đó, để tìm hiểu khi nào cuộc đối thoại hiện tại bắt đầu, trước tiên chúng tôi lọc tất cả các lần trong đối thoại mảng dưới thời gian hiện tại của âm thanh. Nếu thời gian hiện tại là 0h14, chúng tôi sẽ lọc tất cả các số. trong mảng dưới 14 (là 0, 4, 9 và 11) và tìm ra số không tối đa. trong số đó, là 11 (do đó, cuộc đối thoại bắt đầu lúc 0h11).

hàm playTranscript () var currentDialogueTime = Math.max.apply (Math, ConversTimings.filter (function (v) return v <= audio.currentTime));  

Một khi currentDialogueTime được tính toán, chúng tôi kiểm tra xem nó có giống như trướcDialogueTime(đó là nếu đoạn hội thoại trong âm thanh có thay đổi hay không), nếu đó không phải là đối sánh (đó là nếu đoạn hội thoại đã thay đổi), thì currentDialogueTime được giao cho trướcDialogueTime.

hàm playTranscript () var currentDialogueTime = Math.max.apply (Math, ConversTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime;   

Bây giờ hãy sử dụng chỉ mục của currentDialogueTime bên trong đối thoại mảng để tìm ra đoạn hội thoại nào trong danh sách các đoạn hội thoại cần được tô sáng. Ví dụ: nếu currentDialogueTime là 11, sau đó chỉ số 11 trong đối thoại mảng là 3 có nghĩa là chúng ta phải làm nổi bật đoạn hội thoại ở chỉ số 3 trong đối thoại mảng.

hàm playTranscript () var currentDialogueTime = Math.max.apply (Math, ConversTimings.filter (function (v) return v <= audio.currentTime)); if(previousDialogueTime !== currentDialogueTime)  previousDialogueTime = currentDialogueTime; var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];   

Khi chúng tôi đã tìm thấy đoạn hội thoại để làm nổi bật (đó là currentDialogue), chúng tôi cuộn bảng điểm (nếu có thể cuộn) cho đến currentDialogue thấp hơn 50px so với đỉnh của trình bao bọc, sau đó chúng tôi tìm ra đoạn hội thoại được tô sáng trước đó và xóa lớp nói từ nó và thêm nó vào currentDialogue.

hàm playTranscript () var currentDialogueTime = Math.max.apply (Math, ConversTimings.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';   

Phần tử với lớp nói sẽ hiển thị văn bản không bị mờ.

.nói -webkit-filter: Blur (0px) filter: Blur (0px); 

Và đó là, đây là mã HTML và mã đầy đủ.

 
 
Justin: Điều tôi đang cố gắng nói là kháng cáo và giải quyết là riêng biệt.
 
Alistair: Bạn có nghĩa là thông tin liên lạc và thông báo nội bộ và bên ngoài sẽ được đưa vào quy trình kháng cáo.
 
Justin: Phải, vì họ kết nối với kháng cáo.
Giáo dục 
 
 
  
  

Bản giới thiệu

Hãy xem bản demo bên dưới để có ý tưởng về cách thức hoạt động của nó khi tất cả các mã được đặt cùng nhau.