JavaScript 01 — Drum Kit

实现效果

利用JS实现模拟打鼓的效果，敲击键盘字母（A-L），即可播放对应声音，同时当前字母伴随敲击声效出现动画。

<script>
  // 1、按键按下后 全局获取按键 和音频标签
  // 2、获取按键后 按下按键 按键播放音频 同时按键样式变化
  // 3、按键样式变化完后 恢复到最初状态

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

  function removePlaying(e) {
    console.log(e);
    if (e.propertyName !== 'transform') return
    this.classList.remove('playing')  // this代表当前控制的按键对象
    // console.log(this);
  }

  const keys = document.querySelectorAll('.key')
  // 按键样式变化完成 要想恢复到最初状态 就要获取所有的按键(即遍历按键) 
  // 查出(即监听)哪个按键已经变化完 再让它恢复(写函数)
  keys.forEach(key => {
    key.addEventListener('transitionend', removePlaying)
  });

  window.addEventListener('keydown', playSound)
</script>

<!-- 
  keydown 键按下的过程
  keypress 键被按下
  keyup 键被松开

  const声明一个只读的常量 一旦声明不可改变 并且要立即初始化
 -->