This code snippet creates a drumkit by selecting HTML elements with a specific class, adding event listeners to them, and playing corresponding audio files when clicked. It also adds and removes a CSS class to create a visual effect.This code creates an array of HTML elements that plays a sound, and adds border to each element. It also removes t…

Drumkit with Transition Removal and Sound Playing.md

Vanilla JS Drumkit with animation and sound

Preview:

function drumkit() {
  const keys = document.querySelectorAll(".keys .key");

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
    this.classList.remove('playing');
  }

  // Loop through each key element
  keys.forEach(key => {
    let playing = false;
    let sound = key.querySelector(".sound").innerHTML;
    let drumkey = key.getAttribute("data-key");
    let drum = document.querySelector(`audio[data-key="${drumkey}"]`);

    // Add a transitionend event listener to the current key element, triggering the removeTransition function
    key.addEventListener('transitionend', removeTransition);

    key.addEventListener("mouseup", (event) => {
      event.preventDefault();
      playing = true;
      drum.currentTime = 0;
      drum.play();

      // Add/remove drum playing visual
      key.classList.add("playing");
      setTimeout(() => key.classList.remove("playing"), 200);
    });
  });
}

// Call the drumkit function
drumkit();

/*
  Notes:
  - Replaced for-of loop with forEach() method for better performance.
  - Moved the call to removeTransition() inside the removeTransition function itself to avoid creating a new function for each key.
  - Used currentTime property of the audio element to reset the playback position before playing to avoid issues when rapidly pressing a key.
*/

Associated Context
Type	Code Snippet ( .js )
Associated Tags	DOM manipulation Front-end programming event listener Element removal HTML elements CSS classes User interface class manipulation mouseup event jquery audio playback jquery removeTransition function Animation animation JavaScript function drumkit function Event handling data attributes playing state transitionend event DOM manipulation Web development
Based off	Drumkit lesson in JavaScript 30 by Wes Bos
💡 Smart Description	This code snippet creates a drumkit by selecting HTML elements with a specific class, adding event listeners to them, and playing corresponding audio files when clicked. It also adds and removes a CSS class to create a visual effect. Explanation of code: Creates an array of HTML elements that play a sound, and adds border to each element. It then removes transitions when the mouseup event is pressed by adding/removing instantly from all browsers in their audio list.
🔎 Suggested Searches	JavaScript function to create a drumkit with HTML elements How to add event listener to HTML elements in JavaScript How to play audio in JavaScript How to remove CSS class from HTML element in JavaScript How to select HTML elements with specific data attribute in JavaScript drumkit function How to create an array of elements in drumkit using JavaScript remove transition event listener for drumkit how to play sound and audio with a specific property on mouseup/mouseup events? How to use setInterval() method driver
Related Links	https://www.w3schools.com/jsref/event_transitionend.asp https://developer.mozilla.org/en-US/docs/Web/API/Element/attributes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set https://www.w3schools.com/jsref/met_element_addeventlistener.asp https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/ https://developer.mozilla.org/en-US/docs/Web/API/Element/classList https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/ https://www.w3schools.com/jsref/met_element_remove.asp https://www.digitalocean.com/community/tutorials/how-to-use-node-js-request-and-cheerio-to-set-up-simple-web-scraping
Related People	mdcarlson@pm.me
Sensitive Information	No Sensitive Information Detected
Shareable Link	https://mtzfox.pieces.cloud/?p=f2034497f6