-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpiano.js
153 lines (133 loc) · 5.63 KB
/
piano.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
var instrument=0; //initially set id=0, eh piano di hai
$('#keyboard').on('click', function(){
instrument=0;
$('#instName').text('Keyboard');
})
$('#organ').on('click', function(){
instrument=1; //instrument = organ
$('#instName').text('Organ');
})
$('#guitar').on('click', function(){
instrument=2; //instrument = acoustic guitar
$('#instName').text('Acoustic Guitar');
})
$('#edm').on('click', function(){
instrument=3; //instrument = edm
$('#instName').text('EDM');
})
//array of objects of note and octave, click or keyboard event isko trigger krke note and octave ki value se sound play krega
var music=[
{'note': 'C', 'octave':'3'},{'note': 'D', 'octave':'3'},{'note': 'E', 'octave':'3'},
{'note': 'F', 'octave':'3'},{'note': 'G', 'octave':'3'},{'note': 'A', 'octave':'3'},
{'note': 'B', 'octave':'3'},{'note': 'C', 'octave':'4'},{'note': 'D', 'octave':'4'},
{'note': 'E', 'octave':'4'},{'note': 'F', 'octave':'4'},{'note': 'G', 'octave':'4'},
{'note': 'A', 'octave':'4'},{'note': 'B', 'octave':'4'},{'note': 'C', 'octave':'5'},
{'note': 'D', 'octave':'5'},{'note': 'E', 'octave':'5'},{'note': 'F', 'octave':'5'},
{'note': 'G', 'octave':'5'},{'note': 'A', 'octave':'5'},{'note': 'B', 'octave':'5'},
{'note': 'C#', 'octave':'3'},{'note': 'D#', 'octave':'3'},{'note': 'F#', 'octave':'3'},
{'note': 'G#', 'octave':'3'},{'note': 'A#', 'octave':'3'},{'note': 'C#', 'octave':'4'},
{'note': 'D#', 'octave':'4'},{'note': 'F#', 'octave':'4'},{'note': 'G#', 'octave':'4'},
{'note': 'A#', 'octave':'4'},{'note': 'C#', 'octave':'5'},{'note': 'D#', 'octave':'5'},
{'note': 'F#', 'octave':'5'},{'note': 'G#', 'octave':'5'},{'note': 'A#', 'octave':'5'}
]
//jab pressed() trigger hoga vo es array ki help se id select krega jisse blink krvana
var music_id=['w1','w2','w3','w4','w5','w6','w7','w8','w9','w10','w11','w12',
'w13','w14','w15','w16','w17','w18','w19','w20','w21','b1','b2','b3',
'b4','b5','b6','b7','b8','b9','b10','b11','b12','b13','b14','b15'
]
//sound play krne ke liye jab keyboard use hoga to vo iski help se check krega k konsi sound play krni hai
var key_id=['q','w','e','r','t','y','u','i','o','p','[',']',
'z','x','c','v','b','n','m',',','.',
'2','3','5','6','7','9','0','=',
'a','s','f','g','j','k','l'
]
//to play sound using click event
$('body').on('click', function(event){
var id =event.target.id; //jis button pe click kiya uski 'div id' variable me store hoggi
for(var i=0; i<music.length; i++){
if(music_id[i]==id){ //music_id array se check krega k 'div id' valid hai k nahi
break; //aggr valid hui 'id' toh break ki help se 'i' ki value pta lg jayegi
}
}
// 'i' ki value use krke arrays me se note and octave ki value select krni hai
Synth.play(instrument, music[i].note, music[i].octave, 2);
pressed(i); //'i' ki value use krke find kro konse button ko blink krna hai
})
$('body').on('keypress', function(event){
var id=event.key;
for(var i=0; i<key_id.length;i++){
if(id==key_id[i]){ // yeh key ko array se match krega
break; // 'i' ki value milli
}
}
// 'i' ki value use krke arrays me se note and octave ki value select krni hai
Synth.play(instrument, music[i].note, music[i].octave, 2);
pressed(i); //'i' ki value use krke find kro konse button ko blink krna hai
})
//function ke sath buttons pe Unka Note and keyboard button ki value show krni hai
function white_keys(){
var keys=['C3','D3','E3','F3','G3','A3','B3',
'C4','D4','E4','F4','G4','A4','B4',
'C5','D5','E5','F5','G5','A5','B5'];
var press=['Q','W','E','R','T','Y','U',
'I','O','P','[',']','Z','X',
'C','V','B','N','M',',','.'
];
for(var i=0; i<keys.length; i++){
var id='#w'+(i+1); //eg if i=0, id=w1
$(id).find('.keyHead').text(press[i]);
$(id).find('.keyFoot').text(keys[i]);
}
}
function black_keys(){
var keys=['C3#','D3#','F3#','G3#','A3#',
'C4#','D4#','F4#','G4#','A4#',
'C5#','D5#','F5#','G5#','A5#'];
var press=['2','3','5','6','7',
'9','0','=','A','S',
'F','G','J','K','L'];
for(var i=0; i<keys.length; i++){
var id='#b'+(i+1);
$(id).find('.keyHead').text(press[i]);
$(id).find('.keyFoot').text(keys[i]);
}
}
//when key press hoga, us key ko blink krne ke liye
function pressed(i){
var a = $('#'+music_id[i]);
var b = a[0].classList.value;
if(b.search('white') >= 0){
a.addClass('whitePressed');
setTimeout(function(){
a.removeClass('whitePressed');
},200);
}
else{
a.addClass('blackPressed');
setTimeout(function(){
a.removeClass('blackPressed');
},200);
}
}
window.onload= function(){
for(var i=0; i<21;i++){
var white_key=$('<div class="white key" id="w'+(i+1)+'">'
+'<div class="label">'
+'<h4 class="keyHead"></h4>'
+'<h4 class="keyFoot"></h4>'
+'</div>'
+'</div>')
$('#piano').append(white_key);
}
for(var i=0; i<15;i++){
var black_key=$('<div class="black key" id="b'+(i+1)+'">'
+'<div class="label">'
+'<h4 class="keyHead"></h4>'
+'<h4 class="keyFoot"></h4>'
+'</div>'
+'</div>')
$('#piano').append(black_key);
}
white_keys(); //onload pe white keys and black keys ke note and keyboard key show krni
black_keys();
}