Дом Программирование Как создать простую программу распознавания речи

Как создать простую программу распознавания речи

Программирование
kak sozdat prostuyu programmu raspoznavaniya rechi

«За этот 10-летний промежуток времени, я считаю, что мы будем использовать не только клавиатуру и мышь для взаимодействия, но в течение этого времени мы усовершенствуем распознавание речи и вывод вещания настолько хорошо, что они станут стандартной частью интерфейса». — Билл Гейтс, 1 октября 1997 г.

Технологии прошли долгий путь, и с каждым новым прогрессом человечество становится все более привязанным к ним и стремится к новым интересным функциям на всех устройствах.

С появлением Siri, Alexa и Google Assistant пользователи технологий стремились к распознаванию речи во время ежедневного пользования Интернетом. В этой публикации я расскажу, как интегрировать распознавание и синтез речи в браузере с помощью JavaScript WebSpeech API.

В соответствии с веб-документами Mozilla:

Web Speech API позволяет включать голосовые данные в веб-приложения. Web Speech API состоит из двух частей: SpeechSynthesis (превращение текста в речь) и SpeechRecognition (асинхронное распознавание речи).

Требования, которые нам понадобятся для создания нашей программы

В этом простом приложении для распознавания речи мы будем работать только с тремя файлами, которые будут размещаться в одном каталоге:

  • index.html содержит HTML для приложения.
  • style.css содержит стили CSS.
  • index.js содержит код JavaScript.

Кроме того, нам нужно иметь несколько вещей на месте. Они такие:

  • Базовые знания JavaScript.
  • Веб-сервер для запуска программы. Веб-сервер для Chrome будет достаточно для этой цели.

Настройка программы для распознавания речи

Давайте начнем с настройки HTML и CSS для программы. Ниже приведена разметка HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Speech Recognition</title>
  <link rel="stylesheet" href="
  <link href=" rel="stylesheet">
  <!-- load font awesome here for icon used on the page -->
</head>
<body>
  <div class="container"> <!--page container -->
    <div class="text-box" contenteditable="true"></div> <!--text box which will contain spoken text -->
    <i class="fa fa-microphone"></i> <!-- microphone icon to be clicked before speaking -->
  </div>
  <audio class="sound" src="chime.mp3"></audio> <!-- sound to be played when we click icon =>  -->
  <script src="index.js"></script> <!-- link to index.js script -->
</body>
</html>

Вот его сопроводительный стиль CSS:

body {
  background: #1e2440;
  color: #f2efe2;
  font-size: 16px;
  font-family: 'Kaushan Script', cursive;
  font-family: 'Shadows Into Light', cursive;
}
.container {
  position: relative;
  border: 1px solid #f2efe2;
  width: 40vw;
  max-width: 60vw;
  margin: 0 auto;
  border-radius: 0.1rem;
  background: #f2efe2;
  padding: 0.2rem 1rem;
  color: #1e2440;
  overflow: scroll;
  margin-top: 10vh;
}
.text-box {
  max-height: 70vh;
  overflow: scroll;
}
.text-box:focus {
  outline: none;
}
.text-box p {
  border-bottom: 1px dotted black;
  margin: 0px !important;
}
.fa {
  color: white;
  background: #1e2440;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 1rem;
  float: right;
  width: 2rem;
  height: 2rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .container {
    width: 85vw;
    max-width: 85vw;
  }
.text-box {
    max-height: 55vh;
  }
}

Копирование кода выше должно привести к чему-либо подобному:

1*WKAizaPcY5uPW0JwsBTk6A
Веб-интерфейс для простой программы распознавания речи

Расширение нашей программы распознавания речи с помощью WebSpeech API

На момент написания статьи API WebSpeech доступен только в Firefox и Chrome. Его интерфейс синтеза речи живет в браузере window объект как speechSynthesis тогда как его интерфейс распознавания речи живет в браузере window объект как SpeechRecognition в Firefox и как webkitSpeechRecognition в Chrome.

Мы настроим интерфейс распознавания на SpeechRecognition независимо от используемого браузера:

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

Далее мы создадим экземпляр интерфейса распознавания речи:

const recognition = new SpeechRecognition();
const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');

В приведенном выше коде, кроме распознавания речи, мы также выбрали icon, text-box, и sound элементы на странице. Мы также создали элемент абзаца, который будет содержать слова, которые мы говорим, и мы добавили его в text-box.

Каждый раз, когда мы нажимаем значок микрофона на странице, мы хотим воспроизвести звук и запустить службу распознавания речи. Чтобы достичь этого, мы добавляем к значку прослушивателя событий клика:

icon.addEventListener('click', () => {
  sound.play();
  dictate();
});
const dictate = () => {
  recognition.start();
}

В прослушивателе событий после воспроизведения звука мы создали и вызвали a dictate функция. The dictate функция запускает службу распознавания речи, вызывая start метод на экземпляре распознавания речи.

Чтобы вернуть результат для любого пользовательского слова, нам нужно добавить a result события к нашему экземпляру распознавания речи. The dictate тогда функция будет выглядеть так:

const dictate = () => {
  recognition.start();
  recognition.onresult = (event) => {
    const speechToText = event.results[0][0].transcript;
    
    paragraph.textContent = speechToText;
  }
}

Полученный event возвращает а SpeechRecognitionEvent который содержит a results объект. Это, в свою очередь, содержит transcript свойство содержания распознанной речи в тексте. Мы сохраняем распознанный текст в переменной под названием speechToText и поместите его в paragraph элемент на странице.

Если мы запустим программу на этом этапе, нажмите icon и скажите что-нибудь, оно должно появиться на странице.

1*1kksWNSfKPzaCJaE9kotsQ
Полный эффект от речи к тексту

Превращение текста в речь

Чтобы добавить текст к вещанию в нашу программу, мы воспользуемся speechSynthesis интерфейс API WebSpeech. Мы начнем с его создания:

const synth = window.speechSynthesis;

Далее мы создадим функцию speak которую мы будем вызывать, когда захотим, чтобы программа что-то сказала:

const speak = (action) => {
  utterThis = new SpeechSynthesisUtterance(action());
  synth.speak(utterThis);
};

The speak функция принимает функцию под названием the action как параметр. Функция возвращает передаваемую строку SpeechSynthesisUtterance. SpeechSynthesisUtterance это интерфейс API WebSpeech, содержащий содержимое, которое должно прочитать служба распознавания речи. Синтез речи speak затем вызывается метод в его экземпляре и передается содержимое чтения.

Чтобы проверить это, нам нужно знать, когда пользователь закончил разговор и сказал a keyword. К счастью, есть способ проверить это:

const dictate = () => {
  ...
  if (event.results[0].isFinal) {
    if (speechToText.includes('what is the time')) {
        speak(getTime);
    };
    
    if (speechToText.includes('what is today\'s date
')) {
        speak(getDate);
    };
    
    if (speechToText.includes('what is the weather in')) {
        getTheWeather(speechToText);
    };
  }
  ...
}
const getTime = () => {
  const time = new Date(Date.now());
  return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};
const getDate = () => {
  const time = new Date(Date.now())
  return `today is ${time.toLocaleDateString()}`;
};
const getTheWeather = (speech) => {
fetch(` ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`)
.then(function(response){
  return response.json();
})
.then(function(weather){
  if (weather.cod === '404') {
    utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
    synth.speak(utterThis);
    return;
  }
  utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
  synth.speak(utterThis);
  });
};

В вышеприведенном коде мы назвали isFinal метод для нашего результата возвращающего события true или false в зависимости от того, закончил ли пользователь говорить.

Если пользователь закончил говорить, мы проверяем, содержит ли стенограмма сказанного такие ключевые слова, как what is the time , и так дальше. Если да, мы звоним нашим speak и передайте ей одну из трех функций getTime, getDate или getTheWeather которые все возвращают строчку для чтения браузером.

Наши index.js теперь файл должен выглядеть так:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
const recognition = new SpeechRecognition();

const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');

icon.addEventListener('click', () => {
  sound.play();
  dictate();
});

const dictate = () => {
  recognition.start();
  recognition.onresult = (event) => {
    const speechToText = event.results[0][0].transcript;
    
    paragraph.textContent = speechToText;

    if (event.results[0].isFinal) {

      if (speechToText.includes('what is the time')) {
          speak(getTime);
      };
      
      if (speechToText.includes('what is today\'s date')) {
          speak(getDate);
      };
      
      if (speechToText.includes('what is the weather in')) {
          getTheWeather(speechToText);
      };
    }
  }
}

const speak = (action) => {
  utterThis = new SpeechSynthesisUtterance(action());
  synth.speak(utterThis);
};

const getTime = () => {
  const time = new Date(Date.now());
  return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};

const getDate = () => {
  const time = new Date(Date.now())
  return `today is ${time.toLocaleDateString()}`;
};

const getTheWeather = (speech) => {
  fetch(` ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`) 
  .then(function(response){
    return response.json();
  })
  .then(function(weather){
    if (weather.cod === '404') {
      utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
      synth.speak(utterThis);
      return;
    }
    utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
    synth.speak(utterThis);
  });
};

Давайте щелкнем значок и попробуем одну из следующих фраз:

  • Который час?
  • Какое сегодня число?
  • Какая погода в Лагосе?

Мы должны получить ответ от программы.

Вывод

В этой статье мы смогли создать простую программу для распознавания речи. Есть еще несколько интересных вещей, которые мы можем сделать, например, выбрать другой голос для чтения пользователям, но я оставляю это делать вам.

Если у вас есть вопросы или отзывы, оставьте их в комментариях ниже. Я не могу дождаться, чтобы увидеть, что вы создадите из этого. Вы можете написать мне в Twitter @developia_.

Похожие записи:

  1. Полное руководство по этому JavaScript

Добавить комментарий

Ваш адрес email не будет опубликован.