Keyup событие отменить повтор нажатия - PullRequest
Новая
       20

Keyup событие отменить повтор нажатия

1 голос
/ 14 марта 2019

Этот код является частью 30 Day Vanilla JS Challenge.

Если вы удерживаете нажатой звуковую клавишу, звук продолжает воспроизводиться без возможности заметить событие «закончилась» (удаление класса «игра»)за исключением 'D' и 'L', потому что длительность звука слишком мала (~ 0,16 с и ~ 0,04 с соответственно).

Но есть две вещи, которые я не совсем понимаю:

  1. Когда вы нажали «A» и нажали другую звуковую клавишу (и удерживает ее нажатой), предыдущая нажатая клавиша («A») останавливает «зацикливание» и ждет завершения новой звуковой клавиши, прежде чем «зацикливать» все вместеснова.Но из кода, который я написал, если клавиша не нажата (в карте keyStatus), она должна воспроизводить звук
  2. Если у меня одна или несколько клавиш, звук «зацикливается», но как только я запускаюkeyup все остальные ключи, которые все еще не работают, прекращают запуск своего события.Как JS справляется с этими делами?

Надеюсь, я достаточно ясно 

const allAudio = document.querySelectorAll('audio');
    allAudio.forEach(audio => audio.addEventListener('ended', () => {
      let dataKey = audio.getAttribute('data-key');
      document.querySelector(`.key[data-key="${dataKey}"]`).classList.remove('playing');
    }));
    
    let keyStatus = {};

    window.addEventListener('keyup', e => handleKeyPress(e));

    window.addEventListener('keydown', e => handleKeyPress(e));

    function handleKeyPress(event) {
      console.log(event);
      if(event.key === undefined)
        return;
      
      keyStatus[event.key] = event.type === "keydown";

      for(key in keyStatus) {
        if(keyStatus[key])
          playSound(key);
      }
    }

    function playSound(dataKey) {
      let key = document.querySelector(`.key[data-key="${dataKey}"]`);
      let audio = document.querySelector(`audio[data-key="${dataKey}"]`);

      if(key) {
        key.classList.add('playing');
      }

      if(audio) {
        audio.play();
      }
    }
html {
  font-size: 10px;
  background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
  background-size: cover;
}

body,html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #ffc600;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="keys">
    <div data-key="a" class="key">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </div>
    <div data-key="s" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="d" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="f" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="g" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="h" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="j" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="k" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="l" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
  </div>

  <audio data-key="a" src="sounds/clap.wav"></audio>
  <audio data-key="s" src="sounds/hihat.wav"></audio>
  <audio data-key="d" src="sounds/kick.wav"></audio>
  <audio data-key="f" src="sounds/openhat.wav"></audio>
  <audio data-key="g" src="sounds/boom.wav"></audio>
  <audio data-key="h" src="sounds/ride.wav"></audio>
  <audio data-key="j" src="sounds/snare.wav"></audio>
  <audio data-key="k" src="sounds/tom.wav"></audio>
  <audio data-key="l" src="sounds/tink.wav"></audio>
</body>
</html>
...