# 01 - JavaScript Drum Kit
# 內容概要
按下鍵盤時,畫面中對應的元素亮起,同時播放聲音
# 重點整理
- 鍵盤事件
- 未指定按鍵錯誤
- 播放聲音
- 結束動畫
# 鍵盤事件
註冊鍵盤事件使用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)
})