-
Notifications
You must be signed in to change notification settings - Fork 5
/
drumKit.jade
45 lines (32 loc) · 1.25 KB
/
drumKit.jade
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
extends base
block vars
- var title = 'Drum Kit'
block styles
link(rel="stylesheet" type="text/css" href="styles/drumKit.css")
block body
- var keyCodes = ["65", "83", "68", "70", "71", "72", "74", "75", "76"]
- var alphabets = ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
- var sounds = ["clap", "hithat", "kick", "openhat", "boom", "ride", "snare", "tom", "tink"]
.keys
each keyCode, index in keyCodes
.key(data-key="#{keyCode}")
kbd #{alphabets[index]}
span.sound #{sounds[index]}
each keyCode, index in keyCodes
audio(data-key="#{keyCode}", src="sounds/#{sounds[index]}.wav")
script(type="text/javascript").
const $keys = document.querySelectorAll('.key')
window.addEventListener('keydown', (e) => {
const $audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
const $key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
if (!$audio) return
$audio.currentTime = 0
$audio.play()
$key.classList.toggle('playing')
})
function removeTransition(e) {
const self = this
if (e.propertyName !== 'transform') return
self.classList.remove('playing')
}
$keys.forEach($key => $key.addEventListener('transitionend', removeTransition))