एयर - ट्रू मोबाइल एयर गिटार (प्रोटोटाइप): 7 कदम (चित्रों के साथ)

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

ठीक है तो, अंत में मेरे बचपन के सपने के करीब आने के पहले भाग के बारे में यह वास्तव में एक छोटा निर्देश होगा।

जब मैं एक छोटा लड़का था, मैं हमेशा अपने पसंदीदा कलाकारों और बैंडों को गिटार बजाते हुए देखता था।

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

आप इस वेबसाइट पर प्रोटोटाइप ऐप पा सकते हैं

यह देखने के लिए कि कैसे खेलें, "यू आर डन" चरण पर जाएं।

* इसे अपने फोन पर इस्तेमाल करना सुनिश्चित करें और स्क्रीन को साइड साइड लैंडस्केप मोड में बदल दें *

आनंद लेना!

(ﾉ◕ヮ◕)ﾉ*:･ﾟ✧･: *ヽ(◕ヮ◕ヽ)

आपूर्ति:

1. स्मार्ट फोन

2. डेस्कटॉप कंप्यूटर या लैपटॉप (प्रोग्रामिंग के लिए)

चरण 1: पृष्ठभूमि और कोड पर नोट

यह परियोजना मोटे तौर पर एक कोडित परियोजना है जिसका उद्देश्य पूरी तरह से फोन पर चलना है।

इस परियोजना के साथ आने में, मैंने कई अन्य ऐप की कोशिश की और वर्तमान में बाजार में अन्य उपकरणों जैसे एयरजैम या कुर्व गिटार, पोर्टेबल गिटार या यहां तक कि प्ले स्टोर पर रियल गिटार ऐप को देखा।

उनमें से कई में मुझे जिन समस्याओं का अभाव लगा, वे थीं:

1. कुछ आवश्यक बाहरी उपकरण

2. लगभग सभी ऐप्स वास्तव में आपको वास्तविक कॉर्ड या संगीत नहीं बजाने देते थे और केवल झल्लाहट बोर्ड सिमुलेटर थे

3. बाहरी उपकरण काफी महंगे थे और कई गिटारवादक ने सिर्फ एक वास्तविक गिटार खरीदने की सिफारिश की थी

ये साथ की छवियों में चित्रित हैं।

और इसलिए फोन पर पूरी तरह से चलने में सक्षम होने के दौरान एयर ऐप को इन समस्याओं को हल करना होगा। मेरा मानना है कि यह संभव है क्योंकि 2020 में हमारे पास बेहतर मोबाइल ब्राउज़र तकनीक है और कंप्यूटर विज़न में बहुत सारे सुधार हैं जो हमें एक आरजीबी कैमरे के साथ चमत्कार करने की अनुमति दे सकते हैं।

इसलिए मैंने पूरी तरह से शुरू होने से पहले यह कैसा दिखेगा और यह कैसे काम करेगा, इसके कुछ रेखाचित्र बनाने के लिए आगे बढ़े।

मैंने अपने कोडिंग मील के पत्थर भी निकाले हैं, इसलिए इस निर्देश में, आपको कोड के साथ उबाऊ करने के बजाय, मैं आपको अपनी डिज़ाइन प्रक्रिया के माध्यम से ले जाऊंगा और अंत में एनोटेट कोड संलग्न करूंगा ताकि आप पढ़ सकें और देख सकें कि आपको क्या चाहिए।

संपूर्ण कोड https://github.com/msimbao/air पर पाया जा सकता है और मैं आपकी कोड फ़ाइलों को इसी तरह संरचित करने की अनुशंसा करता हूं।

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

चरण 2: स्ट्रगलिंग एक्शन

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

मेरा विचार था कि अगर किसी व्यक्ति के पास एक राग है जिसे वे बजाना चाहते हैं, तो जब वे अपने कैमरे के सामने अपना हाथ स्वाइप करेंगे, तो एक ध्वनि बजेगी।

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

मैं जावास्क्रिप्ट के लिए बस गया क्योंकि मैं रिएक्ट नेटिव या कुछ और के साथ एक क्रॉस-प्लेटफ़ॉर्म ऐप बना सकता था या सिर्फ एक वेबसाइट पर गिटार होस्ट कर सकता था और यह सभी के लिए उपलब्ध हो सकता था।

फिर मैंने यह पता लगाने के लिए अलग-अलग तरीके खोजे कि कैसे एक क्रिया को ट्रिगर करने के लिए हाथ से स्वाइप किया जाए जो कि कॉर्ड साउंड प्लेइंग हो सकता है लेकिन ऐसा करने के कई तरीके थे।

जब मैंने आईबीएम की सेवाओं की कोशिश की और स्वाइप रिकग्निशन के साथ-साथ कॉर्ड रिकग्निशन के लिए एक हफ्ते में लगभग 3000 इमेज को प्रशिक्षित किया तो मशीन लर्निंग ने बहुत अच्छा काम किया। मैंने victordibia द्वारा handtrack.js भी आजमाया। दुर्भाग्य से वे दोनों मोबाइल फोन पर अविश्वसनीय रूप से धीमे थे।

मैं फिर गति का पता लगाने और lonekorean द्वारा diffcam.com पर एक कार्यान्वयन में ठोकर खाई। मैंने सीखा कि दो अलग-अलग फ्रेम रिकॉर्ड करने के लिए वेबकैम का उपयोग करना संभव है और फिर फ्रेम के बीच के अंतर की गणना करें और अंतर को एक अंक दें। यदि वह स्कोर एक निश्चित सीमा से अधिक है, तो मैं एक क्रिया निष्पादित करता हूं।

लोनकोरियाई ने अपने अलग कैमरे के लिए एक इंजन भी बनाया जिसे मैंने एयर गिटार के लिए उपयोग करने का फैसला किया और इसने मुझे गति स्कोर प्राप्त करने के लिए पूरी तरह से काम किया!

मशीन लर्निंग मॉडल के प्रशिक्षण के प्रयासों की तस्वीरें संलग्न हैं और साथ ही साथ मैंने सीखा है कि diffcam.com उदाहरण।

नोट: इस वर्तमान प्रोटोटाइप में, स्ट्रमिंग थोड़े बार-बार दोहराता है, इसे रोकने के लिए, बस उस कॉर्ड को पकड़ें जिसे आप नीचे बजाना चाहते हैं। यह एक बग है जिसे हम आगे ठीक करने की उम्मीद करते हैं।

पूर्ण स्ट्रम के लिए कोड यहाँ संलग्न script.js फ़ाइल में पाया जाता है और lonekorean द्वारा diffcam इंजन यहाँ है।

चरण 3: तार पहचान

अगला कोडिंग मील का पत्थर तब तार पहचान को लाइव संभालने का एक तरीका खोजना था।

मैं चाहता था कि एक उपयोगकर्ता वास्तविक राग आकृतियों को दोहराने में सक्षम हो और इसलिए अच्छे हाथ लगाने का अभ्यास करें और उन्हें विभिन्न जीवाओं का अभ्यास करने में भी मदद करें।

पिछले चरण की तरह, मैंने कॉर्ड रिकग्निशन के लिए मशीन लर्निंग की कोशिश की, लेकिन यह मोबाइल फोन पर बहुत धीमा था।

फिर मैंने रियल गिटार ऐप से कुछ सीखा कि फोन स्क्रीन पर एक फ्रेटबोर्ड लगाना संभव हो सकता है, स्क्रीन का उपयोग कॉर्ड आकार उत्पन्न करने के लिए करें।

फिर मुझे सीखना पड़ा कि जावास्क्रिप्ट में मल्टी-टच इंटरैक्शन की अनुमति कैसे दी जाए और मोज़िला के डॉक्स से एक भयानक ट्यूटोरियल और उदाहरण मिला

टच इंटरैक्शन विशेष रूप से जावास्क्रिप्ट में मुश्किल हो सकता है लेकिन विचार यह है कि हम कुछ डिव बना सकते हैं और फिर विभिन्न स्पर्श घटनाओं को संभालने के लिए फ़ंक्शन को परिभाषित कर सकते हैं:

1. टचस्टार्ट: जब एक उंगली स्क्रीन को छूती है

2. स्पर्श करें: जब उंगली निकल जाए

3. टचमूव: जब उंगली अभी भी स्क्रीन पर है लेकिन स्थिति बदलती है

फिर हम अपने स्वयं के तत्वों को परिभाषित करने के लिए उन कार्यों के आसपास काम करते हैं जो विभिन्न स्पर्श घटनाओं और संयोजनों का जवाब देते हैं।

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

फिर हम एक ऑडियो ऑब्जेक्ट को परिभाषित कर सकते हैं जिसे हम कॉर्ड पास करेंगे और फिर उस ऑडियो को तब चलाएंगे जब एक स्वाइप इवेंट होता है।

विभिन्न कॉर्ड संयोजनों को परिभाषित करने के लिए, मैंने इस छवि का उपयोग करके फ्रेट बोर्ड बनाया और फिर प्रत्येक विशेष स्थिति को एक div होने के लिए सेट किया जिसे मैं छू सकता था और दूसरों के साथ जोड़ सकता था।

कॉर्ड प्रोग्रेस को परिभाषित करने के लिए कोड यहां पाया जाता है और फ्रेटबोर्ड कंट्रोलर संलग्न कोड में पाया जाता है।

चरण 4: तार ध्वनि ढूँढना

अब जब हमारा सिस्टम पहचानने के लिए तैयार है, हमें कुछ वास्तविक राग ध्वनियों की आवश्यकता है।

शुक्र है, जब मुझे ऑडियो नमूनों की आवश्यकता होती है तो freesound.com हमेशा मेरे बचाव में आता है। मैंने बस कॉर्ड्स की खोज की और डंगलाडा द्वारा प्रमुख कॉर्ड्स का एक अद्भुत पैक पाया।

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

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

मैं डब्ल्यूएवी के रूप में निर्यात करता हूं क्योंकि मुझे जावास्क्रिप्ट ऑडियो प्रोजेक्ट्स से निपटना आसान लगता है।

मैंने तब इन फ़ाइलों को होस्ट करने के लिए glitch.com का उपयोग किया क्योंकि उनके पास एक अद्भुत सामग्री वितरण नेटवर्क है जिसका उपयोग आपके पास विभिन्न परियोजनाओं के लिए किया जा सकता है। एक अन्य विकल्प फायरबेस का उपयोग करना हो सकता है जो कि विभिन्न परियोजनाओं के लिए मेरा गोटो है जिसमें मेरे कॉलेज के मेकर्सस्पेस के लिए मेकर्सस्पेस इन्वेंट्री ऐप की तरह स्टोर करने के लिए अधिक जानकारी हो सकती है।

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

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

चरण 5: संपूर्ण ऐप को समाप्त करना और होस्ट करना

होस्टिंग के बारे में जाने के कई तरीके हैं।

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

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

एक बार रिपॉजिटरी सेट हो जाने के बाद, हम अपनी फाइलों को रिपॉजिटरी में ड्रैग और ड्रॉप कर सकते हैं और नीचे हरे रंग के कमिट बटन पर क्लिक कर सकते हैं।

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

जब पृष्ठ तैयार हो जाता है, तो आपको एक हरे रंग का हाइलाइट मिलेगा और आपको बताएगा कि आपकी साइट प्रकाशित हो चुकी है और उस तक पहुंचा जा सकता है।

चरण 6: हो गया

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

मोशन डिटेक्शन पर एक त्वरित नोट

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

2. उदाहरण के लिए, ट्रेन में बेहतर यही होगा कि आप बैठकर हेडफोन लगाएं और अपने फोन को अंदर की ओर घुमाएं ताकि अगर यात्री आपके आसपास घूम रहे हों तो फोन का कैमरा ज्यादातर समय आपके हाथ को हिलता हुआ देख सके।

3. आपकी दहलीज के आधार पर फोन को पकड़ने वाला हाथ अपेक्षाकृत स्थिर होना चाहिए। मुझे लगता है कि मैं उच्च सीमा के साथ कुछ परीक्षण चलाऊंगा और अधिक विशिष्ट होने के लिए आगे बढ़ने वाली सीमाओं को अपडेट करूंगा।

खेलने के लिए:

ऐप को अपने वेब ब्राउजर पर लोड करें, फिर इसे लैंडस्केप मोड में झुकाएं।

फिर जब आप अपना हाथ घुमाते हैं, तो एक राग बजाएगा, हालांकि, यह तब तक बजता रहेगा जब तक आप सबसे निचले दाएं कोने में F कुंजी को स्पर्श नहीं करते।

वैकल्पिक रूप से, आप कॉर्ड संयोजन बनाकर ध्वनि को रोक सकते हैं।

जब आप एक राग संयोजन बनाते हैं, तो वर्तमान ध्वनि रुक जाती है, फिर एक नई राग ध्वनि का चयन किया जाता है।

चरण 7: सीखी गई बातें और अंतिम शब्द

मुझे वास्तव में इस परियोजना पर काम करना पसंद था, भले ही प्रोटोटाइप में लंबा समय लगा और अन्य परियोजनाओं और गृह कार्य पर काम करते हुए ऐप का उत्पादन किया। मैंने रास्ते में कुछ बेहतरीन चीजें भी सीखीं;

1. डिजिटल उत्पादों को डिजाइन करते समय, हमेशा अपने प्रोटोटाइप को जितनी जल्दी हो सके बनाना सुनिश्चित करें क्योंकि आपकी पहली धारणाएं गलत होंगी और अंत तक पहुंचने के लिए आपको उन पर जल्दी से दौड़ने की जरूरत है।

2. जितना हो सके किसी प्रोजेक्ट पर पैसा खर्च करने से बचें। आप जो कुछ भी कर सकते हैं उसका हमेशा पुन: उपयोग करें और हमेशा साधारण चीजों से शुरू करें जो आपके हाथ में हैं।

3. नई भाषाएं, ढांचे और सिस्टम सीखने से डरो मत। वे अक्सर आपके विचार से पहले आसान होते हैं।

और मेरे सपनों को साकार करने के लिए लोनकोरियाई को बहुत-बहुत धन्यवाद

यदि आप ऐप के विकास में रुचि रखते हैं तो आप हमारी मेलिंग सूची में शामिल हो सकते हैं। एक छोटी सी टीम और मैं उन लोगों की मदद करने के लिए एक पूर्ण संस्करण बनाने के लिए काम करेंगे जो टूट गए हैं, यात्रा कर रहे हैं या छोटे बच्चों को एक भयानक पोर्टेबल गिटार तक पहुंच है जहां वे हैं।

हम वास्तव में ग्राफिक डिजाइनरों, गिटार वादकों और कोडर्स से कुछ मदद पसंद करेंगे ताकि सब कुछ परीक्षण और मांस हो सके।

आनंद लें (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧: *ヽ(◕ヮ◕ヽ)