Interactive_Drumkit/app.js at master · opholroyd/Interactive_Drumkit · GitHub

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
let clapAudio = new Audio("./sounds/clap.wav");
let hihat = new Audio('./sounds/hihat.wav');
let kick = new Audio('./sounds/kick.wav');
let openhat = new Audio('./sounds/openhat.wav');
let ride = new Audio('./sounds/ride.wav');
let snare= new Audio('./sounds/snare.wav');
let tink = new Audio('./sounds/tink.wav');
let tom = new Audio('./sounds/tom.wav');
let boom = new Audio("./sounds/boom.wav")

const clapButton = document.getElementById("clap");
const hihatButton = document.getElementById("hihat");
const kickButton = document.getElementById("kick");
const openhatButton = document.getElementById("openhat");
const rideButton = document.getElementById("ride");
const snareButton = document.getElementById("snare");
const tinkButton = document.getElementById("tink");
const tomButton = document.getElementById("tom");
const boomButton = document.getElementById("boom")

clapButton.addEventListener('click', () => {
  clapAudio.load();
  clapAudio.play();
});

hihatButton.addEventListener('click', () => {
  hihat.load();
  hihat.play();
});

kickButton.addEventListener('click', () => {
  kick.load();
  kick.play();
});

openhatButton.addEventListener('click', () => {
  openhat.load();
  openhat.play();
});

rideButton.addEventListener('click', () => {
  ride.load();
  ride.play();
});

snareButton.addEventListener('click', () => {
  snare.load();
  snare.play();
});

tinkButton.addEventListener('click', () => {
  tink.load();
  tink.play();
});

tomButton.addEventListener('click', () => {
  tom.load();
  tom.play();
});

boomButton.addEventListener('click', () => {
  boom.load();
  boom.play();
})

// Play drum by keyboard press

document.addEventListener('keypress', () => {
  if (event.key == "a") {
    boom.load();
    boom.play();
  }
  if(event.key == "q"){
    clapAudio.load();
    clapAudio.play();
  }
  if (event.key == "w")
    hihat.load();
    hihat.play(); {
  } if (event.key == "e")
    kick.load();
    kick.play(); {
  } if (event.key == "r")
    openhat.load();
    openhat.play(); {
  } if (event.key == "s")
    ride.load();
    ride.play(); {
  } if (event.key == "d")
    snare.load();
    snare.play(); {
  } if (event.key == "f")
    tink.load();
    tink.play(); {
  } if (event.key == "z")
    tom.load();
    tom.play(); {
  }
});