2017-08-18 66 views
9

Kaydedilen sesi (karaoke gibi) oynatılırken bir transkripsiyondaki sözcükleri vurgulayan bir DraftJS düzenleyicisi uygulamaya çalışıyorum. DraftJS'de "Karaoke" Tip İşlevsellik Oluşturun

ben bu biçimde veri almak:

[ 
    { 
    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], 
    }, 
    ... 
] 

Daha sonra bu ContentBlocks verileri aldı harita ve kullanarak editör en ContentState onlarla ContentState.createFromBlockArray(blocks)

O bir "DraftJS" yol gibi görünüyor başlatmak zaman damgası meta verilerinin saklanması, ilgili zaman damgasıyla her kelime için bir Entity oluşturmak ve ardından ses çaldıkça ve mevcut geçen süreye kadar varlıkları vurgulamak için currentContent'u taramak olacaktır. Ancak, bunun büyük bir transkripsiyon için performans göstermediğinden, bunu yapmanın doğru yolu olup olmadığından emin değilim.

Not: transkript Herhangi bir yardım veya tartışma takdir

bu karaoke işlevselliği

korurken düzenlenebilir kalması gerekiyor!

+0

Taslaklar dışında taslaklar dışında bir dış değişkene karşı zaman damgayı depolamak için bir neden var mı? Bu şekilde, hangi metnin vurgulandığı ve hangi metnin bulunmadığını işaretlemek için yalnızca varlıkları kullanmanız gerekir. – pixelman32

+0

Draftjs'ı kullanmanın belirli bir nedeni var mı? Draftjs'ın yanı sıra [diğer seçenekler] 'e (https://codepen.io/trongthanh/pen/jLsmt) göz attınız mı? Daha iyi bir seçenek olabilir gibi görünüyor. Draftjs, belirli bir metin belgesinde editör durumunu depolamak için kullanılan zengin bir metin editörüdür, bu yüzden seçim aracının neden bu olduğunu açıklamaya çalışıyorum. –

+0

Her iki sorunuza cevap vermek için "karaoke" işlevi bir tür "ikincil" özelliktir. Birincil işlevsellik, içeriği zengin metin olarak düzenleyebilir/vurgulayabilir/değiştirebilir. –

cevap

0

DraftJS varlıklarında mağaza zaman damgalarını sorduğum soruları tam olarak anlattım. DraftJS ile birkaç hafta sonra bunu yapmak için doğru yol gibi görünüyor.