Tạo "Karaoke" Loại Chức năng trong Bản nhápJS

Question

Tôi đang cố triển khai trình soạn thảo DraftJS làm nổi bật các từ trong phiên âm trong khi âm thanh được ghi của nó đang phát (loại như karaoke).

Tôi nhận được dữ liệu ở định dạng này:

[ 
    { 
    transcript: "This is the first block", 
    timestamps: [0, 1, 2.5, 3.2, 4.1, 5], 
    }, 
    { 
    transcript: "This is the second block. Let's sync the audio with the words", 
    timestamps: [6, 7, 8.2, 9, 10, 11.3, 12, 13, 14, 15, 16, 17.2], 
    }, 
    ... 
] 

sau đó tôi lập bản đồ này đã nhận được dữ liệu để ContentBlocks và khởi tạo của ContentState với họ biên tập bằng cách sử dụng ContentState.createFromBlockArray(blocks)

Nó có vẻ như các "DraftJS" cách lưu trữ siêu dữ liệu dấu thời gian sẽ là tạo một Entity cho mỗi từ có dấu thời gian tương ứng và sau đó quét qua currentContent khi phát âm thanh và đánh dấu các thực thể cho đến thời gian đã trôi qua hiện tại. Nhưng tôi không chắc liệu đây có phải là cách thích hợp để làm điều này không, vì nó không có vẻ có hiệu quả đối với các phiên âm lớn.

Lưu ý: bảng điểm cần chỉnh sửa được trong khi vẫn duy trì chức năng karaoke này

Bất kỳ trợ giúp hoặc thảo luận nào được đánh giá cao!

Answer 1

Tôi đã thực hiện chính xác những gì tôi đã mô tả trong câu hỏi: dấu thời gian lưu trữ trong các thực thể DraftJS. Sau một vài tuần nữa với DraftJS có vẻ như đây là cách chính xác để làm điều này.