Как использовать распознавание речи в 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
, чтобы иметь возможность увидеть наш результат в браузере.
Теперь мы можем протестировать это в нашем браузере и посмотреть, работает ли оно.
Спасибо за чтение. Я надеюсь, что вы нашли это полезным!