Drumkit in JavaScript is slow

Question

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.

I think you need to preload your audio files. Looks like the audio isn't being downloaded until after the user performs an action. That would explain why the delay occurs only the first time you trigger each sound and why there is more delay on a remote host vs running it locally. You might find inspiration on a solution with this answer, but let me know: https://stackoverflow.com/questions/31060642/preload-multiple-audio-files — Jscrip, Mar 21 '22 at 19:22

Drumkit in JavaScript is slow

0 Answers0