今日任務:
點擊鍵盤，畫面會出現相對應的按鈕縮放並發出不同的聲音

keydown

window.addEventListener(keydown,要執行的函式)
偵測到按下哪個按鈕keydown按下某個鍵時會觸發該事件。

 window.addEventListener('keydown', playsound)

data attributes 自訂屬性

可以透過幫html加上data-*自訂屬性，來讓JS更方便獲取html元素

function playsound(e){
  const audio = document.querySelector(`audio[data-key="${e.code}"]`);
  audio.play()
}

audio.currentTime 以秒為單位指定當前播放時間

當連續按按鈕的時候，會播完音檔才再下一次播放，想要可以快速重頭播放，
可以加上audio.currentTime

function playsound(e){
  const audio = document.querySelector(`audio[data-key="${e.code}"]`);
  audio.currentTime = 0;
  audio.play()
}

KeyboardEvent.keyCode/code/key

KeyboardEvent.keyCode可以讓電腦知道你按了哪一個鍵
MDN上已不再推薦使用keycode特性，可以使用code或key:
KeyboardEvent.code (按下A或a都顯示keyA)
KeyboardEvent.key (按下A顯示A,a顯示a，有分大小寫)
這邊我使用KeyboardEvent.code來判斷按了哪一個字母

const key = document.querySelector(`.key[data-key="${e.code}"]`);

處理外觀

可以透過Element.classList，使用add()、remove()、replace()和toggle()方法來改變元素的外觀。

function playsound(e){
  const key = document.querySelector(`.key[data-key="${e.code}"]`);
  const audio = document.querySelector(`audio[data-key="${e.code}"]`);
  key.classList.add('play')
  audio.currentTime = 0;
  audio.play()
}

Element.addEventListener(transitioned,執行的函式)

監聽transition結束後執行某函式
將每一個key都加上偵測，當有transition結束後再將css樣式移除

keys.forEach(key => {key.addEventListener('transitionend',removeTransition)})

propertyName，顯示與transform關聯的 CSS 屬性的名稱。
.play更改的css屬性有 "border四個邊的寬度" 和 "transform"
選一個當作判斷有無觸發transition的依據就好，
propertyName有transform的話就代表有觸發transition

function removeTransition(e){
if(e.propertyName !== 'transform') return;
  e.target.classList.remove('play');
}

今日學習到的:

• addEventListener(keydown,要執行的函式)
• KeyboardEvent.keyCode/code/key
• audio.currentTime
• 使用add()、remove()、replace()和toggle()方法來改變元素的外觀。
• addEventListener(transitioned,執行的函式)
• propertyName，顯示與transform關聯的 CSS 屬性的名稱。

完整程式連結:連結

參考連結:
https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes