/
script.js
33 lines (25 loc) · 965 Bytes
/
script.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
const keys = document.querySelectorAll('.key');
const whiteKeys = document.querySelectorAll('.key.white');
const blackKeys = document.querySelectorAll('.key.black');
const WHITE_KEYS = ['z', 'x', 'c', 'v', 'b', 'n', 'm']
const BLACK_KEYS = ['s', 'd', 'g', 'h', 'j']
const playNote = key => {
const noteAudio = document.getElementById(key.dataset.note);
noteAudio.currentTime = 0;
noteAudio.play();
key.classList.add('active');
noteAudio.addEventListener('ended', () => {
key.classList.remove('active');
})
}
document.addEventListener('keydown', event => {
if (event.repeat) return
const key = event.key;
const whiteKeyIndex = WHITE_KEYS.indexOf(key);
const blackKeyIndex = BLACK_KEYS.indexOf(key);
if (whiteKeyIndex > -1) playNote(whiteKeys[whiteKeyIndex]);
if (blackKeyIndex > -1) playNote(blackKeys[blackKeyIndex]);
})
keys.forEach(key => {
key.addEventListener('click', () => playNote(key))
})