Próbuję zaimplementować edytor DraftJS, który wyróżnia słowa w transkrypcji podczas odtwarzania nagranego dźwięku (coś w rodzaju karaoke).Utwórz funkcję typu "Karaoke" w DraftJS
mogę odbierać dane w następującym formacie:
[
{
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],
},
...
]
Potem map to odebrane dane do ContentBlocks i zainicjować edytora ContentState z nimi za pomocą ContentState.createFromBlockArray(blocks)
Wydaje się, że „DraftJS” sposób przechowywanie metadanych znacznika czasu będzie polegało na utworzeniu Entity dla każdego słowa z odpowiednim znacznikiem czasu, a następnie zeskanowaniu poprzez currentContent, tak jak dźwięk odtwarza i podświetla obiekty aż do bieżącego upływu czasu. Ale nie jestem pewien, czy to jest właściwy sposób, aby to zrobić, ponieważ nie wydaje się wydajne dla dużych transkrypcji.
Uwaga: zapis musi pozostać edycji przy zachowaniu tej funkcji karaoke
Każda pomoc lub dyskusja jest mile widziana!
Czy jest jakiś powód, aby przechowywać znaczniki czasu wewnątrz jednostek draftjs a zewnętrzną zmienną poza wersją roboczą draftjs? W ten sposób wystarczy użyć elementów, aby zaznaczyć, który tekst jest podświetlony, a który nie. – pixelman32
Czy istnieje szczególny powód, dla którego korzystasz z Draftsu? Czy zapoznałeś się z [innymi opcjami] (https://codepen.io/trongthanh/pen/jLsmt) poza DraftJem? Wydaje się, że to może być lepsza opcja. Draftjs to edytor tekstu sformatowanego, który ma na celu zapisanie stanu edytora na danym dokumencie tekstowym, więc staram się zrozumieć, dlaczego jest to narzędzie z wyboru, czy mógłbyś je rozwinąć? –
Aby odpowiedzieć na oba pytania, funkcja "karaoke" jest swego rodzaju "drugorzędną" funkcją. Podstawową funkcją jest możliwość edytowania/zaznaczania/manipulowania treścią jako tekstem sformatowanym. –