依照Alex老師的教學練習

首先去官網的Github下載範例檔，直接寫JS即可。
先寫出立即執行式，並放入要使用的監聽

(function () {
    // 鍵盤、捲軸、物件旋轉，大多用window來做
    window.addEventListener('keydown', playHandler);
    //keydown = 可以按著不放
    //keyup = 只能按一次
 })();

開始寫 playHandler 方訓的內容，先確認有抓到資訊

    let playHandler = e => { 
        // console.log(e); 
        //按鍵盤觸發後出現該按鍵資訊
        //注意看key和keyCode
       }

抓取節點，注意是ES6寫法

const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); 
const dom = document.querySelector(`div[data-key="${e.keyCode}"]`);

播放音效

audio.play();

為了使按住不放的效果更明顯，可以加上

audio.currentTime = 0;
//回到音效檔起始點，使按住不放時出現重複播放的效果

為了讓被觸發的按鍵效果更明顯，加入CSS效果

dom.classList.add('playing'); 

這時避免誤觸非指定的按鍵導致出錯，加上if判斷所按的按鍵是否正確

if (audio) {
    audio.play(); 
    audio.currentTime = 0; 
    }    
if (dom) { 
   dom.classList.add('playing');
   } 

這時會發現可以發出聲音，而按過的按鍵也有改變外觀，但是改變一次就變不回去了，需要改成可以使效果消失。

    // 每個key執行動畫後移除效果
    document.querySelectorAll('.key').forEach(item => {
        //動畫結束時觸發
        item.addEventListener('transitionend', removeTransition)
    });

寫需要觸發的removeTransition方訊

let removeTransition = e => {
        // console.log(e);
        if (e.propertyName === 'transform') {
            //使用propertyName=transform做為指標
            e.currentTarget.classList.remove('playing');
        }
    }

再把內容整理的比較好閱讀就完成了。

對了，注意按鍵的CSS內一定要有transition，否則無法出現移除效果。

練習
練習2←不使用立即函式的寫法