जावास्क्रिप्ट पर 24 लाइनों में पियानो: यदि आप खेलते हैं, तो संगीत

जबकि फोन निर्माताओं को किसी पतले के साथ मापा जाता है, प्रोग्रामर मापना जारी रखते हैं, किसी के साथ कम।

मैंने इस विशेष सहज कोडिंग प्रतियोगिता में भाग लेने का फैसला किया, और मुझे अपनी एक प्रेमिका-संगीतकार के वाक्यांश को याद आया: "यदि आप खेलते हैं, तो पियानो।" और उसने फैसला किया: तो ऐसा ही हो। खेलने के बजाय, मैं एक पियानो लिखूंगा। और लिख दिया ।

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

तो चलो शुरू करते हैं।

क्लासिकल पियानो के कीबोर्ड में A0 (ला सब-काउंटर-ऑक्टेव, साउंड फ्रीक्वेंसी 27.5 Hz) से लेकर C8 (पांचवें ऑक्टेव तक, फ्रीक्वेंसी 4186 Hz) तक की रेंज में 88 कीज़ होती हैं। कीबोर्ड पर प्रत्येक सप्तक में बारह नोट होते हैं:
सी , सी तेज , डी, सी तेज , एमआई, एफए, सी तेज , नमक, जी तेज , ए, एक तेज / बी फ्लैट , सी। ऊपरी पंक्ति कुंजियों को बोल्ड में हाइलाइट किया गया है, वे आमतौर पर कीबोर्ड पर काले होते हैं।

वास्तव में, एक सप्तक इस तरह दिखता है:



बस लगने वाले नोटों की आवृत्तियों की तालिका को देखते हुए , पैटर्न स्पष्ट हो जाता है: प्रत्येक बाद का सप्तक पिछले एक की तुलना में दोगुना है। इस प्रकार, हम कह सकते हैं कि:

Nx = N1 × 2 ^x-1 , जहां:

• एन नोट का नाम है;
• x अष्टक संख्या है (0 से 8 तक);
• एनएक्स, क्रमशः, सप्तक एक्स के नोट एन के अनुरूप ध्वनि की आवृत्ति;

सूत्र में, N1 N0 के बजाय केवल इसलिए दिखाई देता है क्योंकि उप-काउंटर-ऑक्टेव (N0) के नोटों के हिस्से में मानव कान द्वारा श्रवण की दहलीज के नीचे एक ध्वनि आवृत्ति होती है (<20 Hz)।

नोटों को साफ करने के लिए, हमें कंट्रोवर्सी के नोटों की आवृत्तियों के काफी सटीक मानों की आवश्यकता होती है, जिनसे हम गणना करना शुरू करते हैं। वास्तव में, यहाँ वे हैं:

C: 32.703,
C #: 34.648,
डी: 36.708,
डी #: 38.891,
ई: 41.203,
एफ: 43.654,
एफ #: 46.249,
जी: 48.999,
जी #: 51.913,
एक: 55,
ए #: 58.27,
बी: 61.735

इसके आधार पर, हम एक फ़ंक्शन लिखते हैं जो एक तर्क के रूप में "A4" या "C5#" के रूप में कुंजी के नाम के साथ एक स्ट्रिंग लेता है, और इसकी ध्वनि की आवृत्ति लौटाता है:

 function play(key) { var controctave = { 'C': 32.703, '#': 34.648, 'D': 36.708, 'D#': 38.891, 'E': 41.203, 'F': 43.654, 'F#': 46.249, 'G': 48.999, 'G#': 51.913, 'A': 55, 'A#': 58.27, 'B': 61.735, }, note = key[0].toUpperCase(), octave = parseInt(key[1]), sharp = key[2] == '#' ? true : false; if (sharp) { return controctave[note + '#'] * Math.pow(2, octave-1); } else { return controctave[note] * Math.pow(2, octave-1); } } 

अरे हाँ, हम सुंदर नहीं लिख रहे हैं, लेकिन शीघ्र ही। थोड़ा छोटा:

 function play(key) { var controctave = { 'C': 32.703, '#': 34.648, 'D': 36.708, 'D#': 38.891, 'E': 41.203, 'F': 43.654, 'F#': 46.249, 'G': 48.999, 'G#': 51.913, 'A': 55, 'A#': 58.27, 'B': 61.735}; freq = key[2] == '#' ? controctave[key[0].toUpperCase() + '#'] * Math.pow(2, (key[1]|0) - 1) : controctave[key[0].toUpperCase()] * Math.pow(2, (key[1]|0) - 1); return freq; } 

कोड की चार लाइनें पहले ही उपयोग की जा चुकी हैं।

आइए एक कीबोर्ड ड्रा करें

88 कीबोर्ड कीज़ A नोट (A0) से शुरू होती हैं।
तदनुसार, चक्र इस प्रकार होगा: चक्र में हम 12 चाबियाँ खींचते हैं, और हम हर दूसरे, चौथे, सातवें, नौवें और ग्यारहवें काले बनाते हैं। प्रत्येक कुंजी को नोट के अनुरूप एक आईडी दी जाएगी जिसे दबाए जाने पर उसे खेलना चाहिए।

सामान्य तौर पर, इस तरह:

 var width = 1000; var deck = document.createElement('div'), octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'], id = "", keynumber = 0, whitekeys = 0, keys = []; deck.style.width = width; parent: for (var i = 0; i < 8; i++) { for (var j = 0; j < 12; j++) { keynumber = (i * 12) + j; if (keynumber >= 88) break parent; keys[keynumber] = document.createElement('div'); keys[keynumber].style.border = "1px solid black"; keys[keynumber].style.position = "absolute"; id = (octave[j][1] == '#') ? octave[j] + i + 's' : octave[j] + i; keys[keynumber].id = id; switch(j%12) { case 1: case 3: case 6: case 8: case 10: keys[keynumber].style.backgroundColor = 'black'; keys[keynumber].style.left = ((width / 50 * whitekeys) - (width / 200)) + 'px'; keys[keynumber].style.width = width/100 + "px"; keys[keynumber].style.height = "200px"; keys[keynumber].style.zIndex = 10; break; default: keys[keynumber].style.backgroundColor = 'white'; keys[keynumber].style.left = (width / 50 * whitekeys) + 'px'; keys[keynumber].style.width = width/50 + "px"; keys[keynumber].style.height = "300px"; whitekeys++; } deck.appendChild(keys[keynumber]); } } document.body.appendChild(deck); 

और फिर, हम सामान्य कोड को एक अपठनीय गंदगी में बदल देते हैं, हम थोड़ा अनुकूलन लागू करते हैं।

 var width = 1000, octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'], id = "", div, whitekeys=0, keys = []; parent: for (var i = 0; i < 8; i++) { for (var j = 0; j < 12; j++) { if ((i * 12) + j >= 88) break parent; div = document.createElement('div'); div.id = (octave[j][1] == '#') ? octave[j][0] + ((((i * 12) + j + 9) / 12)|0) + 's' : octave[j] + ((((i * 12) + j + 9) / 12)|0); if (j % 12 == 1 || j % 12 == 4 || j % 12 == 6 || j % 12 == 9 || j % 12 == 11) { div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:black; left:' + ((width / 50 * whitekeys) - (width / 200)) + 'px; width:' + width/100 + 'px; height: 200px; z-index:1;');} else { div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:white; left:' + (width / 50 * whitekeys) + 'px; width:' + width/50 + 'px; height:300px;'); whitekeys++; } document.body.appendChild(div);}} 

हमने एक और 13 लाइनों का उपयोग किया।

लगता है बनाने के लिए पियानो सिखाओ

ऐसा करने के लिए, हमें वेब ऑडियो एपीआई की आवश्यकता है , जो फिलहाल केवल वेबकिट-आधारित ब्राउज़र और फ़ायरफ़ॉक्स द्वारा समर्थित है।

वैश्विक चर घोषणा लाइन में ऑडियो संदर्भ का निर्माण जोड़ें:

 context = window.AudioContext ? new AudioContext() : new webkitAudioContext(); 

एक कीस्ट्रोक हैंडलर जोड़ें:

 document.body.addEventListener('click', play); 

और प्ले फंक्शन को ही निम्नानुसार बदलें:

 function play(e) { var controctave = { 'C': 32.703, 'Cs': 34.648, 'D': 36.708, 'Ds': 38.891, 'E': 41.203, 'F': 43.654, 'Fs': 46.249, 'G': 48.999, 'Gs': 51.913, 'A': 55, 'As': 58.27, 'B': 61.735}, osc = context.createOscillator(); osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1); osc.type = "square"; osc.connect(context.destination); osc.start(0); setTimeout(function() { osc.stop(0); osc.disconnect(context.destination); }, 1000 / 2);} 

यहां हमने एक थरथरानवाला बनाया: osc = context.createOscillator(); , उसे आवश्यक ध्वनि आवृत्ति निर्धारित करें: osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1); osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1); (ठीक है, हम कोड की सफाई और साफ-सफाई की निगरानी नहीं करते हैं, ठीक है?), तरंग सेट करें: osc.type = "square"; (डिफ़ॉल्ट रूप से यह osc.connect(context.destination); था) इसे ध्वनि आउटपुट डिवाइस से जोड़ा गया: osc.connect(context.destination); , और प्लेबैक शुरू करने का आदेश दिया: osc.start(0); । उसके बाद, हमें थोड़ी देर (500ms) के बाद कुंजी को चुप करना होगा, अन्यथा यह चीख़ जाएगा। ऐसा करने के लिए, एक अंतराल में लिपटे osc.stop(0) उपयोग करें। अनिवार्य तत्व - osc.disconnect(context.destination); - आउटपुट डिवाइस से थरथरानवाला को डिस्कनेक्ट करें।

हम संक्षेप में कहते हैं: हमें इतना सरल कोड मिला:

 var width = 1000, octave = ['A', 'A#', 'B', 'C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#'], id = "", div, whitekeys=0, keys = [],context = window.AudioContext ? new AudioContext() : new webkitAudioContext(); parent: for (var i = 0; i < 8; i++) { for (var j = 0; j < 12; j++) { if ((i * 12) + j >= 88) break parent; div = document.createElement('div'); div.id = (octave[j][1] == '#') ? octave[j][0] + ((((i * 12) + j + 9) / 12)|0) + 's' : octave[j] + ((((i * 12) + j + 9) / 12)|0); if (j % 12 == 1 || j % 12 == 4 || j % 12 == 6 || j % 12 == 9 || j % 12 == 11) { div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:black; left:' + ((width / 50 * whitekeys) - (width / 200)) + 'px; width:' + width/100 + 'px; height: 200px; z-index:1;');} else { div.setAttribute('style', 'border:1px solid black; position:absolute; background-color:white; left:' + (width / 50 * whitekeys) + 'px; width:' + width/50 + 'px; height:300px;'); whitekeys++; } document.body.appendChild(div);}} document.body.addEventListener('click', play); function play(e) { var controctave = { 'C': 32.703, 'Cs': 34.648, 'D': 36.708, 'Ds': 38.891, 'E': 41.203, 'F': 43.654, 'Fs': 46.249, 'G': 48.999, 'Gs': 51.913, 'A': 55, 'As': 58.27, 'B': 61.735}, osc = context.createOscillator(); osc.frequency.value = e.target.id[2] == 's' ? controctave[e.target.id[0] + 's'] * Math.pow(2, (e.target.id[1]|0) - 1) : controctave[e.target.id[0]] * Math.pow(2, (e.target.id[1]|0) - 1); osc.type = "square"; osc.connect(context.destination); osc.start(0); setTimeout(function() { osc.stop(0); osc.disconnect(context.destination); }, 1000 / 2);} 

अंत में, मैं यह कहना चाहता हूं कि अब मुझे २१ वीं सदी के स्ट्रैडिवेरियस वेब ऑडियो एपीआई को कॉल करने की आवश्यकता है - एक बहुत ही शांत और दिलचस्प चीज। आप इसके बारे में पढ़ सकते हैं , निश्चित रूप से, एमडीएन पर , मैं HTML5Rocks पर एक अच्छा ट्यूटोरियल और एक और मजेदार प्रयोग की सिफारिश कर सकता हूं।

और पियानो बहुत आदिम निकला, लेकिन मैं अभी भी प्रयोग से खुश हूं। मुझे आशा है कि आप भी रुचि रखते थे।

खेलने के लिए

कोड देखें

पीएस मैकबुक स्पीकर, उदाहरण के लिए, छोटे ऑक्टेव (यानी 130 हर्ट्ज तक) के लिए श्रव्य ध्वनियों को बनाने से इनकार करते हैं, जो आश्चर्य की बात नहीं है। सामान्य तौर पर, यदि कीबोर्ड की बाईं ओर ध्वनि नहीं लगती है तो आश्चर्यचकित न हों।