JavaScript30/01 - JavaScript Drum Kit/index-START.html at master · dylanmac/JavaScript30

executable file

49 lines (46 loc) · 2.44 KB

<!DOCTYPE html>

<head>

<body>

<div data-key="83" class="key"> <kbd>S</kbd> <span class="sound">hihat</span> </div>

<div data-key="70" class="key"> <kbd>F</kbd> <span class="sound">openhat</span> </div>

<div data-key="74" class="key"> <kbd>J</kbd> <span class="sound">snare</span> </div>

</div>

var playSound = function(e) {

const key = document.querySelector('.key[data-key="' + e.keyCode + '"]');

const audio = document.querySelector('audio[data-key="' + e.keyCode + '"]');

if (!audio) return; // stop audio function from running

audio.currentTime = 0;

audio.play();

key.classList.add('playing');

}

var removeTransition = function(e) {

if (e.propertyName !== 'transform') return;

this.classList.remove('playing');

}

const keys = document.querySelectorAll('.key');

keys.forEach(key => key.addEventListener('transitionend', removeTransition));

window.addEventListener('keydown', playSound);

</script>

</body>

</html>

Provide feedback