आसानी से अपना खुद का विजेट बनाएं - शीघ्र बीपीएम काउंटर: 6 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:19

वेब ऐप्स आम जगह हैं, लेकिन वेब ऐप्स जिन्हें इंटरनेट एक्सेस की आवश्यकता नहीं है, वे नहीं हैं।

इस लेख में मैं आपको दिखाता हूँ कि कैसे मैंने एक साधारण HTML पृष्ठ में वनीला जावास्क्रिप्ट के साथ एक BPM काउंटर बनाया (देखें यहाँ)। यदि डाउनलोड किया गया है, तो इस विजेट को ऑफ़लाइन उपयोग किया जा सकता है - उन संगीतकारों के लिए आदर्श जो बनाना चाहते हैं लेकिन हमेशा इंटरनेट का उपयोग नहीं करते हैं। इससे भी बेहतर, OSX डैशबोर्ड ऐप (जो पहले कभी इतना उपयोगी नहीं लगा) का उपयोग करके, हम इस BPM काउंटर को उपयोग करने के लिए अतिरिक्त त्वरित बना सकते हैं।

चरण 1: यह कैसा दिखना चाहिए?

जाहिर है, सवाल का जवाब राय का विषय है। मेरा रुख यह है कि यह बहुत सरल होना चाहिए और केवल वही करना चाहिए जो बीपीएम काउंटर को चाहिए: बीट्स प्रति मिनट की गणना करें। इसलिए, इसके लिए केवल एक बटन और एक गिनती मान होना चाहिए।

चरण 2: तर्क

बीपीएम का अनुमान लगाना उतना ही आसान है जितना कि दो क्रमिक बीट्स के बीच के समय को मापना और यह गणना करना कि आप इनमें से कितने एक मिनट में फिट हो सकते हैं।

चलो prev_click = नई तिथि (); const getBPM = फ़ंक्शन () {const currentTime = नई तिथि (); स्थिरांक अंतराल = (वर्तमान समय - prev_click)/1000; कास्ट बीपीएम = 60/अंतराल; पिछला_क्लिक = वर्तमान समय; वापसी बीपीएम; } get_bpm (); // जैसे १२०

मैंने इसे इस तरह से पिछली 3 बीट्स के औसत से आगे बढ़ाया:

स्थिरांक औसत = ३;

const prev_bpms = [६०]; prev_click = new date() const getBPM = function() { const currentTime = new date(); स्थिरांक अंतराल = (वर्तमान समय - prev_click) / 1000; कास्ट बीपीएम = 60 / अंतराल; पिछला_क्लिक = वर्तमान समय; जबकि (prev_bpms.length > prev_bpm_list_max_length) {prev_bpms.shift(); } पिछला_बीपीएम.पुश (बीपीएम); औसत_बीपीएम = prev_bpms.reduce((acc, cVal) => acc + cVal) / prev_bpms.length; वापसी बीपीएम; } get_bpm (); // जैसे १२०

इसके अलावा, हर कोई बटन नहीं दबाना चाहता बल्कि शायद इसके बजाय एक कुंजी:

// स्पेस बार ट्रिगर

window.addEventListener('keypress', (e) => {if(e.code === 32) getBPM();}); // तत्काल क्षमता दस्तावेज़। क्वेरी चयनकर्ता ('.क्लिकर बटन')। फोकस ();

अब, उपयोगकर्ता पेज लोड होते ही स्पेस बार का उपयोग करके भी टैप कर सकते हैं।

चरण 3: अपना बीपीएम सुनें

आपने अपने बीपीएम में टैप किया है, लेकिन अब आप इसे वापस खेलना चाहते हैं ताकि आप अपने पसंदीदा टेम्पो के साथ जाम कर सकें।

इसके लिए हमें आवाज उठानी होगी। पर कैसे? हमारे पास ऑडियोएपीआई ब्राउज़र में दो विकल्प हैं, एक ध्वनि फ़ाइल का उपयोग करें या एक सिंथेसाइज़र बनाएं। हम पहले बीप बनाने के लिए सिंथेसाइज़र का उपयोग करेंगे:

कॉन्स्ट ऑडियोकॉन्टेक्स्ट = विंडो.ऑडियो कॉन्टेक्स्ट || window.webkitऑडियो कॉन्टेक्स्ट;

संदर्भ दें, थरथरानवाला; const bpm = ६०; कास्ट बीपीएमइंटरवल = 60/बीपीएम * 1000; // mssetInterval (बीप, बीपीएम इंटरवल); कॉन्स्ट बीप = फ़ंक्शन () {अगर (! संदर्भ) संदर्भ = नया ऑडियो कॉन्टेक्स्ट (); थरथरानवाला = संदर्भ। क्रिएटऑसिलेटर (); थरथरानवाला। प्रकार = "साइन"; थरथरानवाला। प्रारंभ (0); थरथरानवाला। कनेक्ट (संदर्भ। गंतव्य); सेटटाइमआउट (थरथरानवाला। डिस्कनेक्ट, 150, संदर्भ। गंतव्य); }

अब इसके बजाय एक ऑडियो फ़ाइल का उपयोग करके एक समान कार्य करते हैं:

कॉन्स्ट क्लिक = नया ऑडियो ('./cowbell.mp3');

कास्ट बीपीएम = 60; कास्ट बीपीएमइंटरवल = 60/बीपीएम * 1000; // एमएस सेटइंटरवल (बीप, बीपीएम इंटरवल); कॉन्स्ट बीप = फ़ंक्शन () {क्लिक करें। प्ले (); सेटटाइमआउट (() => {क्लिक करें। रोकें (); क्लिक करें। वर्तमान समय = 0.0;}, 150); };

अंत में तर्क जोड़ना जो उन्हें नियंत्रित करता है:

// JSlet isPlayerPlaying = false;

चलो bpmRepeaterId; कॉन्स्ट टॉगलप्लेयरऑउटपुट = फ़ंक्शन () {कॉन्स्ट बटन = दस्तावेज़। क्वेरी चयनकर्ता ('प्लेयर बटन'); अगर (!isPlayerPlaying){ button.innerHTML = '◼'; bpmRepeaterId = setInterval (बीप, bpmInterval); } और {button.innerHTML = '▶'; ClearInterval (bpmRepeaterId); } isPlayerPlaying = !isPlayerPlaying; };

चरण 4: यह सब एक साथ रखना

अब सभी सुविधाओं को एक साथ रखकर और थोड़ा स्टाइल जोड़ना (जिसे मैं समझा नहीं रहा हूं), हमारे पास यह अंतिम उत्पाद है:

मुझे नहीं पता कि लोग वास्तव में लेख में कितना कोड देखना चाहते हैं, इसलिए https://gitlab.com/t3chflicks/bpm-counter पर पूरा कोड देखें।

चरण 5: प्रभावी उपयोग (केवल OSX उपयोगकर्ता)

यदि आपने पहले मैक का उपयोग किया है, तो हो सकता है कि आप देशी डैशबोर्ड ऐप में ठोकर खा चुके हों, लेकिन आप शायद लंबे समय तक नहीं टिके।

मैंने वास्तव में इसका उपयोग कभी नहीं किया है … अब तक। सफारी में आप पेज पर राइट क्लिक कर सकते हैं, जिससे कभी-कभी डैशबोर्ड में ओपन सहित एक्शन सिलेक्शन पॉप अप हो जाता है…

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

अब F12 key के शॉर्टकट का इस्तेमाल करें। बूम। जल्दी और आसानी से स्वयं विजेट बनाना इतना आसान कभी नहीं रहा।

चरण 6: नोट्स

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

और यही कारण है कि मैंने आपको दो अलग-अलग तरीकों से ध्वनियाँ बनाने का तरीका दिखाया, क्योंकि सिंथेसाइज़र का उपयोग करने वाला ऑडियो संदर्भ संस्करण डैशबोर्ड के अंदर काम नहीं करेगा।

अंत में, आप केवल F12 पर क्लिक नहीं कर सकते हैं और गति प्राप्त करने के लिए स्पेस बार का उपयोग करने के लिए आगे बढ़ सकते हैं, आपको सीधे बटन पर क्लिक करना होगा, जो एक डाउनग्रेड है। लेकिन मुझे लगता है कि यह हो सकता है कि मैं अब से छोटे विजेट कैसे बनाऊं। यदि आपके पास इसके लिए कोई अच्छा विचार है, तो मुझे दिखाएं कि आपने उन्हें कब लागू किया है:)

हमारी डाक प्रेषण सूची पर साइन अप करें!

और हाँ, T3chFlicks देखें - हम सामान बनाते हैं!