Skip to content

Commit ec564fd

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #19 from KryptonANSHU/Audio_Drumkit
Audio drumkit
2 parents f14e2ea + 010b4d5 commit ec564fd

9 files changed

Lines changed: 160 additions & 0 deletions

‎Song Kit/Audio/DBZ Dash Sound Effect.mp4‎

47 KB
Binary file not shown.

‎Song Kit/Audio/Dj Quads - The Improv.mp3‎

6.01 MB
Binary file not shown.

‎Song Kit/Audio/Kronicle - 2 Minutes (No Copyright Music).mp3‎

4.61 MB
Binary file not shown.

‎Song Kit/Audio/NF-When I Grow Up (Karaoke).mp3‎

7.44 MB
Binary file not shown.

‎Song Kit/Audio/Sparkle.mp3‎

15.5 MB
Binary file not shown.

‎Song Kit/index.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* CSS RESET */
2+
*{
3+
margin: 0px;
4+
padding: 0px;
5+
}
6+
7+
.con{
8+
height: 100vh;
9+
/* border: 2px solid black; */
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.con::before{
16+
content: "";
17+
position: absolute;
18+
background: url(mic.jpg);
19+
background-position: center center;
20+
height: 100%;
21+
width: 100%;
22+
z-index: -1;
23+
opacity: 0.8;
24+
}
25+
.pause{
26+
27+
font-size: 20px;
28+
border: 2px solid rgb(199 252 7 / 36%);
29+
position: absolute;
30+
top: 200px;
31+
right: 682px;
32+
font-family: 'Times New Roman', Times, serif;
33+
background-color: #332c33e6;
34+
}
35+
.pause span{
36+
color: white;
37+
}
38+
39+
40+
41+
.key{
42+
cursor: pointer;
43+
color: white;
44+
font-weight: bolder;
45+
border: 2px solid gray;
46+
font-size: 1.7em;
47+
padding: 10px 10px;
48+
background-color: #332c334d;
49+
margin: 10px 40px;
50+
transition: all 0.5s;
51+
}
52+
kbd{
53+
text-align: center;
54+
display: block;
55+
font-size: 0.8em;
56+
}
57+
58+
.playing{
59+
transform: scale(1.3);
60+
border: 3px solid rgb(199, 252, 7);
61+
62+
}

‎Song Kit/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Audio Drumkit</title>
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
11+
<body>
12+
<!-- Data-key is a Attribute -->
13+
<div class="con">
14+
15+
<div data-key="65" class="key">
16+
<kbd>A </kbd>
17+
<span class='sound'>Sparkle</span>
18+
19+
</div>
20+
21+
<div data-key="83" class="key">
22+
<kbd>S </kbd>
23+
<span class='sound'>Kronicle</span>
24+
</div>
25+
26+
<div data-key="68" class="key">
27+
<kbd>D </kbd>
28+
<span class='sound'>The Improv</span>
29+
</div>
30+
31+
<div data-key="70" class="key" >
32+
<kbd>F </kbd>
33+
<span class='sound'>NF Karaoke</span>
34+
</div>
35+
36+
<div data-key="71" class="key">
37+
<kbd>G </kbd>
38+
<span class='sound'>1 sec Music</span>
39+
</div>
40+
41+
<div class="pause">
42+
<span>Press P to Pause</span>
43+
</div>
44+
</div>
45+
46+
<audio data-key="65">
47+
<source src="Audio/Sparkle.mp3">
48+
</audio>
49+
50+
<audio data-key="83" src="Audio/Kronicle - 2 Minutes (No Copyright Music).mp3"></audio>
51+
<audio data-key="68" src="Audio/Dj Quads - The Improv.mp3"></audio>
52+
<audio data-key="70" src="Audio/NF-When I Grow Up (Karaoke).mp3"></audio>
53+
<audio data-key="71" src="Audio/DBZ Dash Sound Effect.mp4"></audio>
54+
55+
src <script src="script.js"></script>
56+
</body>
57+
58+
</html>

‎Song Kit/mic.jpg‎

300 KB
Loading

‎Song Kit/script.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
window.addEventListener('keydown', function (e) {
3+
let audio = document.querySelector(`audio[data-key = "${e.keyCode}"]`);
4+
5+
if(audio==null) return; // Stops the function from running if we press any ir-releveant key
6+
audio.currentTime= 0; // To rewind the song if we press the key Again
7+
audio.play();
8+
console.log('we are at 1');
9+
10+
// Now Adding class Playing
11+
12+
let grab= document.querySelector(`.key[data-key = "${e.keyCode}"]`);
13+
grab.classList.add('playing'); // Adding Class Playing
14+
15+
16+
// PAUSE
17+
// ---------------
18+
19+
window.addEventListener('keydown', function(e){
20+
let pause = e.keyCode;
21+
if(pause == 80){
22+
audio.pause();
23+
grab.classList.remove('playing');
24+
}
25+
});
26+
// ----------------
27+
28+
// Click to Play
29+
30+
31+
32+
// Removing transition when audio ends
33+
34+
function removeTransition(e){
35+
if(e.propertyName !== 'transform') return;
36+
this.classList.remove('playing');
37+
}
38+
39+
40+
});

0 commit comments

Comments
 (0)