Как использовать распознавание речи в JavaScript

Распознавание речи не требует никаких библиотек или внешнего API, и мы можем реализовать это прямо в браузере.

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

window.SpeeechRecognition

Это работает для Firefox, для Chrome вам нужно использовать следующую команду:

window.webkitSpeechRecognition

Во-первых, нам нужно вызвать его в нашем файле.

Теперь нам нужно создать новый экземпляр SpeechRecognition и присвоить ему переменную.

Чтобы иметь возможность видеть результат во время разговора, нам нужно установить что-то с именем interimResults true:

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

Теперь, чтобы проверить, работает ли это, вы можете создать кнопку для запуска прослушивателя событий. Создайте простую кнопку в HTML и подключите HTML к вашему файлу JavaScript, дайте элементу кнопки класс, на который вы можете ориентироваться, например, btn или mic.

HTML-файл:

Я добавил немного смайликов к своей кнопке, чтобы придать ей стиль.

Теперь выберите элемент класса микрофона в вашем JS-файле и сохраните его в переменной.

Теперь нам нужно добавить прослушиватель событий к нашей кнопке, чтобы запустить SpeechRecognition, и в этом случае наше событие будет прослушивать щелчок.

Внутри прослушивателя событий мы вызываем метод recognition. start(), чтобы начать запись. Теперь все настроено, но чтобы увидеть результат и иметь возможность работать с ним, нам также нужно добавить прослушиватель событий в наш экземпляр распознавания.

В этом случае мы прослушиваем событие результата:

На данный момент мы можем консольно зарегистрировать результат в нашем браузере, чтобы увидеть, работает ли он. Теперь откройте index.html в браузере, когда вы нажмете кнопку, вы можете получить сообщение, подобное приведенному ниже, нажмите «Разрешить», чтобы начать запись.

Теперь, если вы говорите в микрофон, вы должны увидеть в консоли какое-то запущенное событие, как в приведенном ниже примере.

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

e.results[0][0].transcript

Событие доступа к нулевому индексу результатов нулевого индекса, и вы найдете это в расшифровке стенограммы.

Теперь сделайте то же самое и скажите, и вы должны увидеть результат вместо события, я собираюсь сказать что-то вроде «Надеюсь, вам понравится мой блог».

Прохладный!

Теперь мы отобразим это в HTML и создадим простое приложение для голосовых заметок.

Во-первых, нам нужно создать элемент <div> в нашем HTML и указать класс words.

HTML:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src='index.js'></script><title>Document</title></head><body><div class="words"></div><button type="button" class="mic" >🎤</button></body></html>

В нашем файле JavaScript нам нужно захватить этот элемент и создать элемент p, и мы собираемся вставить наш результат внутрь этого элемента p и добавить его к элементу div, чтобы иметь возможность увидеть наш результат в браузере.

Теперь мы можем протестировать это в нашем браузере и посмотреть, работает ли оно.

Спасибо за чтение. Я надеюсь, что вы нашли это полезным!