Question

我希望keydown事件触发它在鼓机上各自按钮内分配给它的每个音频剪辑，但是由于某些原因，似乎只有活动按钮起作用。有什么想法吗？预先感谢！

HTML

<body>
  
  <div id='drum-machine' class='row justify-content-between'>
    
    <div id='display-1' class='cols-6'>
      <div class='row'>
        <button id='heater1' class='drum-pad'>Q
          <audio id='Q' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio>           </button>
        <button id='heater2' class='drum-pad'>W
          <audio id='W' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='heater3' class='drum-pad'>E
          <audio id='E' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' type='audio/mpeg'></audio>
        </button>
      </div>
      <div class='row'>
        <button id='heater4' class='drum-pad'>A
          <audio id='A' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='clap' class='drum-pad'>S
          <audio id='S' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='OHH' class='drum-pad'>D
          <audio id='D' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
      <div class='row'>
        <button id='KHH' class='drum-pad'>Z
          <audio id='Z' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'></audio>  
        </button>
        <button id='kick' class='drum-pad'>X
          <audio id='X' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='CHH' class='drum-pad'>C
          <audio id='C' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
    </div>
  </div>
  
  
</body>

JavaScript

var pad = document.getElementsByClassName('drum-pad');

for(let i = 0; i < pad.length; i++){
  pad[i].addEventListener('keydown', function(event){
    if (pad[i].children[0].id.charCodeAt() == event.keyCode){
     pad[i].children[0].play();
     pad[i].classList.toggle('active');
    }
  })  
};

Answer 1

var pads = document.getElementsByClassName('drum-pad');


document.addEventListener("keydown", e => {
  for(let i = 0; i < pads.length; i++) {
    pad = pads[i];
    if(String.fromCharCode(e.keyCode) == pad.innerText) {
      pad.children[0].play();
    }
  }
});

<div id='drum-machine' class='row justify-content-between'>
    
    <div id='display-1' class='cols-6'>
      <div class='row'>
        <button id='heater1' class='drum-pad'>Q
          <audio id='Q' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio>           </button>
        <button id='heater2' class='drum-pad'>W
          <audio id='W' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='heater3' class='drum-pad'>E
          <audio id='E' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3' type='audio/mpeg'></audio>
        </button>
      </div>
      <div class='row'>
        <button id='heater4' class='drum-pad'>A
          <audio id='A' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='clap' class='drum-pad'>S
          <audio id='S' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='OHH' class='drum-pad'>D
          <audio id='D' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
      <div class='row'>
        <button id='KHH' class='drum-pad'>Z
          <audio id='Z' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3'></audio>  
        </button>
        <button id='kick' class='drum-pad'>X
          <audio id='X' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3' type='audio/mpeg'></audio>  
        </button>
        <button id='CHH' class='drum-pad'>C
          <audio id='C' class='clip' src='https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3' type='audio/mpeg'></audio>  
        </button>
      </div>
    </div>
  </div>

您只需要检查键盘按下的字符是否与其中一个按钮中的字符相同，然后播放所述声音即可。另外，您需要侦听整个文档中的按键事件，而不仅仅是pad元素。如果您有任何疑问或需要澄清，请告诉我。

Javascript Keydown事件处理程序无法正常工作

1 个答案: