Add files via upload

acf-code · Mar 2, 2023 · 7ac9071 · 7ac9071
1 parent 71503d0
commit 7ac9071
Show file tree

Hide file tree

Showing 22 changed files with 373 additions and 0 deletions.
diff --git a/assets/bg.mp4 b/assets/bg.mp4
diff --git a/assets/favicon.png b/assets/favicon.png
diff --git a/assets/sound1.mp3 b/assets/sound1.mp3
diff --git a/assets/sound11.mp3 b/assets/sound11.mp3
diff --git a/assets/sound12.mp3 b/assets/sound12.mp3
diff --git a/assets/sound14.mp3 b/assets/sound14.mp3
diff --git a/assets/sound16.mp3 b/assets/sound16.mp3
diff --git a/assets/sound17.mp3 b/assets/sound17.mp3
diff --git a/assets/sound19.mp3 b/assets/sound19.mp3
diff --git a/assets/sound2.mp3 b/assets/sound2.mp3
diff --git a/assets/sound22.mp3 b/assets/sound22.mp3
diff --git a/assets/sound23.mp3 b/assets/sound23.mp3
diff --git a/assets/sound3.mp3 b/assets/sound3.mp3
diff --git a/assets/sound30.mp3 b/assets/sound30.mp3
diff --git a/assets/sound31.mp3 b/assets/sound31.mp3
diff --git a/assets/sound32.mp3 b/assets/sound32.mp3
diff --git a/assets/sound33.mp3 b/assets/sound33.mp3
diff --git a/assets/sound34.mp3 b/assets/sound34.mp3
diff --git a/assets/sound6.mp3 b/assets/sound6.mp3
diff --git a/index.html b/index.html
@@ -0,0 +1,180 @@
+<head>
+  <!-- Required Meta Tags -->
+  <meta charset="UTF-8" />
+  <meta name="description" content="Music Launchpad" />
+  <meta name="keywords" content="Music, Game, Music Launchpad" />
+  <meta name="author" content="Swatilekha Roy" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0,
+  maximum-scale=1.0, user-scalable=no"
+  />
+
+  <!-- Favicon -->
+  <link rel="shortcut icon" href="assets/favicon.png" type="image/x-icon" />
+
+  <!-- Stylesheet -->
+  <link rel="stylesheet" type="text/css" href="style.css" />
+
+  <!-- Font Import -->
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Sofia+Sans:wght@300;400&display=swap"
+    rel="stylesheet"
+  />
+
+  <!-- Title -->
+  <title>Music Launchpad</title>
+</head>
+
+<body>
+  <!-- Heading -->
+  <h1>DJ CODE WARRIOR</h1>
+
+  <!-- Description -->
+  <p>Play the music launchpad, and have fun!</p>
+
+  <!-- Full Background Video -->
+  <video autoplay muted loop>
+    <source src="assets/bg.mp4" type="video/mp4" />
+  </video>
+
+  <!-- Launchpad keyboard -->
+  <table>
+    <tr>
+      <td colspan="2">
+        <button key="1">1</button>
+      </td>
+      <td>
+        <button key="2">2</button>
+      </td>
+      <td>
+        <button key="3">3</button>
+      </td>
+      <td>
+        <button key="4">4</button>
+      </td>
+      <td>
+        <button key="5">5</button>
+      </td>
+      <td><button key="6">6</button></td>
+    </tr>
+
+    <tr>
+      <td>
+        <button key="a">A</button>
+      </td>
+      <td colspan="2">
+        <button key="b">B</button>
+      </td>
+      <td>
+        <button key="c">C</button>
+      </td>
+      <td>
+        <button key="d">D</button>
+      </td>
+      <td>
+        <button key="e">E</button>
+      </td>
+      <td>
+        <button key="f">F</button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        <button key="g">G</button>
+      </td>
+      <td>
+        <button key="h">H</button>
+      </td>
+      <td colspan="2">
+        <button key="i">I</button>
+      </td>
+      <td>
+        <button key="j">J</button>
+      </td>
+      <td>
+        <button key="k">K</button>
+      </td>
+      <td>
+        <button key="l">L</button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        <button key="m">M</button>
+      </td>
+      <td>
+        <button key="n">N</button>
+      </td>
+      <td>
+        <button key="o">O</button>
+      </td>
+      <td colspan="2">
+        <button key="p">P</button>
+      </td>
+      <td>
+        <button key="q">Q</button>
+      </td>
+      <td>
+        <button key="r">R</button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        <button key="s">S</button>
+      </td>
+      <td>
+        <button key="t">T</button>
+      </td>
+      <td>
+        <button key="u">U</button>
+      </td>
+      <td>
+        <button key="v">V</button>
+      </td>
+      <td colspan="2">
+        <button key="w">W</button>
+      </td>
+      <td>
+        <button key="x">X</button>
+      </td>
+    </tr>
+
+    <tr>
+      <td>
+        <button key="y">Y</button>
+      </td>
+      <td>
+        <button key="z">Z</button>
+      </td>
+      <td>
+        <button key="7">7</button>
+      </td>
+      <td>
+        <button key="8">8</button>
+      </td>
+      <td>
+        <button key="9">9</button>
+      </td>
+      <td colspan="2">
+        <button key="0">0</button>
+      </td>
+    </tr>
+  </table>
+
+  <!-- howler JavaScript Import -->
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"
+    integrity="sha512-6+YN/9o9BWrk6wSfGxQGpt3EUK6XeHi6yeHV+TYD2GR0Sj/cggRpXr1BrAQf0as6XslxomMUxXp2vIl+fv0QRA=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+
+  <!-- JavaScript -->
+  <script type="text/javascript" src="script.js"></script>
+</body>
diff --git a/script.js b/script.js
@@ -0,0 +1,131 @@
+function handleMouseUp() {
+  // Add code here
+}
+
+function handleMouseDown() {
+  // Add code here
+}
+
+// Select all buttons and store inside the variable
+var buttons = document.querySelectorAll("button");
+buttons.forEach(function (btn, index) {
+  btn.setAttribute("sound", index);
+  btn.addEventListener("mousedown", playLPSound);
+  btn.addEventListener("mouseup", stopLPSound);
+});
+
+// Store all audio files
+var audiofiles = [
+  "assets/sound1.mp3",
+  "assets/sound2.mp3",
+  "assets/sound3.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx4.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx5.mp3",
+  "assets/sound6.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx7.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx8.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx9.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx10.mp3",
+  "assets/sound11.mp3",
+  "assets/sound12.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx13.mp3",
+  "assets/sound14.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx15.mp3",
+  "assets/sound16.mp3",
+  "assets/sound17.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx18.mp3",
+  "assets/sound19.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx20.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx21.mp3",
+  "assets/sound22.mp3",
+  "assets/sound23.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx24.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx25.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx26.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx27.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx28.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx29.mp3",
+  "assets/sound30.mp3",
+  "assets/sound31.mp3",
+  "assets/sound32.mp3",
+  "assets/sound33.mp3",
+  "assets/sound34.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx35.mp3",
+  "https://acf.qoom.space/sounds/launchpad/soundfx36.mp3",
+];
+
+// 6, 16
+
+// Create a new Howl object for each time
+var soundEffects = audiofiles.map(function (soundfile) {
+  var sound = new Howl({
+    src: [soundfile],
+    loop: false,
+  });
+  return sound;
+});
+
+// Start Launchpad sound
+function playLPSound(e) {
+  var thisbutton = this;
+  var i = parseInt(thisbutton.getAttribute("sound"));
+  thisbutton.classList.add("pressed");
+  if (!soundEffects[i].playing()) {
+    soundEffects[i].play();
+  }
+}
+
+// Stop Launchpad sound
+function stopLPSound(e) {
+  var thisbutton = this;
+  var i = parseInt(thisbutton.getAttribute("sound"));
+  setTimeout(function () {
+    thisbutton.classList.remove("pressed");
+  }, 2000);
+}
+
+// Keyboard button input support
+function handleKeyUp(e) {
+  buttons.forEach(function (button) {
+    if (button.getAttribute("key") === e.key) {
+      playLPSound.call(button, e);
+      return;
+    }
+  });
+}
+
+function handleKeyDown(e) {
+  buttons.forEach(function (button) {
+    if (button.getAttribute("key") === e.key) {
+      stopLPSound.call(button, e);
+      return;
+    }
+  });
+}
+
+// Keyboard input function calls
+document.addEventListener("keydown", handleKeyDown);
+document.addEventListener("keyup", handleKeyUp);
+
+// Function Declarations, method cancels event is it's cancelable
+function preventDefault(e) {
+  e = e || window.event;
+  if (e.preventDefault) {
+    e.preventDefault();
+  }
+  e.returnValue = false;
+}
+
+// Function Calls
+window.addEventListener("wheel", preventDefault, { passive: false });
+window.addEventListener("touchstart", preventDefault, { passive: false });
+window.addEventListener("touchmove", preventDefault, { passive: false });
+document.addEventListener("wheel", preventDefault, { passive: false });
+document.addEventListener("touchstart", preventDefault, { passive: false });
+document.addEventListener("touchmove", preventDefault, { passive: false });
+
+// Touch screen buttons support
+buttons.forEach(function (btn, index) {
+  btn.addEventListener("touchstart", playLPSound);
+  btn.addEventListener("touchend", stopLPSound);
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,62 @@
+* {
+    box-sizing: border-box;
+    font-family: 'Sofia Sans', sans-serif;
+}
+
+/* Background Video */
+video {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  min-width: 100%;
+  min-height: 100%;
+  z-index: -20;
+}
+
+/* Heading */
+h1 {
+    font-size: 70px;
+    text-align: center;
+    color: #fff;
+    text-shadow: 1px 1px 2px black, 0 0 25px rgb(255, 217, 0), 0 0 5px rgb(56, 56, 125);
+}
+
+/* Body text */
+p {
+    text-align: center;
+    color: #fff;
+    font-size: 20px;
+}
+
+/* Table */
+table {
+    width: 50vmin;
+    height: 50vmin;
+    margin: auto;
+    margin-top: 1vmin;
+    border-spacing: 0vmin;
+    border-collapse: collapse;
+}
+td button{
+    width: 12vmin;
+    height: 12vmin;
+    border: solid 2px black;
+    border-radius: 2vmin;
+    background: radial-gradient(#EFEFEF 0%, #2d74ff 70%);
+    background-size: cover;
+}
+
+/* Button Press */
+.pressed {
+    animation: newcolors 3s infinite;
+    background-image: none;
+}
+
+@keyframes newcolors {
+    0% {background-color: #ff00004d;}
+    20% {background-color: #ff7b00;}
+    40% {background-color: #ff7b00;}
+    60% {background-color: #00ff004d;}
+    80% {background-color: #269dff;}
+    100% {background-color: #7926ff;}
+}