Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

152
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda