जयध्वनि। जेएस और एचटीएमएल 5 के साथ DIY कॉर्ड चार्ट

विचार

मैंने किसी तरह एक व्यक्ति को यह बताने के लिए अपने स्वयं के वेब-आधारित लेबल बनाने के लिए सेट किया कि ये जीवा क्या खाते हैं।

हां, मुझे एक साधारण टैबलेट नहीं चाहिए, लेकिन एक सुविधा संपन्न, ताकि यह हो सके:

• चयनित कॉर्ड खेलते हैं
• कॉर्ड आरेख दिखाएँ
• आभासी सिंथेसाइज़र कीबोर्ड पर कॉर्ड प्रदर्शित करें
• काफी आरामदायक गिटार तार उंगलियों का निर्माण
• एक मशीन से दूसरी मशीन तक ले जाना आसान है

और यह है कि मैं यह कैसे किया ...

धन

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

कार्यान्वयन

पहला कदम एक साधारण वर्चुअल कीबोर्ड बनाना था। चाबियाँ ऑनक्लिक घटनाओं के साथ बहुत से div हैं, स्लाइडर को jQuery-UI का उपयोग करके बनाया गया है।



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

समस्याएं और समाधान

ध्वनि

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

गिटार कॉर्ड छलनी

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

मेरे द्वारा निर्धारित सुविधा मानदंड:

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

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

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

परिणाम

नतीजतन, मुझे जीवाओं को खोजने और निर्माण करने के लिए एक उपयुक्त उपकरण मिला, उपयुक्त फ़िंगरिंग्स की खोज करना, जो उपरोक्त व्यक्ति को दिखाने के लिए शर्म की बात नहीं है। परियोजना कोड CC BY-NC-SA 3.0 लाइसेंस के तहत github.com पर उपलब्ध है। मैं इस परियोजना के लिए किसी भी मदद के लिए आभारी रहूंगा, चाहे वह मूल्यवान सलाह हो या तैयार पैच हो।
आप कोड को सीधे जीथब: डेमो पर काम करने की कोशिश कर सकते हैं।