# Dram Kit
### data-key
**div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이다.**\
[**http://keycode.info/**](http://keycode.info/) **에서 각 키의 키코드를 알 수 있다.**
{% tabs %}
{% tab title="SCRIPT" %}
```javascript
function palySound(e){
// console.log(e.keyCode); 누른 key: "a" keyCode를 볼수 있음
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
if(!audio) return; // 위에 있는 data-key가 아니더라도 null이 뜨지 않고 실행시켜주게함
audio.currentTime = 0; //새롭게 시작 할 수 있게함
audio.play();
key.classList.add('playing');
}
function removeTransition(e){
if(e.propertyName !=='transform') return; // transfrom 이아닌것은 실행되지 않게 해줌
this.classList.remove('playing') // 누르고 playing 에 설정한만큼 애니메이션이 된 후에 사라지게 해주는
}
const keys = document.querySelectorAll('.key');
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
window.addEventListener('keydown',palySound);
```
{% endtab %}
{% tab title="HTML" %}
```markup