Javascript zum Erzielen eines Trommeleffekts

<div Klasse="Schlüssel">
  <div Datenschlüssel="65" Klasse="Schlüssel">
   <kbd>Eine</kbd>
   <span class="sound">klatschen</span>
  </div>
  <div Datenschlüssel="83" Klasse="Schlüssel">
   <kbd>S</kbd>
   <span class="sound">Hi-Hat</span>
  </div>
  <div Datenschlüssel="68" Klasse="Schlüssel">
   <kbd>D</kbd>
   <span class="sound">Tritt</span>
  </div>
  <div Datenschlüssel="70" Klasse="Schlüssel">
   <kbd>F</kbd>
   <span class="sound">offener Hut</span>
  </div>
  <div Datenschlüssel="71" Klasse="Schlüssel">
   <kbd>G</kbd>
   <span class="sound">Boom</span>
  </div>
  <div Datenschlüssel="72" Klasse="Schlüssel">
   <kbd>H</kbd>
   <span class="sound">Fahrt</span>
  </div>
  <div Datenschlüssel="74" Klasse="Schlüssel">
   <kbd>J</kbd>
   <span class="sound">Schlinge</span>
  </div>
  <div Datenschlüssel="75" Klasse="Schlüssel">
   
   <kbd>K</kbd>
   <span class="sound">Tom</span>
  </div>
  <div Datenschlüssel="76" Klasse="Schlüssel">
   <kbd>L</kbd>
   <span class="sound">klimpern</span>
  </div>
  </div>
 
  <audio data-key="65" src="sounds/clap.wav"></audio>
  <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>

html {
 Schriftgröße: 10px;
 Hintergrund: url('../img/background.jpg') unten in der Mitte;
 Hintergrundgröße: Abdeckung;
}

Textkörper,html {
 Rand: 0;
 Polsterung: 0;
 Schriftfamilie: serifenlos;
}

.Schlüssel {
 Anzeige: Flex;
 biegen: 1;
 Mindesthöhe: 100vh;
 Elemente ausrichten: zentrieren;
 Inhalt ausrichten: zentriert;
}

.Schlüssel {
 Rand: .4rem tiefschwarz;
 Randradius: .5rem;
 Rand: 1rem;
 Schriftgröße: 1,5rem;
 Polsterung: 1rem .5rem;
 Übergang: alles 0,07 s Leichtigkeit;
 Breite: 10rem;
 Textausrichtung: zentriert;
 Farbe: weiß;
 Hintergrund: rgba(0,0,0,0,4);
 Textschatten: 0 0 ,5rem schwarz;
}

.spielen {
 transformieren: Skalierung(1.1);
 Rahmenfarbe: #ffc600;
 Kastenschatten: 0 0 1rem #ffc600;
}

kbd {
 Anzeige: Block;
 Schriftgröße: 4rem;
}

.Klang {
 Schriftgröße: 1,2rem;
 Texttransformation: Großbuchstaben;
 Buchstabenabstand: .1rem;
 Farbe: #ffc600;
}

window.addEventListener("Taste gedrückt",Funktion(e){
   Konsole.log(e.Schlüsselcode);
   const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
   const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
   // Nach jeder Wiedergabe initialisieren if (!audio) return;
    audio.aktuelleZeit = 0;
    audio.abspielen();

     key.classList.add('spielen');

     setzeTimeout(Funktion(){
     key.classList.remove('spielen');
     },70);
    
    //Nach dem Drücken der Taste den Effekt herausbewegen})