A
@@ -59,8 +57,35 @@
+ window.addEventListener('keydown', onKeyPress);
+
+ function onKeypress(e) {
+ const keycode = e.keyCode;
+ playAudio(keycode);
+ animateKey(keycode);
+ }
+ function playAudio(keycode) {
+ const audio = document.querySelector(`audio[data-key='${keycode}'`);
+ if (!audio) return;
+ audio.currentTime = 0;
+ audio.play();
+ }
+ function animateKey(keycode) {
+ const key = document.querySelector(`.key[data-key='${keycode}'`);
+ key.classList.add('playing');
+ }
+
+ const keys = document.querySelectorAll('.key');
+ keys.forEach(key => key.addEventListener('transitionend', removeTransition));
+
+ function removeTransition(e) {
+ if (e.propertyName !== 'transform') return;
+ const key = e.target;
+ key.classList.remove('playing');
+ }
+
+