Skip to content

Commit fe27c12

Browse files
PBJIPBJI
authored
Merge pull request #923 from amrit2611/master
A simple and interactive javascript Drumkit
2 parents bde1f5a + 0348a95 commit fe27c12

17 files changed

+180
-0
lines changed

‎Drum/amrit2611/Dockerfile

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
FROM nginx:alpine
2+
3+
COPY . /usr/share/nginx/html
4+
5+
EXPOSE 80
6+
7+
CMD ["nginx", "-g", "daemon off;"]

‎Drum/amrit2611/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# DrumKit
2+
3+
A keyboard drum kit made using Html, Css and Javascript.
4+
5+
6+
# Deployment
7+
8+
The website is deployed successfully using [ Github Pages ](https://amrit2611.github.io/DrumKit/)

‎Drum/amrit2611/drumkit.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
body{
2+
background-image: url("drums stock photo.jpg");
3+
}
4+
5+
6+
.displaytext{
7+
position: absolute;
8+
display: inline;
9+
width: auto;
10+
height: auto;
11+
margin-top: 5%;
12+
margin-left: auto;
13+
margin-right: auto;
14+
left: 20%;
15+
right: 20%;
16+
padding: 20px;
17+
text-align: center;
18+
justify-content: center;
19+
font-size: 2rem;
20+
font-weight: 500;
21+
font-family: Georgia, 'Times New Roman', Times, serif;
22+
background-color: rgba(0, 0, 0, 0.541);
23+
color: rgb(179, 179, 179);
24+
}
25+
26+
.keybox{
27+
margin: auto;
28+
padding: auto;
29+
height: auto;
30+
width: auto;
31+
position: absolute;
32+
display: flex;
33+
top: 40%;
34+
left: 5%;
35+
right: 5%;
36+
border: 3px solid rgb(87, 87, 87);
37+
background-color: rgba(255, 255, 255, 0.171);
38+
justify-content: space-evenly;
39+
}
40+
41+
.key{
42+
position: relative;
43+
display: inline;
44+
border: 4px solid black;
45+
border-radius: 6px;
46+
background: rgba(58, 58, 58, 0.781);
47+
margin: 1rem;
48+
padding: 0.5rem 0.5rem;
49+
width: auto;
50+
height: auto;
51+
text-align: center;
52+
color: white;
53+
/* font-size: 1.5rem; */
54+
text-shadow: 0 0 5px black;
55+
transition: all 0.08s;
56+
}
57+
58+
.key:hover{
59+
cursor: pointer;
60+
}
61+
62+
.playing{
63+
transform: scale(1.2);
64+
border-color: rgb(173, 173, 0);
65+
box-shadow: 0 0 10px rgb(173, 173, 0);
66+
}
67+
68+
kbd{
69+
color: gold;
70+
font-weight: 600;
71+
font-size: 2.5rem;
72+
}
73+
74+
.sound{
75+
text-transform: uppercase;
76+
font-size: 1.1rem;
77+
}

‎Drum/amrit2611/drumkit.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
function playSound(e){
2+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
3+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
4+
if(!audio) return;
5+
6+
audio.currentTime = 0; //rewinds to start after hit to allow multiple succesive hits
7+
8+
audio.play();
9+
key.classList.add('playing');
10+
}
11+
12+
function removeTransition(e){
13+
if (e.propertyName !== 'transform') return; //so that only transform is used to make changes
14+
this.classList.remove('playing');
15+
}
16+
17+
18+
window.addEventListener('keydown', playSound);
19+
20+
const keys = document.querySelectorAll('.key');
21+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));

‎Drum/amrit2611/drums stock photo.jpg

294 KB
Loading

‎Drum/amrit2611/index.html

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>JavaScript_drum-kit</title>
8+
<link rel="stylesheet" href="drumkit.css">
9+
</head>
10+
<body>
11+
<div class="background"></div>
12+
<div class="displaytext">Press the keys on your keyboard for the corresponding sound.</div>
13+
<div class="keybox">
14+
<div data-key="65" class="key">
15+
<kbd>A</kbd><br>
16+
<span class="sound">clap</span>
17+
</div>
18+
<div data-key="83" class="key">
19+
<kbd>S</kbd><br>
20+
<span class="sound">hihat</span>
21+
</div>
22+
<div data-key="68" class="key">
23+
<kbd>D</kbd><br>
24+
<span class="sound">kick</span>
25+
</div>
26+
<div data-key="70" class="key">
27+
<kbd>F</kbd><br>
28+
<span class="sound">openhat</span>
29+
</div>
30+
<div data-key="71" class="key">
31+
<kbd>G</kbd><br>
32+
<span class="sound">boom</span>
33+
</div>
34+
<div data-key="72" class="key">
35+
<kbd>H</kbd><br>
36+
<span class="sound">ride</span>
37+
</div>
38+
<div data-key="74" class="key">
39+
<kbd>J</kbd><br>
40+
<span class="sound">snare</span>
41+
</div>
42+
<div data-key="75" class="key">
43+
<kbd>K</kbd><br>
44+
<span class="sound">tom</span>
45+
</div>
46+
<div data-key="76" class="key">
47+
<kbd>L</kbd><br>
48+
<span class="sound">tink</span>
49+
</div>
50+
</div>
51+
52+
53+
<audio data-key="65" src="sounds/clap.wav"></audio>
54+
<audio data-key="83" src="sounds/hihat.wav"></audio>
55+
<audio data-key="68" src="sounds/kick.wav"></audio>
56+
<audio data-key="70" src="sounds/openhat.wav"></audio>
57+
<audio data-key="71" src="sounds/boom.wav"></audio>
58+
<audio data-key="72" src="sounds/ride.wav"></audio>
59+
<audio data-key="74" src="sounds/snare.wav"></audio>
60+
<audio data-key="75" src="sounds/tom.wav"></audio>
61+
<audio data-key="76" src="sounds/tink.wav"></audio>
62+
63+
64+
<script src="drumkit.js"></script>
65+
</body>
66+
</html>

‎Drum/amrit2611/sounds/boom.wav

73.9 KB
Binary file not shown.

‎Drum/amrit2611/sounds/clap.wav

45.5 KB
Binary file not shown.

‎Drum/amrit2611/sounds/hihat.wav

30.8 KB
Binary file not shown.

‎Drum/amrit2611/sounds/kick.wav

107 KB
Binary file not shown.

0 commit comments

Comments
 (0)