🍋 ⛺️ 👨🏻‍🌾 एक ब्राउज़र में ध्वनि रिकॉर्डिंग और संशोधन 🔼 🚋 🤹🏻

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

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

खैर, काम में उबाल आने लगा। सबसे पहले, परीक्षण के लिए, मैंने एक सरल JS कोड लिखा, जो हम्सटर की एक स्थिर तस्वीर को gif चित्र स्विच करता है:

function setPictureHamsterStop() { document.getElementById("switch").src = "2.png"; } function setPictureHamsterSpeech() { document.getElementById("switch").src = "3.gif"; }

इसके बाद, jRecorder कोड को मेरे पेज में एम्बेड करना आवश्यक था, अर्थात्, ताकि ध्वनि प्लेबैक के दौरान Gif दिखाया गया था, और रिकॉर्डिंग के दौरान Png। jRecorder पृष्ठ में फ़्लैश विंडो एम्बेड करता है और इसे अदृश्य बनाता है।
आपको अपने पृष्ठ के शीर्ष पर एक छोटा सीएसएस ब्लॉक सम्मिलित करने की आवश्यकता है, और मूल रूप से शरीर में सेटिंग्स के साथ आरंभीकरण स्क्रिप्ट रखें:

 $.jRecorder( { host : '______wav' , callback_started_recording: function(){callback_started(); }, callback_stopped_recording: function(){callback_stopped(); }, callback_activityLevel: function(level){callback_activityLevel(level); }, callback_activityTime: function(time){callback_activityTime(time); }, callback_finished_sending: function(time){ callback_finished_sending() }, swf_path : 'jRecorder.swf', } );

मैंने साइट को मुफ्त होस्टिंग पर रखने का फैसला किया, जिसके लिए मैंने अपने Google ड्राइव खाते का उपयोग किया। Habré पर होस्टिंग के तहत इसका उपयोग कैसे करें पहले से ही लिखा है बहुत सारे प्रतिबंध हैं, उनमें से एक अनुमति नहीं देता है
मैं बाहर से Google ड्राइव पर एक php स्क्रिप्ट फ़ाइल लिखता हूं। इसलिए, साइट केवल स्थिर हो सकती है। लेकिन यह मुझे परेशान नहीं करता था, क्योंकि सभी काम "क्लाइंट पर" किया जाता है।
इसके बाद, मैंने jReader से सभी JS कोड को कॉपी किया और सबसे पहले मैंने इसमें से कॉलबैक हैंडलर्स को हटा दिया, जिनकी मुझे आवश्यकता नहीं है। मेरे लिए मुख्य ईवेंट कॉलबैक_स्टार्टेड, कॉलबैक_स्टॉप्ड, कॉलबैक_फिनिशड_सेंडिंग थे। कॉलबैक खुद के लिए बोलते हैं। एल्गोरिथ्म सरल है:
- रिकॉर्डिंग शुरू होने के बाद, कॉलबैक_स्टार्ट आता है, और हम तस्वीर को स्टेटिक में डालते हैं (हम्सटर चुप है और सुनता है)
- रिकॉर्डिंग बंद करने के बाद, हम कॉलबैक_स्टॉप में जाते हैं और सेंडफाइल करते हैं
- OnSendFinished शो gif- एनीमेशन, जैसे ही ध्वनि बजने लगती है (यह पहले से ही jececure के तर्क के अनुसार है

लेकिन यहां समस्या यह है: रिकॉर्डिंग शुरू या बंद कब करें? मैं एक साधारण बटन के साथ ऐसा नहीं करना चाहता था, हम्सटर को केवल तभी शब्दों का उच्चारण करने दें जब उन्होंने वास्तव में माइक्रोफोन में कुछ कहा था, और कोई साधारण शोर या खामोशी नहीं थी।
ऐसा करने के लिए, मैंने माइक्रोफोन से ध्वनि स्तर का विश्लेषण करने का निर्णय लिया, सौभाग्य से, jRecorder एक कॉलबैक_एक्टिविटीLevel फेंकता है, जिसमें ध्वनि का स्तर - स्तर होता है। मुझे केवल एक एल्गोरिथ्म के साथ आना था। और मैंने यह करने का फैसला किया:
- चयन विधि का उपयोग करते हुए, मैंने इष्टतम ध्वनि स्तर निर्धारित किया है, जिसे शोर माना जा सकता है (वैसे, बाद में, एक्शनस्क्रिप्ट में jRecorder स्रोत कोड में खुदाई करते हुए, यह पता चला कि इसका एक समान मूल्य था और यह मेरे बराबर था)।
- फिर से, चयन विधि का उपयोग करते हुए, मैंने शोर की रिकॉर्डिंग के लिए सीमा लंबाई निर्धारित की। यही है, मैंने एक साधारण काउंटर शुरू किया, जो हर बार शोर बढ़ने पर 1 से बढ़ जाता है। यदि यह काउंटर थ्रेशोल्ड मान से अधिक है, तो हम रिकॉर्डिंग बंद कर देते हैं (शोर रिकॉर्ड करने और पुन: पेश करने के लिए हमें कोई आवश्यकता नहीं है)।
- हर बार जब आप कॉलबैक_एक्टिविटी लेवेल हैंडलर में प्रवेश करते हैं, तो हम यह देखने के लिए जांचते हैं कि क्या यह स्तर शोर है: यदि हां, तो शोर काउंटर को 1 से बढ़ाएं, और यदि नहीं, तो इस काउंटर को रीसेट करें (हम फिर से गिनती शुरू करेंगे)।
- इसके अतिरिक्त, बूलियन ध्वज सेट करें, जो पूरी रिकॉर्डिंग में कम से कम एक बार शोर सीमा से अधिक हो जाने पर सही हो जाता है। यह नेटवर्क पर "खाली" रिकॉर्ड नहीं चलाने के लिए है - हम ट्रैफ़िक को बचाते हैं।

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

 var SILENCE_LEVEL = 5; var PEAK_LEVEL = 10; var MAX_SILENCE_TICKS = 50; var MICROPHONE_AMPLIFY_LEVEL = 10; var silenceCounter = 0; var wasLevelPeak = 0; var isRecording = 0; function callback_started(){ //     -    . setPictureHamsterStop(); silenceCounter = 0; totalTime = 0; wasLevelPeak = 0; isRecording = 1; } function callback_stopped(){ silenceCounter = 0; isRecording = 0; if (wasLevelPeak) { //   -  ,      . //           . wasLevelPeak = 0; $.jRecorder.sendData(); } else { $.jRecorder.record(30); } } function callback_finished_sending(){ //  GIF ,     . var timer = setTimeout('setPictureHamsterSpeech();', 2000); var timer = setTimeout('$.jRecorder.record(5);', totalTime * 1000); } function callback_activityLevel(level){ //   . if (level > PEAK_LEVEL && isRecording) { wasLevelPeak = 1; // ,  -... silenceCounter = 0; } //  ""    . if(level < SILENCE_LEVEL && isRecording) { silenceCounter = silenceCounter + 1; } //       -    // (   ,    ). if (silenceCounter == MAX_SILENCE_TICKS && isRecording) { silenceCounter = 0; $.jRecorder.stop(); } }

रिकॉर्डिंग-प्लेबैक के जावा-स्क्रिप्ट भाग के साथ हल किया गया। अब अगली चुनौती सामने आई - ध्वनि को संशोधित करना। jRecorder एक्शन स्क्रिप्ट स्रोत कोड के साथ आता है, लेकिन मैं इसे नहीं जानता, और यह वास्तव में फ्लैश के साथ कभी काम नहीं किया।
लेकिन ActionScript कोड बहुत मूल समझ में आया, और मैंने जल्दी से ध्वनि रिकॉर्डिंग-प्लेबैक तर्क का पता लगाया। मुझे ध्वनि संशोधन कोड जोड़ने की आवश्यकता है, इसे एक * .swf फ़ाइल में संकलित करें, और इसे मौजूदा jRecorder.swf के बजाय संलग्न करें। मैंने फ्लैश का ट्रायल संस्करण स्थापित किया, AudioRecorderCS4.fla प्रोजेक्ट खोला, ध्वनि संशोधन कोड को गुगली किया, और सौभाग्य से, मुझे आधिकारिक एडोब वेबसाइट पर सही ध्वनि के साथ काम करने के उदाहरण मिले।

माइक्रोफ़ोन से रिकॉर्डिंग के दौरान कच्चे बाइट्स के नमूने होते हैं - नमूने। एक साउंड प्रोसेसर jRecorder में लिखा जाता है, जो जब नमूनाडाटावेंट द्वारा ट्रिगर किया जाता है, तो सामान्य "हीप" के लिए बाइट्स का एक नया पैकेट जोड़ता है, ताकि
परिणाम रिकॉर्ड किए गए ध्वनि के बाइट्स का एक बड़ा सरणी है:

 private function onSampleData(event:SampleDataEvent):void { _recordingEvent.time = getTimer() - _difference; dispatchEvent( _recordingEvent ); //       while(event.data.bytesAvailable > 0) _buffer.writeFloat(event.data.readFloat()); }

ध्वनि को मजेदार बनाने के लिए, आपको बस कुछ बाइट्स को छोड़ना होगा, यानी प्लेबैक के दौरान, ध्वनि अधिक तेज बजाएगी:

 private function onSampleData(event:SampleDataEvent):void { _recordingEvent.time = getTimer() - _difference; dispatchEvent( _recordingEvent ); /*   */ event.data.position = 0; while(event.data.bytesAvailable > 0) { _buffer.writeFloat(event.data.readFloat()); if (event.data.bytesAvailable > 0) //  , ,     -  { _buffer.writeFloat(event.data.readFloat()); } if (event.data.bytesAvailable > 0) { event.data.position += 2; //  ,  - } } }

हो गया। Ctrl + Enter, संकलन, स्पूफिंग jRecorder.swf, और एक कार्यशील प्रोटोटाइप प्राप्त करें। थोड़ा टेढ़ा ग्राफिक्स: उसने अंतरिक्ष में एक रॉकेट को खींचा, आकार में "फिट" जीआईएफ चित्र ताकि रॉकेट में हम्सटर "बैठे" हो।
( ऑनलाइन इमेज एडिटर का उपयोग करके) और इन्हें गूगल ड्राइव होस्टिंग पर पोस्ट किया। हम साइट खोलते हैं, फ्लैश माइक्रोफोन तक पहुंचने की अनुमति मांगता है:

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

एक ब्राउज़र में ध्वनि रिकॉर्डिंग और संशोधन

More articles: