//  播放音效的函式
let playSound = function(e) {
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); //  取得按鍵對應的元素
    if (!audio) return; //  如果沒有按到對應的按鍵，則停止此函式
    audio.currentTime = 0; //  讓每次回到音效檔的起始點
    audio.play(); //  播放元素的音效
    key.classList.add('playing'); ///為該元素增加 class
}

//  移除 class 的函式
let removeTransition = function(e) {
    if (e.propertyName !== 'transform') return; //    省略掉其他 propertyName 不是 transform 的物件
    this.classList.remove('playing'); //  把 playing 這個 class 移除
}

// 監聽每一個按鍵是否有 transitionend 事件
let listenTransitionEnd = function() {
    const keys = document.querySelectorAll('.key'); //  選出所有具有 .key 的元素，回傳成陣列
    keys.forEach((key) => {
        key.addEventListener('transitionend', removeTransition)
    }); //  利用 forEach 方法讀取 NodeList 並為每一個元素加上 transitionend 事件，事件執行時會促發 removeTransition 
};

listenTransitionEnd();
window.addEventListener('keydown', playSound);

// console.log('========');