-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
65 lines (52 loc) · 1.59 KB
/
app.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
window.addEventListener('load', () => {
new DrumPad();
});
class DrumPad {
constructor() {
this.drumset = 'lm1';
this.pads = [...document.querySelectorAll('section.pads .pad')];
this.initializeSamples();
this.addPadHooks();
this.addKeyboardHooks();
}
initializeSamples() {
this.pads.forEach(pad => {
pad.howl = new Howl({
src: [`samples/${this.drumset}/${pad.dataset.sound}.wav`]
});
})
}
addPadHooks() {
this.pads.forEach(pad => {
if ('ontouchstart' in document.documentElement) {
pad.addEventListener('touchstart', this.playSample);
} else {
pad.addEventListener('mousedown', this.playSample);
}
});
}
playSample({target: pad}) {
pad.howl.stop();
pad.howl.play();
}
addKeyboardHooks() {
const keyToPadMap = {};
this.pads.forEach(pad => {
const {dataset: {key}} = pad;
if (!key) return;
keyToPadMap[key.toLowerCase()] = pad;
});
window.addEventListener('keydown', e => {
if (e.repeat) return;
const pad = keyToPadMap[e.key.toLowerCase()];
if (!pad) return;
pad.dispatchEvent(new Event('mousedown'));
pad.classList.add('active')
});
window.addEventListener('keyup', e => {
const pad = keyToPadMap[e.key.toLowerCase()];
if (!pad) return;
pad.classList.remove('active')
});
}
}