JS Drum Kit

body {
padding: 0;
margin: 0;
}
.key {
background: red;
border: 1px solid black;
height: 33vh;
text-align: center;
}

.inline {
float: left;
width: 50%;
}

h1 {
font-size: 100px;
}

#1 {}

1

2

3

4

5

6






function removeTransition(e) {
if (e.propertyName !== ‘transform’) return
e.target.classList.remove(‘playing’)
}

function playSound(e) {
const code = e.target.getAttribute(‘data-key’)
console.log(code)
const audio = document.querySelector(`audio[data-key=”${code}”]`)
const key = document.querySelector(`div[data-key=”${code}”]`)
if (!audio) return

key.classList.add(‘playing’)
audio.currentTime = 0
audio.play()
}

const keys = Array.from(document.querySelectorAll(‘.key’))
keys.forEach(key =>
key.addEventListener(‘transitionend’, removeTransition)
)
window.addEventListener(‘click’, playSound)