Как добавить голосовые команды на свою веб-страницу с помощью JavaScript

Вы когда-нибудь на каком-то этапе своей жизни отдавали приказы компьютеру и ожидали ответа? То, как Тони Старк разговаривает с Джарвисом, действительно изменчиво, к сожалению, то, что мы можем достичь с помощью этой статьи и этой библиотеки, ограничено, и вам придется настроить ее почти все вручную, чтобы дать сенсацию во время разговора с компьютером благодаря Javascript и webkitSpeechRecognition.

Джарвис, сделай мне бутерброд

Теперь, когда вы являетесь разработчиком, наступил великий день, создайте веб-сайт с голосовыми командами, которые могут быть настолько гибкими, насколько вы хотите. API распознавания речи HTML5 позволяет JavaScript иметь доступ к аудиопотоку браузера и преобразовывать его в текст. Благодаря Artyom.js обработчик библиотеки голосовых команд эта задача будет кусок пирога.

Примечание. WebkitSpeechRecognition доступен только в Google Chrome. Надеемся, что в будущем эта функция станет стандартом для всех браузеров, но пока мы можем попробовать только артём в этом браузере.

О командах

Каждая команда является литеральным объектом с парой отношений ключ-значение, которые:

  • индексы: все доступные слова, которые запускают эту команду
  • описание: Добавьте небольшое описание к вашей команде
  • действие: функция, которая будет выполнена, если произнесенное слово вызывает эту команду

.

Шаг 1.

Добавьте библиотеку к документу в теге head (вы можете получить копию библиотеки в официальном репозитории в github):


Cooking with artyom.js
// Create a global accesible instance of artyom
window.artyom = new Artyom();
// Artyom is available!

Шаг 2.

Добавьте свои команды. Важно прочитать документацию и понять, как работает команда .

Обычная команда будет запущена, когда пользователь говорит, и распознанный текст совпадает с некоторыми из индексов команд (содержащихся в массиве), например:

// A normal command
artyom.addCommands({
indexes:["Hello","Hey","Hurra"],
action: function(i){
// i = index of the recognized option
console.log("Something matches");
}
});

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

artyom.addCommands({
smart:true,// We need to say that this command is smart !
indexes:["How many people live in *"], // * = the spoken text after How many people live in is recognized
action:function(i,wildcard){
switch(wildcard){
case "berlin":
alert("Why should i know something like this ?");
break;
case "paris":
alert("I don't know");
break;
default:
alert("I don't know what city is " + * + ". try to increase the switch cases !");
break;
}
}
});

Шаг 3 (необязательно).

Убедитесь, что ваша команда работает с использованием artyom.simulateInstruction, эта функция позволяет вам смоделировать голосовую команду и показать, как она будет работать, например, когда пользователь говорит (используя предыдущие команды):

artyom.simulateInstruction("How many people live in Paris");
// alert("I don't know ._.");

Шаг 4

Запустите Артём, функция инициализации поможет вам. Вам нужно только правильно его настроить, и все будет работать нормально, основные параметры, которые вам нужно предоставить:

  • lang: код языка языка поддержки
  • непрерывный: Boolean, если вы используете соединение https, вы можете установить значение true, в противном случае всегда установите значение false (так как это активирует режим 1 команды)
  • listen: Boolean, если установлено значение true, artyom начнет слушать, иначе будут сохранены только предыдущие настройки.
  • debug: Boolean, если установлено значение true, весь распознанный текст и много информации будет отображаться в консоли

И это действительно просто в использовании:

artyom.initialize({
lang:"en-GB",// More languages are documented in the library
continuous:false,//if you have https connection, you can activate continuous mode
debug:true,//Show everything in the console
listen:true // Start listening when this function is triggered
});
// Artyom has been started ;)

Шаг 5

Если вы хотите остановить Артёма, используйте функцию fatality. Экземпляр Артема будет остановлен мгновенно.

artyom.fatality();

Важные заметки

Artyom — это надежная оболочка API-интерфейсов speechRecognition и speechSynthesis google chrome, что означает, что у artyom есть много замечательных функций, которые могут быть полезны для проектов с использованием голосовых команд.

  • Прочитайте официальную документацию Artyom.js
  • Artyom.js может легко заставить ваш браузер общаться с инструкцией artyom.say
  • Artyom необходимо использовать на локальном или удаленном сервере (http или https), в противном случае по соображениям безопасности вы не можете использовать webkitSpeechRecognition API
  • Артему нужен протокол https для работы в непрерывном режиме (постоянный голосовой помощник)
Ссылка на основную публикацию
Adblock
detector