學習重點：鍵盤事件監聽/音檔選取播放/transitionend事件

步驟：建立鍵盤事件（按下鍵盤）>啟動播放函式（選取要啟動的音檔+加特效的按鍵並執行播放+特效）>按壓結束並結束特效

1. e.target監聽點擊/e.keyCode監聽鍵盤
2. 利用querySelector選擇data-* Attributes >querySelector(`lassName/property[att~=val]`)

const audio = document.querySelector(`audio[data-key=”${e.keyCode}”]`)
const key = document.querySelector(`.key[data-key=”${e.keyCode}”]`)

3. audio的播放與開始位置

audio.currentTime = 0; //從頭開始
audio.play()

4. addEventListener監聽函式中的this指向為監聽的對象(e.target)，可使用console.log(this)檢測

function removeTransition(e) {
if (e.propertyName !== ‘transform’) return;
this.classList.remove(‘playing’)//e.target.classList.remove(‘playing’)
console.log(this)}

5. 利用transitionend之event在transition動畫結束後移除效果className

keys.forEach(key => key.addEventListener(‘transitionend’, removeTransition))