9
録音されたオーディオがカラオケのようなもので再生されている間に、その言葉をハイライトするDraftJSエディタを実装しようとしています。DraftJSで "カラオケ"タイプの機能を作成
私はこのフォーマットでデータを受け取る：
[
{
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],
},
...
]
私はその後、ContentBlocksに、これは、データを受信した地図とそれはの「DraftJS」方法のように思えるContentState.createFromBlockArray(blocks)
を使用することにより、エディタのContentState彼らと初期化タイムスタンプメタデータを保存するには、それぞれのタイムスタンプを持つ単語ごとにEntityを作成し、次に音声が再生されるときにcurrentContentをスキャンし、エンティティを現在の経過時間まで強調表示することです。しかし、これが正しい方法であるかどうかはわかりません。大きな文字列の場合はそれほど効果的ではないようです。
注：トランスクリプトはすべてのヘルプや議論が高く評価され、このカラオケ機能
を維持しながら、編集可能なままにする必要があります！
ドラフトjエンティティの内部にタイムスタンプを保存する必要があるか、ドラフトjの外部にある外部変数を使用する必要がありますか？そうすれば、強調表示されているテキストと強調表示されていないテキストを区別するためにエンティティを使用するだけで済みます。 – pixelman32
Draftjを使用する特別な理由はありますか？ Draftjs以外の[その他のオプション]（https://codepen.io/trongthanh/pen/jLsmt）を調べましたか？それがより良い選択肢かもしれないかのように見えます。 Draftjsは、特定のテキストドキュメントにエディタの状態を格納するためのリッチテキストエディタです。なぜこれが選択のツールであるのか苦労しています。 –
両方の質問に答えるため、「カラオケ」機能は「セカンダリ」機能のようなものです。主な機能は、コンテンツをリッチテキストとして編集/強調表示/操作することができます。 –