Merge pull request #330 from Gaurav05082002/main

musical drum added
codemistic · Oct 10, 2022 · 9c035b8 · 9c035b8
2 parents 7c7ffcc + 49d1241
commit 9c035b8
Show file tree

Hide file tree

Showing 14 changed files with 174 additions and 0 deletions.
diff --git a/jsdrum/.vscode/settings.json b/jsdrum/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_boom.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_boom.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_clap.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_clap.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_hihat.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_hihat.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_kick.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_kick.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_openhat.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_openhat.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_ride (1).wav b/jsdrum/01 - JavaScript Drum Kit_sounds_ride (1).wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_ride.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_ride.wav
diff --git a/jsdrum/01 - JavaScript Drum Kit_sounds_snare.wav b/jsdrum/01 - JavaScript Drum Kit_sounds_snare.wav
diff --git a/jsdrum/bg.jpg b/jsdrum/bg.jpg
diff --git a/jsdrum/bgr.jpg b/jsdrum/bgr.jpg
diff --git a/jsdrum/index.html b/jsdrum/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel='stylesheet' href='./style.css'> 
+    <title>part1</title>
+</head>
+<body>
+    <div class="divine" >
+
+        <div class="heading">USE OF EARPHONES IS MUST</div>
+        <div class="heading">Press the keys A , S ,D ,F....... ENJOY MUSIC</div>
+
+        <div class="keys">
+            <div data-key="65" class="key">
+              <kbd>A</kbd>
+              <span class="sound">clap</span>
+            </div>
+            <div data-key="83" class="key">
+              <kbd>S</kbd>
+              <span class="sound">hihat</span>
+            </div>
+            <div data-key="68" class="key">
+              <kbd>D</kbd>
+              <span class="sound">kick</span>
+            </div>
+            <div data-key="70" class="key">
+              <kbd>F</kbd>
+              <span class="sound">openhat</span>
+            </div>
+            <div data-key="71" class="key">
+              <kbd>G</kbd>
+              <span class="sound">boom</span>
+            </div>
+            <div data-key="72" class="key">
+              <kbd>H</kbd>
+              <span class="sound">ride</span>
+            </div>
+            <div data-key="74" class="key">
+              <kbd>J</kbd>
+              <span class="sound">snare</span>
+            </div>
+            <div data-key="75" class="key">
+              <kbd>K</kbd>
+              <span class="sound">tom</span>
+            </div>
+
+          </div>
+
+
+
+
+        <audio data-key="65" src="01 - JavaScript Drum Kit_sounds_boom.wav" ></audio>
+        <audio data-key="83" src="01 - JavaScript Drum Kit_sounds_clap.wav" ></audio>
+        <audio data-key="68" src="01 - JavaScript Drum Kit_sounds_hihat.wav" ></audio>
+        <audio data-key="70" src="01 - JavaScript Drum Kit_sounds_kick.wav" ></audio>
+        <audio data-key="71" src="01 - JavaScript Drum Kit_sounds_openhat.wav" ></audio>
+        <audio data-key="72" src="01 - JavaScript Drum Kit_sounds_ride.wav" ></audio>
+        <audio data-key="74" src="01 - JavaScript Drum Kit_sounds_snare.wav" ></audio>
+        <audio data-key="75" src="01 - JavaScript Drum Kit_sounds_ride (1).wav" ></audio>
+    </div>
+    <script src='./main.js'></script>
+</body>
+</html>
diff --git a/jsdrum/main.js b/jsdrum/main.js
@@ -0,0 +1,31 @@
+//  window.addEventListener('keydown', function(e) {
+//     //    const audio = document.querySelector(`audio[data-key="${e.keycode}"]`);
+//        const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
+//        if (!audio) return;
+//     audio.play();
+//     audio.currentTime = 0;
+//     console.log(audio);
+// });
+
+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'); //changing the class of key div 
+    audio.currentTime = 0; // it starts the music before the end of previous music
+    audio.play();
+  }
+
+  // the e represents event , here the key of keyboard keyCode is the property of event e 
+
+  const keys = Array.from(document.querySelectorAll('.key'));
+  keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+
+  window.addEventListener('keydown', playSound); //eventlistnersyntax addEventListener('event (i.e click ,keypress .key down  )  , function due to that event ', playSound);
diff --git a/jsdrum/style.css b/jsdrum/style.css
@@ -0,0 +1,74 @@
+.divine {
+    color: aqua;
+    background-image: url(bg.jpg);
+    height: 100vh;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    /* display: flex; */
+
+     /* flex-wrap: wrap; */
+
+
+}
+
+.heading {
+    text-align: center;
+    color: white;
+    background: rgba(0,0,0,0.4);
+    text-shadow: 0 0 .5rem black;
+    font-size: xx-large;
+}
+
+ .keys {
+    display: flex;
+    flex: 1;
+    min-height: 100vh;
+    align-items: center;
+    justify-content: center;
+    color: aqua;
+    background-image: url(bg.jpg);
+    height: 100vh;
+    width: 100%;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    display: flex;
+
+     flex-wrap: wrap;
+
+  }
+
+  .key {
+    border: .4rem solid black;
+    border-radius: .5rem;
+    margin: 1rem;
+    font-size: 1.5rem;
+    padding: 1rem .5rem;
+    transition: all .07s ease;
+    width: 5rem;
+    text-align: center;
+    color: white;
+    background: rgba(0,0,0,0.4);
+    text-shadow: 0 0 .5rem black;
+
+  }
+
+  .playing {
+    transform: scale(1.1);
+    border-color: #ffc600;
+    box-shadow: 0 0 1rem #ffc600;
+  }
+
+  kbd {
+    display: block;
+    font-size: 4rem;
+  }
+
+  .sound {
+    font-size: 1rem;
+    text-transform: uppercase;
+    letter-spacing: .1rem;
+    color: #ffc600;
+  }