From 5a6587197c3d24abc8f9c726252bc69cc238eb4e Mon Sep 17 00:00:00 2001
From: Russell Edwards <russcedwards@gmail.com>
Date: Sat, 3 Jul 2021 00:17:24 +0100
Subject: [PATCH 1/2] Fix bug when key is held down by preventing playSound
 running again until keyup event

---
 01 - JavaScript Drum Kit/index-FINISHED.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..db2cdd94af 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -58,12 +58,16 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
+  let allowPlay = true;
+  
   function removeTransition(e) {
     if (e.propertyName !== 'transform') return;
     e.target.classList.remove('playing');
   }
 
   function playSound(e) {
+    if (!allowPlay) return;
+    
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
     if (!audio) return;
@@ -71,11 +75,13 @@
     key.classList.add('playing');
     audio.currentTime = 0;
     audio.play();
+    allowPlay = false; //Prevent sound from playing repeatedly if key is held
   }
 
   const keys = Array.from(document.querySelectorAll('.key'));
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
   window.addEventListener('keydown', playSound);
+  window.addEventListener('keyup', () => allowPlay = true); // Allow next sound to be played on next keydown
 </script>
 
 

From d5f9ef08b63622b3a026a6e4213cc492f95a7e2b Mon Sep 17 00:00:00 2001
From: Russell Edwards <russcedwards@gmail.com>
Date: Sat, 3 Jul 2021 00:33:59 +0100
Subject: [PATCH 2/2] Bug fix prevented two different keys being played
 together - fix to prevent only same key being played again until keyup

---
 01 - JavaScript Drum Kit/index-FINISHED.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index db2cdd94af..f73f4fea6a 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html	
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html	
@@ -58,7 +58,7 @@
   <audio data-key="76" src="sounds/tink.wav"></audio>
 
 <script>
-  let allowPlay = true;
+  let justPlayed = null;
   
   function removeTransition(e) {
     if (e.propertyName !== 'transform') return;
@@ -66,7 +66,7 @@
   }
 
   function playSound(e) {
-    if (!allowPlay) return;
+    if (e.keyCode === justPlayed) return; // If same key has just been played without key being released, don't play again
     
     const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
     const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
@@ -75,13 +75,13 @@
     key.classList.add('playing');
     audio.currentTime = 0;
     audio.play();
-    allowPlay = false; //Prevent sound from playing repeatedly if key is held
+    justPlayed = e.keyCode; // Set the key that has just been played
   }
 
   const keys = Array.from(document.querySelectorAll('.key'));
   keys.forEach(key => key.addEventListener('transitionend', removeTransition));
   window.addEventListener('keydown', playSound);
-  window.addEventListener('keyup', () => allowPlay = true); // Allow next sound to be played on next keydown
+  window.addEventListener('keyup', () => justPlayed = null); // Allow key to be played again
 </script>