javascript - 尝试在单击时播放音频文件时，无法读取undefined的 'keyCode'属性

Question

尝试使用现有功能将onclick事件添加到设备中，该功能会在按下某个键时播放声音

我尝试将playSound()函数添加到div中的onclick上，但始终收到未定义的错误，按键仍然可以正常工作。我也尝试过分离出可以播放声音的功能，但是还应该添加一个动画类，在尝试该操作时会遇到相同的未定义错误

    <div data-key="65" class="key" onclick="playSound()">
      <kbd>A</kbd>
      <span class="sound">clap</span>
    </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>

  <script>

    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);
  </script>

我希望既可以按一个键又可以单击/触摸屏幕上的字母以播放动画声音，目前只有按键可以正常使用

Answer 1

您将收到“无法读取未定义的属性'keyCode'的未定义”，因为您没有在playSound事件处理程序中将任何参数传递给onclick函数，并且预期会收到引用键盘事件的参数。

一种更有效的方法是使playSound函数更通用，以接收keyCode本身而不是键盘事件。这样，您可以在代码的其他位置调用它，而不会出现其他问题。

您还可以为单击时播放声音设置特定功能，可以将元素作为参数传递给该功能。

如下所示:

<div data-key="65" class="key" onclick="clickPlay(this)">
    <kbd>A</kbd>
    <span class="sound">clap</span>
</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>

// Receive the keyCode directly instead of the event
function playSound(key) {
    const audio = document.querySelector(`audio[data-key="${key}"]`);
    const keyEl = document.querySelector(`.key[data-key="${key}"]`);

    if (!audio) return;
    audio.currentTime = 0;
    audio.play();

    if (!keyEl) return;
    keyEl.classList.add('playing');
}

// New function to be executed when clicking
function clickPlay(el) {
    const key = el.attributes['data-key'].value; // Getting the keyCode from dom element
    playSound(key);
}

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', e => {
    const key = e.keyCode; // Getting the keyCode from keyboard
    playSound(key);
});