В этой статье мы узнаем, как использовать Javascript для добавления функции распознавания речи в любое веб-приложение. Для распознавания речи мы будем использовать Web Speech API, который в настоящее время доступен только в Chrome для Desktop и Android .
Теперь давайте посмотрим на веб-приложение, которое мы собираемся создать. Он имеет заголовок, текстовое поле для отображения расшифровки распознанной речи и две кнопки для управления распознаванием речи.
Для реализации не требуется сложной настройки, все, что нам нужно, это файл index.html и связанный с ним файл script.js.
Теперь мы попробуем закодировать и понять логику Javascript, используемую для распознавания речи.
- Получите все элементы dom
var textBox = document.querySelector("textarea"); var startBtn = document.querySelector("#start-btn"); var stopBtn = document.querySelector("#stop-btn");
2. Объявите обязательные переменные
// stores the transcript of speech recognized var content = ""; // boolean flag var speechRecognitionIsOn = false;
3. Создайте экземпляр распознавания речи и задайте его свойства.
var speechRecognition = window.webkitSpeechRecognition // creates an instance of speechRecognition var recognition = new speechRecognition(); // captures single result each time recognition.continuous = false
webkitSpeechRecognition в настоящее время находится в стадии разработки и имеет несколько проблем с непрерывным распознаванием (правда), но все же мы можем добиться аналогичного опыта, многократно используя подход единственного результата 😉.
В настоящее время нас интересуют четыре свойства распознавания речи:
- onstart: он представляет собой обработчик событий, который запускается, когда распознавание речи начало прослушивать входящий звук.
- onend: он представляет собой обработчик событий, который будет запускаться при отключении службы распознавания речи.
- onerror: представляет собой обработчик событий, который запускается при возникновении ошибки распознавания речи.
- onresult: он представляет собой обработчик событий, который запускается, когда служба распознавания речи возвращает результат (слово или фразу).
4. Добавьте прослушиватели событий для кнопок запуска и остановки.
startBtn.addEventListener('click',() => { speechRecognitionIsOn = true; console.log("voice recognition started"); recognition.start(); }); stopBtn.addEventListener('click',() => { speechRecognitionIsOn = false; console.log("voice recognition stopped"); textBox.value = ""; recognition.stop(); });
5. Реализуйте обработчики событий.
recognition.onstart = () => {
// clears content (optional)
if(content.length){
content = '';
}
}
recognition.onend = () => {
if(speechRecognitionIsOn){
recognition.start();
}
}
recognition.onerror = (event) => {
// failed to recognize speech
console.log('Speech recognition error detected: '+event.error);
}
recognition.onresult = (event) => {
let current = event.resultIndex;
let transcript = event.results[current][0].transcript;
content += transcript;
textBox.value = content;
console.log(transcript);
}
Вот и все, мы успешно реализовали распознавание речи с помощью Javascript. Чтобы протестировать это приложение прямо сейчас, нажмите здесь.