01 - JavaScript Drum Kit

展示 (opens new window)

內容概要

按下鍵盤時,畫面中對應的元素亮起,同時播放聲音

重點整理

• 鍵盤事件
• 未指定按鍵錯誤
• 播放聲音
• 結束動畫

鍵盤事件

註冊鍵盤事件使用keyCode作為判斷使用者按下的是哪一個按鍵

同時找尋頁面對應的元素

function playHandler(e) {
  const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
  const key = document.querySelector(`div[data-key="${e.keyCode}"]`)
}
window.addEventListener('keydown' ,playHandler)

未指定按鍵錯誤

若使用者按下畫面中沒有的按鍵 由於其他按鍵的keyCode找不到對應的元素 audio和key都會是null

調整如下

if (!audio) return

播放聲音

一般的播放聲音

audio.play()

但有遇到一種情況

使用者在聲音未結束以前就按下同個按鍵第二次

聲音不會重複播放

這裡使用currentTime

audio.currentTime = 0

讓每次播放都是從頭開始

結束動畫

註冊transitionend事件

因為有變化的css不只一個

每個元素都會觸發多次transitionend

在這裡只鎖定css中的transform

function removeClass(e) {
  if (e.propertyName === 'transform') {
    e.currentTarget.classList.remove('playing')
  }
}
document.querySelectorAll('.key').forEach(key => {
  key.addEventListener('transitionend', removeClass)
})