Реализация распознавания речи может показаться сложной задачей, но благодаря библиотеке под названием 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, и если да:
- Создаем команды (Привет и До свидания)
- Добавьте команды
- Начать слушать
- Добавьте обратный вызов, который сообщит нам, был ли обнаружен звук
Попробуйте
Запустите приложение, набрав это в своем терминале:
node app.js
- Откройте браузер и перейдите на localhost:3000.
- Браузер должен запросить у вас разрешение на использование микрофона. Принимать.
- Скажи привет". Появится предупреждение, чтобы поприветствовать вас!
Теперь вы можете настроить свои команды и ответы. Теоретически это позволяет легко интегрировать распознавание речи с другими технологиями. На практике это пока не так надежно, как хотелось бы. Некоторые команды не работают, и через некоторое время приложение может перестать работать вместе. В любом случае, у распознавания речи большое будущее, и это доказывает, что JavaScript будет сиять рядом с ним.
Удачного кодирования,
Иван