Question

我正在尝试用js制作架子鼓。它可以在键盘上正常工作，但是，我希望打击垫也可以单击。我尝试将onclick事件添加到hmtl中的“键”元素，添加“ window.addEventListener（'click'，playSound）;'没有成功。 JS小提琴-https://jsfiddle.net/JosueOrNoSway/hps2q940/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DrumKit</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Play|Roboto+Condensed" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet">
    <link rel="icon" href="img/drumTab.png">
    </head>
      <body>


        <h1 class="title">Beats on the Fly</h1>

      <div class="wrapper">
      <div class="keys">
            <!-- FIRST ROW OF FOUR KEYPADS -->
        <div data-key="50" class="key">
          <kdb>2</kbd>
          <span class="sound">KICK1</span>
        </div>

        <div data-key="51" class="key">
          <kdb>3</kbd>
          <span class="sound">TOM1</span>
        </div>

        <div data-key="52" class="key">
          <kdb>4</kbd>
          <span class="sound">TOM2</span>
        </div>

        <div data-key="53" class="key">
          <kdb>5</kbd>
          <span class="sound">TOM3</span>
        </div>
    <!-- SECOND ROW -->
        <div data-key="81" class="key">
          <kdb>Q</kbd>
          <span class="sound">SHAKE</span>
        </div>

        <div data-key="87" class="key">
          <kdb>W</kbd>
          <span class="sound">SHHH</span>
        </div>

        <div data-key="69" class="key">
          <kdb>E</kbd>
          <span class="sound">BELL</span>
        </div>

        <div data-key="82" class="key">
          <kdb>R</kbd>
          <span class="sound">CLAP</span>
        </div>


    <!-- THIRD ROW OF KEYS -->
        <div data-key="65" class="key">
          <kdb>A</kbd>
          <span class="sound">OPEN</span>
        </div>

        <div data-key="83" class="key">
          <kdb>S</kbd>
          <span class="sound">RIDE</span>
        </div>

        <div data-key="68" class="key">
          <kdb>D</kbd>
          <span class="sound">CRASH</span>
        </div>

        <div data-key="70" class="key">
          <kdb>F</kbd>
          <span class="sound">SNARE1</span>
        </div>


      <!-- FOURTH ROW OF KEYS -->
        <div data-key="90" class="key">
          <kdb>Z</kbd>
          <span class="sound">KICK2</span>
        </div>

        <div data-key="88" class="key">
          <kdb>X</kbd>
          <span class="sound">CLICK</span>
        </div>

        <div data-key="67" class="key">
          <kdb>C</kbd>
          <span class="sound">HIHAT</span>
        </div>

        <div data-key="86" class="key">
          <kdb>V</kbd>
          <span class="sound">SNARE2</span>
        </div>
      </div>
  </div>

        <!-- FIRST ROW OF KEYPADS -->
    <audio data-key="50" src="sounds/kick1.wav"></audio>
    <audio data-key="51" src="sounds/tom-808.wav"></audio>
    <audio data-key="52" src="sounds/tom-acoustic01.wav"></audio>
    <audio data-key="53" src="sounds/tom-acoustic02.wav"></audio>

    <!-- SECOND ROW OF KEYPADS -->
    <audio data-key="81" src="sounds/shaker-analog.wav"></audio>
    <audio data-key="87" src="sounds/shaker-suckup.wav"></audio>
    <audio data-key="69" src="sounds/cowbell-808.wav"></audio>
    <audio data-key="82" src="sounds/clap-tape.wav"></audio>

    <!-- THIRD ROW OF KEYPADS -->
    <audio data-key="65" src="sounds/openhat-acoustic01.wav"></audio>
    <audio data-key="83" src="sounds/ride.wav"></audio>
    <audio data-key="68" src="sounds/crash-acoustic.wav"></audio>
    <audio data-key="70" src="sounds/snare-808.wav"></audio>

    <!-- FOURTH ROW OF KEYPADS -->
    <audio data-key="90" src="sounds/kick.wav"></audio>
    <audio data-key="88" src="sounds/perc-808.wav"></audio>
    <audio data-key="67" src="sounds/hihat-808.wav"></audio>
    <audio data-key="86" src="sounds/snare.wav"></audio>



    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/main.js"></script>
  </body>
</html>

CSS

body {

   background-image:url('https://media.giphy.com/media/qnVdPZ9mg3u6I/giphy.gif');
   background-repeat:no-repeat;
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   margin: 0 auto;
   overflow: hidden;

}



h1.title {
  text-align: center;
  font-family: 'Libre Baskerville', serif;
  color: #fff;
  background-color: rgba(77, 163, 179, 0.2);
  width: 20%;
  margin: 2rem auto;
  display: block;
  border-radius: 10px;
  font-size: 50px;
  transition: all 1s;

}

.anim {
  animation: fadeIn 2.5s;

}

@keyframes fadeIn {
  from {
    opacity: 0;
    margin-top: 10rem;
  }
  to {
    opacity: 1;
    margin-top: 2rem;
  }
}

div.keys {

  width: 25%;
  margin: 7.5rem auto;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}



.key {

    border: 4px solid black;
    border-radius: 5px;
    margin: 0;
    font-size: 1.5rem;
    transition: all 0.07s;
    width: 120px;
    height: 120px;
    text-align: center;
    color: rgb(219, 255, 228);
    background: rgba(0,0,0,0.4);
    text-shadow: 0 0 5px black;

}

.playing {

  transform:scale(1.1);
  border-color:#6bffe0;
  box-shadow: 0 0 10px #6bffe0;

}

kbd {
  display: block;
  font-size: 40px;
}

.sound {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6bffe0;

}

JS

function playSound(e) {


  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
  const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
  if(!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
};


function removeTransition(e) {

    if(e.propertyName !== 'transform') return;
    this.classList.remove('playing');
}
const keys = document.querySelectorAll('.key')
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown', playSound);

Answer 1

我们可以重用大部分playSound来处理点击。当您单击时，没有键码，因此我们将从被单击的div中查找它。

// make those pads pop //
function playSound(e) {
  let code;
  if (e.keyCode) {
    // it was a keypress, get the keycode as usual
    code = e.keyCode;
  } else {
    // it was a click.  Read the keycode from the div that was clicked
    code = this.dataset.key;
  }

  const audio = document.querySelector(`audio[data-key="${code}"]`);
  const key = document.querySelector(`.key[data-key="${code}"]`);

  if(!audio) return;
  audio.currentTime = 0;
  audio.play();
  key.classList.add('playing');
}

然后为所有div分配clickhandler。我将其与您的过渡分配。我的印象是forEach对querySelectorAll不满意，所以我做了些修改

const keys = document.querySelectorAll('.key')
for (let i=0, key; key = keys[i]; i++) {
  key.addEventListener('transitionend', removeTransition);
  key.addEventListener('click', playSound);
}

DrumKit键击有效，但不能单击

1 个答案: