Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

154
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda