2017-08-18 52 views
9

में "कराओके" प्रकार की कार्यक्षमता बनाएं, मैं एक ड्राफ्टजेएस संपादक को कार्यान्वित करने का प्रयास कर रहा हूं जो एक रिकॉर्ड किए गए ऑडियो को रिकॉर्ड करता है जबकि रिकॉर्ड किया गया ऑडियो चल रहा है (कराओके की तरह)।ड्राफ्टजेएस

मैं इस प्रारूप में डेटा प्राप्त:

[ 
    { 
    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 करने के लिए डेटा प्राप्त नक्शा और प्रारंभ संपादक की ContentState उन लोगों के साथ का उपयोग करके ContentState.createFromBlockArray(blocks)

यह की "DraftJS" जिस तरह की तरह लगता है टाइमस्टैम्प मेटाडाटा भंडारण अपने संबंधित टाइमस्टैम्प के साथ प्रत्येक शब्द के लिए एक Entity बनाने के लिए, और फिर ऑडियो चलता है के रूप में currentContent की जांच करके वर्तमान बीता हुआ समय तक संस्थाओं अप उजागर किया जाएगा। लेकिन मुझे यकीन नहीं है कि ऐसा करने का यह सही तरीका है, क्योंकि यह बड़े ट्रांसक्रिप्शन के लिए प्रदर्शन प्रतीत नहीं होता है।

नोट: प्रतिलेख जबकि इस कराओके कार्यक्षमता

कोई मदद या चर्चा की सराहना की बनाए रखने संपादन योग्य रहने के लिए की जरूरत है!

+0

वहाँ एक कारण यह है कि आप draftjs संस्थाओं के अंदर timestamps बनाम draftjs के बाहर एक बाहरी चर संग्रहीत करने की आवश्यकता है? इस तरह, आपको केवल यह दिखाने के लिए इकाइयों का उपयोग करने की आवश्यकता होगी कि कौन सा टेक्स्ट हाइलाइट किया गया है, जिससे टेक्स्ट नहीं है। – pixelman32

+0

क्या कोई विशेष कारण है कि आप ड्राफ्टज का उपयोग क्यों कर रहे हैं? क्या आपने ड्राफ्टज के अलावा [अन्य विकल्प] (https://codepen.io/trongthanh/pen/jLsmt) देखा है? ऐसा लगता है कि यह एक बेहतर विकल्प हो सकता है। ड्राफ्टज एक समृद्ध टेक्स्ट एडिटर है जिसका मतलब किसी दिए गए टेक्स्ट दस्तावेज़ पर संपादक राज्य को स्टोर करना है, इसलिए मैं यह देखने के लिए संघर्ष कर रहा हूं कि यह पसंद का साधन क्यों है, क्या आप विस्तृत कर सकते हैं? –

+0

अपने दोनों सवालों के जवाब देने के लिए, "कराओके" कार्यक्षमता एक "माध्यमिक" सुविधा है। प्राथमिक कार्यक्षमता समृद्ध पाठ के रूप में सामग्री को संपादित/हाइलाइट/कुशल बनाने में सक्षम है। –

उत्तर

0

मैंने प्रश्न में वर्णित बिल्कुल सही किया: ड्राफ्टजेएस इकाइयों में स्टोर टाइमस्टैम्प। ड्राफ्टजेएस के साथ कुछ और हफ्तों के बाद ऐसा लगता है कि ऐसा करने का यह सही तरीका है।

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^