Реализация распознавания речи может показаться сложной задачей, но благодаря библиотеке под названием annyang базовую настройку можно реализовать за 5 минут. Взгляните на их демо. Это может заставить вас хотеть узнать это еще больше.

Позвольте мне показать вам, как это работает. Сделаем пример, который будет принимать 2 голосовые команды: «Привет» и «До свидания». Затем он ответит соответствующим образом.

Поскольку сервис не позволяет вам вызывать его с локального хоста с помощью простого файла index.html, давайте создадим очень простое приложение узла, чтобы увидеть его в действии. Проверьте код или следуйте ниже:

Настройка приложения узла

С помощью терминала создайте папку проекта с именем annyang и создайте в ней файл index.js.

mkdir annyang // make the folder
cd annyang // go to the folder
touch index.js // create the file

Чтобы быстро сформировать наше приложение Node, установите express и ejs.

npm install express ejs

Создайте файл с именем app.js

touch app.js

Вставьте это в app.js:

const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {  
  res.render('index', { title: 'The index page!' })
});
app.listen(3000, () => console.log('Example app listening on port 3000!'))

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

Вернувшись в терминал, создайте папку с именем views и внутри нее создайте файл index.ejs.

mkdir views // make the folder
cd views // go to the folder
touch index.ejs // make the file

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

Вставьте этот код в index.ejs:

<!DOCTYPE html>
<html>
<head>
 <title>Annyang</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
   <script>
     if (annyang) {
       // Let's define a command.
       var commands = {
         'hello': function() { alert('Hey! How are you?'); },
         'goodbye': function() { alert('See you later!'); }
       };
       // This should be true
       console.log(annyang.isListening())
       // Add our commands to annyang
       annyang.addCommands(commands);
       // Start listening.
       annyang.start();
       annyang.addCallback('soundstart', function() {
         console.log('sound detected');
       });
     }
    </script>
  </head>
  <body>
    <h1>Say hello or goodbye</h1>
  </body>
</html>

Давайте разберем код. Сначала мы импортируем annyang с помощью CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>

Примечание: поскольку мы импортируем экспресс и ejs как пакеты узла, я попытался установить annyang через npm, но это не сработало, поэтому я переключился на метод CDN.

Следующий тег script содержит наш код распознавания речи. Проверяем, загрузилась ли библиотека annyang, и если да:

  1. Создаем команды (Привет и До свидания)
  2. Добавьте команды
  3. Начать слушать
  4. Добавьте обратный вызов, который сообщит нам, был ли обнаружен звук

Попробуйте

Запустите приложение, набрав это в своем терминале:

node app.js
  • Откройте браузер и перейдите на localhost:3000.
  • Браузер должен запросить у вас разрешение на использование микрофона. Принимать.
  • Скажи привет". Появится предупреждение, чтобы поприветствовать вас!

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

Удачного кодирования,

Иван