-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (103 loc) · 4.08 KB
/
index.html
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
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drum Kit | Welcome </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!--Creating Drum kit Body-->
<header class="container">
<div class="header">
<h1>Welcome To Acoustic Drum kit</h1>
<p> Drums are a percussion instrument that provide the rhythm and base sound for any musical piece.
Here are some musical Acoustic sounds added in the below keys.
The below musical instruments have some percussion sounds like <span>Clap , Hihat , Kick,OPenHat,Boom etc. </span>
Now click below displayed keys to hear some drums sounds and enjoy!!!</p>
<h2 class="blink">Click below! Start Playing!<i class="fa fa-hand-o-down" style="font-size:20px;color:red"></i></h2>
</div>
<section>
<div class = container>
<div class="keys">
<div data-key="86" class="key">
<kbd>V</kbd>
<span class="sound">clap</span>
</div>
<div data-key="69" class="key">
<kbd>E</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="78" class="key">
<kbd>N</kbd>
<span class="sound">kick</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">boom</span>
</div>
<div data-key="84" class="key">
<kbd>T</kbd>
<span class="sound">ride</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">snare</span>
</div>
<div data-key="82" class="key">
<kbd>R</kbd>
<span class="sound">tom</span>
</div>
<div data-key="85" class="key">
<kbd>U</kbd>
<span class="sound">tink</span>
</div>
<div data-key="77" class="key">
<kbd>M</kbd>
<span class="sound">revcrash</span>
</div>
</div>
</div>
<audio data-key="86" src="sounds/clap.wav"></audio>
<audio data-key="69" src="sounds/hihat.wav"></audio>
<audio data-key="78" src="sounds/kick.wav"></audio>
<audio data-key="75" src="sounds/openhat.wav"></audio>
<audio data-key="65" src="sounds/boom.wav"></audio>
<audio data-key="84" src="sounds/ride.wav"></audio>
<audio data-key="68" src="sounds/snare.wav"></audio>
<audio data-key="82" src="sounds/tom.wav"></audio>
<audio data-key="85" src="sounds/tink.wav"></audio>
<audio data-key="77" src="sounds/revcrash.wav"></audio>
</section>
</header>
<footer>
<p class="links">© 2020 venkat | Link <i class="fa fa-hand-o-right" style="font-size:20px;color:white"></i>
<a href ="https://github.com/VenkatProjects/javascript-DrumKit" target="_blank"> Get Repos </a> |
You can get more projects from here <i class="fa fa-hand-o-right" style="font-size:20px;color:white"></i>
<a href = "https://github.com/VenkatProjects"> Get More Projects</a></p>
</footer>
<!--Javascript code here-->
<script>
function removeTransition(e) {
if (e.propertyName !== 'transform') return;
e.target.classList.remove('playing');
}
function playSound(e) {
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}
const keys = Array.from(document.querySelectorAll('.key'));
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);
</script>
</body>
</html>