JS - 001 - 鋼琴鍵盤

001

＋ 主題 - 鋼琴鍵盤 keyboard event

github連結

+ 邏輯 - 

1. 監聽使用者按了哪個按鍵，在keydown的時候播放聲音，並且顯示提示燈光。(監聽keydown)
2. 避免使用者長按時連續觸發，設定一次按壓只能播一次音樂。(設置旗標判斷式)
3. 快速重複按壓時，音樂必須重新從頭播放。(currentTime=0)
4. 按壓結束後，提示燈光必須消失。(監聽transitionend)
5. 按壓其他案件不能產生錯誤。(判斷式)

＋ JS語法筆記 -

//keyboard event : 監聽使用者按了哪一個按鈕
按壓按鍵時，有一定的週期，keydown > keypress > keyup。主要是看key. keycode的數值！(keycode.info這個網站可以直接顯示keycode)。
keydown - 長按壓時，會連續觸發，不能執行單一事件。像是玩遊戲時，長按往前按鍵，角色會不停的往前走。但也最即時可以反映使用者的動作。
keypress - 它的keycode數值和其他兩者不同。
keyup - 是單一事件，缺點是使用者必須放開才能聽到聲音，要是網路出現lag，不及時，會很詭異。

//data-set : 利用儲存的屬性找對對應的按鍵
以前總是會設定id來尋找，現在將資料儲存在屬性欄，需要時再取用即可。
在這個練習中，採用的方式是 document.querySelector(".key[data-key=83]")，[]的篩選功能，選擇data-key=83的人。

//class : 套入ES6語法，將字串用``包住，變數加上"${}"，就不用還要加上"". ''. + 
改變原來的設定：document.querySelector(`.key["${e.data-key}"]`)
Element.classList - 取得Class的一種方式。有add. remove. toggle的方法，contains就像是JQ的hasClass判斷有沒有這個class。

//querySelectorAll() - 像是陣列但不是，是NodeList，有相對應的位置、數值、length。
因為要監聽『每一個』的transitionend，所以採用foreach()。

//transitionend - CSS樣式和JS做連貫，監聽變化結束的時候。
他有個重要的屬性是PropertyName，會紀錄個別的變化，像是transform、box-shadow，在這邊要監聽的事情是transform變化完畢後，要remove這個class

+實作技巧 -

1. transitionend會產生很多的Property可以增加判斷式只判斷需要的部分。
2. 判斷有沒有對應的按鈕
 const audio= document.querySelector(`audio[data-key="${e.keyCode}"]`);

if(!audio)return;

3. 長按壓的狀況，可以再按壓時加上down的class，並且增加判斷式，如果有down就不撥音樂。