soojeong-park-ca / drum-kit

JavaScript Drum Kit

JS Drum Kit is a drum kit website built with Vanilla JavaScript.
It's designed for you to play the drum kit using designated keys on the keyboard, so the website only works on PC at the moment.

Table of contents

• Overview
  • Screenshots
  • Demo Link
• About the Project
  • Status
  • Built with
  • Reflection
• Author

Overview

Screenshots

Demo video:

js-drum-kit-demo-vid.mov

Demo Link

💻 Live Site URL

About the Project

Status

✅ Completed & Deployed

Built with

• HTML
• CSS
• Vanilla JS

Reflection

This was a quick and easy project built as I started taking the JavaScript 30 course by Wes Bos. Project goals included using just Vanilla JS to build a website. I decided to build first before listening to lectures because that’s how I learn best.

Some features to highlight in this project are:

using the currentTime property to reset the audio whenever the audio is supposed to reset before it finishes playing the whole sound

/* function */
function playAudio(e) {
  // find the key element that matches the key pressed
  const pressedKey = document.querySelector(`.key[data-key="${e.keyCode}"]`);

  // find the audio element that matches the key pressed
  const audioToPlay = document.querySelector(`audio[data-key="${e.keyCode}"]`);

  // if pressedKey exists:
  //--1. add "playing" class then remove
  pressedKey?.classList.add("playing");
  //--2. play the corresponding audio
  if (!audioToPlay) return;
  // ❗️ make audio play again from start if key is pressed again before audio ends
  //---a. reset audio
  else audioToPlay.currentTime = 0;
  //---b. play audio
  audioToPlay.play();
}

using transitionend event in an event listener to toggle a class instead of using setTimeout()

// toggle 'playing' class
window.addEventListener("transitionend", e => {
  if (e.propertyName !== "transform") return;
  e.target.classList.remove("playing");
});

The technologies implemented in this project are HTML, CSS, and Vanilla JavaScript. It was a quick but super fun project and I got to work with audio elements for the first time!

Author

Soojeong Park @codingsooj