Day20 of #100DaysOfCode

#CodeTogether Day 20/100

Hii folks 🙌

Today I have completed the 20th video of JavaScript30!

Project 20: Native Speech Recognition

Source: https://javascript30.com

Learnings:

Today’s task is to build a Native Speech Recognition webApp.

So if you don’t know Speech Recognition is available directly in the browser with no need for libraries. That is awesome.

There is minimal support forSpeechRecognition available. We will only be able to run this app in Chrome.

Even though there are some limitations this is still a really cool feature.

Accessing SpeechRecognition

We need to access SpeechRecognition on the window. Chrome requires a webkit prefix but we are going to associate them with the same keywords at the beginning of the page:

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition

Next up we will create a new instance of speech recognition. We will also set the interimResults to true. This allows us to view the text as we are speaking (as opposed to waiting until we are finished speaking to print the text).

const recognition = new SpeechRecognition()  
recognition.interimResults = true

Printing the Text in the Browser

Once the browser has a stream of input coming in we need to print it out to the screen. To do this we will create a paragraph. For each ‘pause’ in speech, we want to create a new paragraph element.

We will only ever be editing the final element.

To do this we need to:

let p = document.createElement('p')  
const words = document.querySelector('.words')  
words.appendChild(p)

Now we need to add an event listener and convert the results into an Array:

recognition.addEventListener('result', e => {  
  const transcript = Array.from(e.result)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('')
})

Now this will only run until the user has a pause in speech. We then need to add an event listener for when the recognition ends and have it listen for when it starts again:

recognition.addEventListener('end', recognition.start)

Now that we have the transcription stream coming through we need to output it to the elements that we create.

We need to create a new paragraph for each pause in speech, for which code looks like this:

recognition.addEventListener('result', e => {  
  const transcript = Array.from(e.result)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('')
    p.textContent = transcript
    if(e.results[0].isFinal) {
      p = document.createElement('p')
      words.appendChild(p)
    }
})

Today I Learned (T-I-L):

• Creating own speech recognition web app.
• Accessing Speech and printing in the Browser! 🙌

That is all for Day20 ✅

Thanks for reading, See you tomorrow!