From 49dac3dfd7078e552a8231b2ab4dbf8822dc235a Mon Sep 17 00:00:00 2001
From: spiralnebulam31 <anastasiaadamoudi@gmail.com>
Date: Fri, 10 Apr 2026 10:15:34 +0100
Subject: [PATCH 1/3] Made speech recognition work

---
 .gitignore                             |  1 +
 20 - Speech Detection/index-START.html | 79 ++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)

diff --git a/.gitignore b/.gitignore
index 164ae8655c..a1260470c1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 *.log
 haters/
 .idea/
+package-lock.json
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index 6b3c712533..9d1321477d 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -10,9 +10,88 @@
   <div class="words" contenteditable>
   </div>
 
+  <button class="start-button">Start</button>
+
 <script>
+  // We grab the SpeechRecognition object from the window
+  // We use the webkit prefix for any browsers that don't support the unprefixed version
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  // We create a new instance of SpeechRecognition
+  const recognition = new SpeechRecognition();
+
+  // If we want to get continues results while we are speaking, we set the continuous property to true
+  // Otherswise, we will only get a result when we stop speaking
+  recognition.interimResults = true;
+
+  let stopped = false;
+
+  // Create a new paragraph element and add it to the '.words' div
+  let p = document.createElement('p');
+  const words = document.querySelector('.words');
+  words.appendChild(p);
+
+  // We listen for the 'result' event on the recognition object
+  // Which is fired when we get a result from the speech recognition
+  // The event object contains a results property
+  // Which is an array of all the results we have received so far
+  recognition.addEventListener( 'result', event => {
+    const transcript = Array.from( event.results )
+      .map( result => result[0] )
+      .map( result => result.transcript )
+      .join('');
+
+    // We set the text content of the paragraph to the transcript
+    p.textContent = transcript;
+    
+    // If the result is final, we create a new paragraph element and add it to the '.words' div
+    // Final means that the speech recognition has finished processing the audio and has a final result for us
+    if ( event.results[0].isFinal ) {
+      p = document.createElement('p');
+      words.appendChild(p);
+    }
+
+    // If the transcript includes the word 'stop', we set the stopped variable to true and stop the recognition
+    if ( transcript.includes('stop') ) {
+      stopped = true;
+      recognition.stop();
+    }
+
+  } );
+
+  // When we stop speaking, we want to start the recognition again so we can keep getting results
+  // Otherwise, it will only work once and then stop
+  recognition.addEventListener( 'end', () => {
+    if ( false === stopped ) {
+      recognition.start();
+    }
+  } );
+
+  // We grab the start button and listen for a click event on it
+  const startButton = document.querySelector('.start-button');
+
+  // On click, we set the stopped variable to false and start the recognition again
+  // We also disable the start button so we can't click it again while the recognition is running
+  startButton.addEventListener( 'click', () => {
+    stopped = false;
+    recognition.start();
+    startButton.disabled = true;
+  } );
+
+  // We disable the start button when the recognition starts
+  recognition.addEventListener( 'start', () => startButton.disabled = true );
+
+  // When the recognition ends, we check if the stopped variable is true
+  // If it is, we enable the start button again so we can start the recognition again
+  // So if the user has said 'stop', the recognition will stop and the start button will be enabled again
+  recognition.addEventListener( 'end', () => {
+    if ( true === stopped ) {
+      startButton.disabled = false;
+    }
+  } );
+
+  // We start the recognition for the first time when the page loads
+  recognition.start();
 
 </script>
 

From f601fb7ab17a4d43a551baf684dff82bc6b4c3b8 Mon Sep 17 00:00:00 2001
From: Anastasia Adamoudi <53370412+spiralnebulam31@users.noreply.github.com>
Date: Fri, 10 Apr 2026 11:35:35 +0100
Subject: [PATCH 2/3] Updated comment

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 20 - Speech Detection/index-START.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index 9d1321477d..805ef2b4b3 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -20,8 +20,8 @@
   // We create a new instance of SpeechRecognition
   const recognition = new SpeechRecognition();
 
-  // If we want to get continues results while we are speaking, we set the continuous property to true
-  // Otherswise, we will only get a result when we stop speaking
+  // If we want to get interim results while we are speaking, we set the interimResults property to true
+  // Otherwise, we will only get final results after speech recognition has finished processing
   recognition.interimResults = true;
 
   let stopped = false;

From 947e245649fd45cfdce56622acb609c4f3d5d36c Mon Sep 17 00:00:00 2001
From: spiralnebulam31 <anastasiaadamoudi@gmail.com>
Date: Fri, 10 Apr 2026 11:48:08 +0100
Subject: [PATCH 3/3] Amends

---
 20 - Speech Detection/.nvmrc           |  1 +
 20 - Speech Detection/index-START.html | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 20 - Speech Detection/.nvmrc

diff --git a/20 - Speech Detection/.nvmrc b/20 - Speech Detection/.nvmrc
new file mode 100644
index 0000000000..19c7bdba7b
--- /dev/null
+++ b/20 - Speech Detection/.nvmrc	
@@ -0,0 +1 @@
+16
\ No newline at end of file
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index 805ef2b4b3..78897900ef 100644
--- a/20 - Speech Detection/index-START.html	
+++ b/20 - Speech Detection/index-START.html	
@@ -17,6 +17,12 @@
   // We use the webkit prefix for any browsers that don't support the unprefixed version
   window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
 
+  if ( !window.SpeechRecognition ) {
+    document.querySelector('.words').textContent = 'Speech recognition is not supported in this browser.';
+    document.querySelector('.start-button').disabled = true;
+    throw new Error('SpeechRecognition not supported');
+  }
+
   // We create a new instance of SpeechRecognition
   const recognition = new SpeechRecognition();
 
@@ -46,13 +52,13 @@
     
     // If the result is final, we create a new paragraph element and add it to the '.words' div
     // Final means that the speech recognition has finished processing the audio and has a final result for us
-    if ( event.results[0].isFinal ) {
+    if ( event.results[event.resultIndex].isFinal ) {
       p = document.createElement('p');
       words.appendChild(p);
     }
 
     // If the transcript includes the word 'stop', we set the stopped variable to true and stop the recognition
-    if ( transcript.includes('stop') ) {
+    if ( /\bstop\b/i.test(transcript) ) {
       stopped = true;
       recognition.stop();
     }
@@ -90,6 +96,17 @@
     }
   } );
 
+  // We listen for the 'error' event on the recognition object
+  // Which is fired when there is an error with the speech recognition
+  // If the error is 'not-allowed', it means that the user has denied access to the microphone
+  // In that case, we set the text content of the '.words' div to a message telling the user to allow microphone access and refresh the page
+  recognition.addEventListener( 'error', e => {
+    if ( e.error === 'not-allowed' ) {
+      words.textContent = 'Microphone access was denied. Please allow microphone access and refresh the page.';
+      startButton.disabled = true;
+    }
+  } );
+
   // We start the recognition for the first time when the page loads
   recognition.start();