🌔 🙅🏾 🐼 एक माइक्रोफोन या आवाज टिप्पणियों से जेएस ध्वनि रिकॉर्डिंग 💌 🐎 👩‍👩‍👧‍👦

एक माइक्रोफोन या आवाज टिप्पणियों से जेएस ध्वनि रिकॉर्डिंग

बहुत समय पहले, जब कोई कॉर्पोरेट वेब एप्लिकेशन विकसित कर रहा था, तो ग्राहक वॉयस कमेंट्स छोड़ने में सक्षम होना चाहता था। पहले, मुझे मीडिया सामग्री के निर्माण का सामना नहीं करना पड़ा और मैंने रुचि के साथ इस विषय का अध्ययन करना शुरू किया।

नेटवर्क ने इस तरह की सामग्री को बनाने और संसाधित करने के विषय पर पर्याप्त पृष्ठभूमि जानकारी प्रदान की, लेकिन मुझे एक सरल, पूरी तरह से काम करने वाला उदाहरण नहीं मिला। ग्राहक द्वारा कार्य के कार्यान्वयन के बाद, मैंने ध्वनि टिप्पणियों को रिकॉर्ड करने और सहेजने का सबसे सरल उदाहरण प्रकाशित करने और एक लेख लिखने का फैसला किया। शायद यह सामग्री किसी के लिए उपयोगी होगी और अध्ययन में मदद करेगी।

समस्या का बयान

हमने खुद को एक ब्राउज़र में चलने वाले मिनी-एप्लिकेशन को विकसित करने का कार्य निर्धारित किया है जो आपको एक ध्वनि टिप्पणी रिकॉर्ड करने, सर्वर को रिकॉर्डिंग भेजने की अनुमति देगा, सर्वर रिकॉर्डिंग को बचाएगा, यदि सफल हो, तो यह बनाई गई फ़ाइल के नाम के साथ एक प्रतिक्रिया लौटाएगा और पृष्ठ पर ऑब्जेक्ट प्रदर्शित करेगा ताकि रिकॉर्डिंग को सुना जा सके।

ब्राउज़र में ध्वनि रिकॉर्ड करें

ध्वनि रिकॉर्डिंग को MediaStream रिकॉर्डिंग वेब API का उपयोग करके कार्यान्वित करने का निर्णय लिया गया। रिकॉर्डिंग के लिए, हम MediaRecorder () इंटरफ़ेस का उपयोग करते हैं। लेकिन पहले, एक इंटरफ़ेस बनाएं। हमारे पास केवल सबसे मूल टैग वाले index.html हैं, और टैग के शरीर में हम अपने भविष्य की जावास्क्रिप्ट आवाज के साथ एक फ़ाइल शामिल करते हैं। js:

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Voice comments</title> </head> <body> <script src="voice.js"></script> </body> </html>

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

जैसा कि रिकॉर्डिंग के लिए पहले ही उल्लेख किया गया है, हम MediaRecorder () इंटरफ़ेस (इंटरफ़ेस के बारे में अधिक जानकारी के लिए, दस्तावेज़ देखें) का उपयोग करेंगे, इसके संचालन के लिए मीडिया स्ट्रीम निर्धारित करना आवश्यक है, जहाँ से हम ध्वनि निकालेंगे, इसे केवल इनिशियलाइज़ करें कि हमें केवल ऑडियो ट्रैक की आवश्यकता है।

 navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream)});

अब हमारे पास निरंतर मीडियाक्रेटर है, जिसमें इंटरफ़ेस का एक उदाहरण है, और हम इसके साथ काम करना जारी रखेंगे।

रिकॉर्डिंग शुरू करने के लिए, हमें MediaRecorder.start () विधि को कॉल करने की आवश्यकता है, रिकॉर्डिंग को रोकने के लिए, MediaRecorder.stop () विधि। इस मामले में, MediaRecorder.stop () एक डेटाअवेलेबल इवेंट उत्पन्न करता है जिसके माध्यम से हम बाइनरी सरणी के रूप में डिजीटल ध्वनि रिकॉर्डिंग तक पहुंच प्राप्त करते हैं।

और इसलिए हम उपरोक्त घटनाओं का वर्णन करेंगे, आवाज की घोषणा करेंगे [] सरणी और इसमें प्राप्त डेटा लिखें:

 navigator.mediaDevices.getUserMedia({ audio: true}) .then(stream => { const mediaRecorder = new MediaRecorder(stream); let voice = []; document.querySelector('#start').addEventListener('click', function(){ mediaRecorder.start(); }); mediaRecorder.addEventListener("dataavailable",function(event) { voice.push(event.data); }); document.querySelector('#stop').addEventListener('click', function(){ mediaRecorder.stop(); }); });

अब हम प्राप्त आंकड़ों को भेजने के लिए तैयार करेंगे। ऐसा करने के लिए, स्टॉप इवेंट द्वारा, एक BLOB उदाहरण बनाएं, प्राप्त डेटा को इसमें डालें और MIME डेटा प्रकार निर्दिष्ट करें। हमारे मामले में, यह ऑडियो / wav होगा।

 mediaRecorder.addEventListener("stop", function() { const voiceBlob = new Blob(voice, { type: 'audio/wav' });

नतीजतन, हमारे पास वॉइसब्लो स्थिरांक है जिसमें वॉयस संदेश रिकॉर्ड करने के साथ हमारी भविष्य की wav फ़ाइल की सामग्री है।

सर्वर पर रिकॉर्ड भेजना

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

 let fd = new FormData(); fd.append('voice', voiceBlob);

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

हम एक सर्वर अनुरोध आरंभ करते हैं:

 let promise = await fetch(URL, { method: 'POST', body: form});

यदि सर्वर से HTTP प्रतिक्रिया में एक त्रुटि कोड (प्रतिक्रिया कोड 200-299 की सीमा में) नहीं है, तो यह हमारे लिए प्रतिक्रिया को डीकोड करने, पेज पर एक नया ऑडियो ऑब्जेक्ट बनाने, इसके गुणों को निर्धारित करने और इसे प्रदर्शित करने के लिए रहता है। उत्तर कैसे बनता है, नीचे चर्चा की जाएगी।

सर्वर पर फ़ाइल सहेजना

आइए सर्वर पर एक स्क्रिप्ट बनाएं जो एक आवाज संदेश के साथ हमारे पोस्ट अनुरोध को प्राप्त करेगा। चूंकि हमारे द्वारा भेजी गई ध्वनि रिकॉर्डिंग अनिवार्य रूप से पहले से ही एक फाइल है, हम इसे सर्वर पर उसी के अनुसार प्राप्त करेंगे:

 $uploadDir = 'voice/'; $typeFile = explode('/', $_FILES['voice']['type']); $uploadFile = $uploadDir . basename(md5($_FILES['voice']['tmp_name'].time()).'.'.$typeFile[1]); if (move_uploaded_file($_FILES['voice']['tmp_name'], $uploadFile)) { $response = ['result'=>'OK', 'data'=>'../'.$uploadFile]; } else { $response = ['result'=>'ERROR', 'data'=>'']; } echo json_encode($response);

आप PHP कोड के कई समान उदाहरण पा सकते हैं, नेटवर्क पर प्राप्त फ़ाइलों को संसाधित कर रहे हैं। सबसे पहले, वैरिएबल, $ uploadDir को शुरू करें - वह निर्देशिका जिसमें प्राप्त की गई फ़ाइल सहेजी जाएगी, हमारे मामले में फ़ाइल प्रकार और typeFile, wav और निर्देशिका सहित पूर्ण फ़ाइल नाम के बराबर होगा। इस मामले में फ़ाइल का नाम "अस्थायी" फ़ाइल नाम और md5 विधि का उपयोग करके एन्क्रिप्ट किए गए वर्तमान समय के स्ट्रिंग मान को मिलाकर बनता है। यदि आप निर्दिष्ट निर्देशिका में ध्वनि संदेश के साथ फ़ाइल को सफलतापूर्वक सहेजते हैं, तो हम परिणाम के आधार पर "फ़ील्ड" या "ERROR" के बराबर परिणाम फ़ील्ड वाले सरणी के रूप में एक प्रतिक्रिया बनाते हैं और सफल प्रसंस्करण के मामले में "डेटा" फ़ील्ड, जिसमें सहेजे गए फ़ाइल का लिंक शामिल है।

सुविधा के लिए, हम सरणी को JSON ऑब्जेक्ट में बदल देते हैं और इसे प्रतिक्रिया के रूप में भेजते हैं।

पूरा नमूना कोड GitHub पर उपलब्ध है ।

PS ब्राउज़र आपको केवल सुरक्षित HTTPS कनेक्शन के साथ मीडिया सामग्री को रिकॉर्ड करने की अनुमति देता है।

एक माइक्रोफोन या आवाज टिप्पणियों से जेएस ध्वनि रिकॉर्डिंग