В этой статье мы узнаем, как использовать Javascript для добавления функции распознавания речи в любое веб-приложение. Для распознавания речи мы будем использовать Web Speech API, который в настоящее время доступен только в Chrome для Desktop и Android .

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

Для реализации не требуется сложной настройки, все, что нам нужно, это файл index.html и связанный с ним файл script.js.

Теперь мы попробуем закодировать и понять логику Javascript, используемую для распознавания речи.

  1. Получите все элементы 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. Чтобы протестировать это приложение прямо сейчас, нажмите здесь.