Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

151
Views
Drumkit in JavaScript is slow

I created a drumkit using vanilla js. but it is slow when I hosted it on netlify. When I press all the keys once after that it works fine. But for the first time the response time after pressing a key is high.

for (let index = 0; index < document.querySelectorAll(".drum-key").length; index++) {
  document.querySelectorAll(".drum-key")[index].addEventListener("click", function () {
    const divInnerContent = this.firstElementChild.textContent;
    console.log(divInnerContent);
    console.log("click registered");
    playSound(divInnerContent);
    addAnimation(divInnerContent);
  });
}

document.addEventListener("keydown", function(event){
  console.log("key pressed "+ event.key);
  playSound(event.key.toUpperCase());
  addAnimation(event.key.toUpperCase());
})

function playSound(input){
  switch (input) {
    case 'A':
      const clap = new Audio('./Resources/Sounds/clap.wav');
      clap.play(); 
      break;
    case 'S':
      const hihat = new Audio('./Resources/Sounds/hihat.wav');
      hihat.play(); 
      break;
    case 'D':
      const kick = new Audio('./Resources/Sounds/kick.wav');
      kick.play(); 
      break;
    case 'F':
      const openhat = new Audio('./Resources/Sounds/openhat.wav');
      openhat.play(); 
      break;
    case 'G':
      const boom = new Audio('./Resources/Sounds/boom.wav');
      boom.play(); 
      break;
    case 'H':
      const ride = new Audio('./Resources/Sounds/ride.wav');
      ride.play(); 
      break;
    case 'J':
      const snare = new Audio('./Resources/Sounds/snare.wav');
      snare.play(); 
      break;
    case 'K':
      const tom = new Audio('./Resources/Sounds/tom.wav');
      tom.play(); 
      break;
    case 'L':
      const tink = new Audio('./Resources/Sounds/tink.wav');
      tink.play(); 
      break;
  }
}

function addAnimation(currentKey){
  const activeKey = document.querySelector("."+currentKey);
  activeKey.classList.add("playing");
  setTimeout(function (){
    activeKey.classList.remove("playing")
  }, 100)
}

If there is anyway of making it faster, please tell.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!