@@ -58,7 +58,22 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  window.addEventListener("keypress", function (e) {
+    let code = e.keyCode > 91 ? e.keyCode - 32 : e.keyCode; //should't matter whether CAPSLOCK is ON or OFF
+    const audio = document.querySelector(`audio[data-key="${code}"]`);
+    if (!audio) return;
+    audio.currentTime = 0;
+    audio.play();
 
+    const elem = document.querySelector(`.key[data-key="${code}"]`);
+    elem.classList.add("playing");
+  });
+
+  Array.from(document.querySelectorAll('.key')).forEach(key => key.addEventListener('transitionend', function (e) 
+  {
+    if (e.propertyName !== 'transform') return;
+    e.target.classList.remove('playing');
+  }));
 </script>