JS30 Challenge Day 20 - Speech Recognition

Github Link

SpeechRecognition.interimResults=true;

This makes sure that results are available while we are speaking and not after we are done speaking.

we use document.createElement to create a paragraph and append it to the ‘words’ div which is a contenteditable.

We add an eventListener on ‘result’ event of SpeechRecognition

In the event e, we get e.results which we assign to transcript variable.

e.results is a list, not an array and each 0th element of the list is the text data we need. So we map transcript on result[0]

Then we return transcript and join everything so that it forms a single string.

This works only for one paragraph so we need to set ‘end’ event to run SpeechRecognition.start() again.

p.textContent=transcript;

We finally put transcript into DOM.

We need to run createElement and appendChild inside the result event again so that p does not get replaced in the DOM but creates a new paragraph instead.