# JS30 - Drum kit - Ref : https://javascript30.com/ - demo : https://codepen.io/benben6515/full/XWKrmzg > By Benben --- ### html 結構 - 用 div 把每個按鍵都包住，並且加上 `data-key` 的屬性，對應到 keycode 的方式 - 把下面的 `audio` 標籤也對應到一樣的 `data-key` - [audio tag](https://www.w3schools.com/html/html5_audio.asp) - [keycode online](http://keycodes.atjayjo.com/#charcode) --- ### CSS 樣式 - background shorthand ```css background: url('https://i.imgur.com/b9r5sEL.jpg') bottom center; background-size: cover; background: #ffffff url("img_tree.png") no-repeat right top; ``` - background-color - background-image - background-repeat - background-position - text-transform: uppercase - 把字母轉大寫 --- ### JavaScript ```javascript function playSound(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'); }; ``` ```javascript function removeTransition(e){ if(e.propertyName !== 'transform') return; this.classList.remove('playing'); } ``` - 如果元素的 tranform 結束了就移除 `playing` 的 class --- ```javascript const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('transitionend', removeTransition)) window.addEventListener('keydown', playSound); ``` - 在所有的 key 的元素加上 `transitionend` 的事件監聽 - 在所有的頁面加上 `keydown` 的事件監想，屬於事件代理 - Bug : 長按按鍵會一直加上 playing 的 class