हाल ही में एक से अधिक बार मुझे किसी प्रकार का रिएक्ट माइक्रोफोन घटक बनाना पड़ा है जो ब्राउज़र में ऑडियो रिकॉर्ड करता है, और फिर आप वहां प्राप्त ऑडियो ब्लॉब के साथ जो चाहें करते हैं ( इसे संग्रहीत करें, इसे रूपांतरित करें, प्रतिलेखन लाइब्रेरी के साथ इसका उपयोग करें, जो भी हो)।

रिएक्ट माइक्रोफोन के लिए उपलब्ध घटक... अप्रयुक्त हैं। मैं आम तौर पर इसे वहीं छोड़ दूँगा। वे आवश्यक रूप से बुरे नहीं हैं, लेकिन कुछ रिपॉजिटरी स्पैम की ओर ले जाती हैं, कुछ टूटे हुए लिंक से भरे हुए हैं, और उनमें से अधिकांश जो मुझे मिल सकते हैं वे कुछ वर्षों से अधिक समय से अपडेट नहीं किए गए हैं।

यदि आप कुछ करना चाहते हैं, तो आपको इसे स्वयं करना होगा

मैंने इनमें से एक घटक को शुरू से बनाने का निर्णय लिया!

यदि आप केवल इसका उपयोग करना चाहते हैं और इस ब्लॉग पोस्ट के बाकी हिस्सों को नहीं पढ़ना चाहते हैं तो यहां 125-पंक्ति सार का एक लिंक दिया गया है। बहुत अधीर. लेकिन मैं समझता हूं. जीवन चुनौतीपूर्ण है।

फिर भी।

आम तौर पर आपको माइक्रोफ़ोन के साथ बहुत सी चीज़ें ध्यान में रखनी होती हैं। मैं इसके साथ ब्राउज़र संगतता में गहराई से नहीं गया (मुझे यकीन है कि ... ओपेरा या कुछ और को शायद इससे परेशानी होगी), लेकिन इसमें कुछ अच्छी अंतर्निहित आधुनिक ब्राउज़र सुविधाएं हैं जो आपको बहुत दूर ले जाओ, यहां:

• नेविगेटर.मीडियाडिवाइसेस: यह आपको उपयोगकर्ता के माइक्रोफ़ोन (या कैमरा, यदि आप ऐसा चाहते हैं) तक पहुंचने देता है
• getUserMedia: यह आपको उपरोक्त मीडिया उपकरणों के लिए उपयोगकर्ता की अनुमति प्राप्त करने देता है, और एक मीडिया स्ट्रीम तैयार करता है।
• मीडियारिकॉर्डर: यह आपको वास्तव में चीज़ें रिकॉर्ड करने देता है

इनमें से प्रत्येक को ट्रैक करने के लिए कुछ रिएक्ट स्टेट वेरिएबल्स के साथ संयुक्त, ब्राउज़र-साइड चीजों को करने के लिए एक यूज़इफ़ेक्ट, और फिर आपके रिकॉर्ड किए गए ऑडियो का पूर्वावलोकन दिखाने के लिए एक मूल टैग, और वॉइला, आप सभी हैं तय करना।

बेशक, यह सब कहना जितना आसान है, करना उतना ही आसान है, इसीलिए मैंने इसे कॉपी-और-पेस्ट करने योग्य सार में रखा है। आधार कार्यक्षमता के बाहर, मैंने अधिकतम रिकॉर्डिंग समय के लिए एक वैरिएबल भी बनाया है (आपको इसकी आवश्यकता नहीं है, लेकिन यदि आप कुछ ट्रांसक्रिप्ट करना चाहते हैं या कुछ अपलोड करना चाहते हैं, तो मुझे लगता है कि सीमाएं अच्छी हैं), और कुछ दिखाने के लिए कुछ छोटी टेलविंड शैलियाँ बटन के चारों ओर एनिमेशन।

घटक का उपयोग करें. अपने सपनों को रिकॉर्ड करें।