-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
30 lines (26 loc) · 925 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
const WHITE_KEYS = ['z', 'x', 'c', 'v', 'b', 'n', 'm']
const BLACK_KEYS = ['s', 'd', 'g', 'h', 'j']
const keys = document.querySelectorAll('.key')
const whiteKeys = document.querySelectorAll('.key.white')
const blackKeys = document.querySelectorAll('.key.black')
keys.forEach(key=>{
key.addEventListener('click',()=>{
playNote(key)
})
})
document.addEventListener('keydown',({repeat,key})=>{
if (repeat) return
const whiteKeyIndex = WHITE_KEYS.indexOf(key)
const blackKeyIndex = BLACK_KEYS.indexOf(key)
if (whiteKeyIndex>-1) playNote(whiteKeys[whiteKeyIndex])
if (blackKeyIndex>-1) playNote(blackKeys[blackKeyIndex])
})
function 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')
})
}