JavaScript-30-Day-20
Tags: javascript, webdev, programming, github
Published: 2021-06-21 18:28:14

## <center>  Native Speech Recognition </center>

## [demo](https://cenacrharsh.github.io/JS-30-DAY-20/)

Today we are going to learn all about speech recognition in the browser.

Instead of complete walk through of the project, I'll only talk about the important stuff.

Here is the complete code we write:

```javascript
window.SpeechRecognition =
        window.SpeechRecognition || window.webkitSpeechRecognition;

      const recognition = new SpeechRecognition();
      recognition.interimResults = true;
      recognition.lang = "en-US";

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

      recognition.addEventListener("result", (e) => {
        console.log(e);
        const transcript = Array.from(e.results)
          .map((result) => result[0])
          .map((result) => result.transcript)
          .join("");

        const poopScript = transcript.replace(/poop|poo|shit|dump/gi, "💩");
        p.textContent = poopScript;

        if (e.results[0].isFinal) {
          p = document.createElement("p");
          words.appendChild(p);
        }
      });

      recognition.addEventListener("end", recognition.start);

      recognition.start();
```

> `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.

![demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu92llgi40jrhekugxwx.png)

>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.

**With this we are done with the project.**

GitHub repo:
{% github cenacrharsh/JS-30-DAY-20 no-readme %}

###Blog on Day-19 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-19-1i5f %}

###Blog on Day-18 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-18-3h8f %}


###Blog on Day-17 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-17-2kg3 %}

##[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
##[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!