JavaScript-30-Day-20

Родное распознавание речи

демонстрация

Сегодня мы собираемся узнать все о признании речи в браузере.

Вместо полной прогулки по проекту я говорю только о важных вещах.

Вот полный код, который мы пишем:

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();

Prectrecrecognition.interimresults = true; Это гарантирует, что результаты доступны, пока мы говорим, а не после того, как мы закончали.

Мы используем Документ. Createelement Чтобы создать абзац и добавить его на «слова», который является конденсирована

Мы добавляем EventListener на событие «результат» Процепстворение С В мероприятии е мы получаем E.Results. который мы назначаем переменную транскрипта.

E.Results Является ли списком, а не массив и каждый 0-й элемент списка – это текстовые данные, которые нам нужны. Итак, мы рассмотрим стенограмму в результате [0] Затем мы возвращаем стенограмму и присоединяйтесь к всему, чтобы он образует одну строку.

Это работает только для одного абзаца, поэтому нам нужно установить мероприятие «End» для запуска Computrecognition.Start () снова.

P.TextContent = стенограмма; Мы наконец надеваем стенограмму в домо.

Нам нужно запустить творчество и Приложение Внутри события результата снова так, чтобы P не заменяется в DOM, но вместо этого создает новый пункт.

С этим мы сделаем с проектом.

Github repo:

CENACRHARHARSH/JS-30-DEAD-20

Блог на день-19 Javascript 30

JavaScript-30-Day-19

Кумар суровый · 21 июня · 6 мин прочитан

Блог в день-18 javascript 30

JavaScript-30-дневный – 18

Кумар суровый · 18 июня · 3 мин читать

Блог на день-17 javascript 30

JavaScript-30-дневный – 17

Кумар суровый · 17 июня · 3 мин читать

Подпишись на меня в Твиттере

Следуй за мной на LinkedIn

Профиль разработки

Кумар Харшфолл

Вы также можете сделать вызов на JavaScript 30.

Спасибо @wesbos , WESBOS Поделиться этим с нами! 😊💖.

Пожалуйста, прокомментируйте и дайте мне знать свои взгляды

Спасибо!

Оригинал: “https://dev.to/cenacr007_harsh/javascript-30-day-20-3051”