[筆記][JS30天-Day01] JavaScript Drum Kit

實做：使用鍵盤按鈕觸發樂器效果的頁面

---

學習重點

• 自定義 HTML 資料屬性
• 使用鍵盤觸發 audio
• 利用 javascript 控制 CSS

---

解說

• 為了按下鍵盤後，能夠對應要發出的音效，必須在每個元素上綁定 keyCode，利用自定義資料屬性的方式在div和audio綁定

data-key 是自訂的屬性
<div data-key='65'>A</div>
<audio data-key='65'></audio>

• 加入監聽事件：keydown ，並使用querySelector 來獲取被按下的元素與keyCode

//keydown 事件會把鍵盤的訊息傳入，包含keyCode , keyName等等
document.querySelector(`div[data-key="${event.keyCode}"]`);

• 播放音效後綁定新的class給被按下的元素

var audio = document.getElementById("video"); 
audio.currentTime = 0;  //確保可以連續發出音效，加上這個即可

＄('div').addClass('playing');  //使用jQery可以這樣綁定Class給元素
 document.querySelector('div').classList.add('palying'); //原生JS寫法

• 最後音效結束後，必須讓效果恢復原狀：

當我們按下元素後，元素會被放大，完成後就可以利用 transitionened 事件恢復原狀！

key.addEventListener("transitionend",function(e)=>{
      if(e.propertyName!=='transform') return;
      key.classList.remove('playing');
});

補充

transitionened 補充
什麼是自定義tag？data-* Attributes
這裡可以查看鍵盤按鍵對應的keyCode