Javascript zum Erzielen eines Trommeleffekts

In diesem Artikel wird der spezifische Code von Javascript zur Erzielung eines Trommeleffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Drücken und halten Sie die entsprechende Tastatur, um verschiedene Töne anzuzeigen

<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>

CSS-Teil:

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;
}

Der erste Schritt besteht darin, die Tastatur zu drücken, um den Ton abzuspielen

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})

keyCode entsprechendes Diagramm

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren: