Распознавание речи – это мощный инструмент, который позволяет пользователям взаимодействовать с вашим веб-приложением с использованием голоса. В этой статье мы рассмотрим, как создать Speech Detection с использованием JavaScript и Web API. Вы узнаете, как работать с микрофоном, как использовать API для распознавания речи и получите пример кода для реализации этой функциональности.

Основы Speech Detection

Speech Detection – это процесс преобразования речи пользователя в текст, который может быть затем обработан вашим веб-приложением. Это может быть полезно для создания голосовых команд, распознавания речи в текст или создания приложений для людей с ограниченными возможностями. Для реализации распознавания речи в веб-приложениях мы используем Web Speech API.

Web Speech API

Web Speech API – это стандарт, предоставляющий веб-приложениям доступ к распознаванию и синтезу речи. Эта API позволяет вам работать с микрофоном пользователя и преобразовывать речь в текст. Для начала использования этой API, добавьте следующий код в ваш проект:

«`javascript

if (‘webkitSpeechRecognition’ in window) {

const recognition = new webkitSpeechRecognition();

recognition.continuous = true;

recognition.interimResults = true;

recognition.onresult = function(event) {

for (let i = event.resultIndex; i < event.results.length; i++) {

if (event.results[i].isFinal) {

const recognizedText = event.results[i][0].transcript;

// Делаем что-то с распознанным текстом

}

}

};

recognition.start();

} else {

console.log(‘Web Speech API не поддерживается в данном браузере’);

}

«`

Этот код проверяет поддержку Web Speech API в браузере и, при наличии поддержки, создает экземпляр `webkitSpeechRecognition`. После этого, API начинает слушать микрофон пользователя и передает распознанный текст в обработчик `onresult`.

Работа с микрофоном

Прежде чем начать использовать распознавание речи, вам необходим доступ к микрофону пользователя. Браузер запросит разрешение пользователя на доступ к микрофону. Это делается автоматически, когда вы создаете экземпляр `webkitSpeechRecognition`.

Имейте в виду, что доступ к микрофону требует HTTPS-соединения. Это означает, что ваш сайт должен быть размещен на сервере с SSL-сертификатом.

Речь в текст

Когда Web Speech API распознает речь пользователя, результаты передаются в обработчик `onresult`. Результаты представлены объектом `SpeechRecognitionEvent`. Вы можете получить распознанный текст с использованием `event.results[i][0].transcript`, где `i` — индекс результата.

Для определения, завершено ли распознавание, используйте `event.results[i].isFinal`. Если `isFinal` равно `true`, это означает, что распознавание завершено, и вы можете обрабатывать распознанный текст.

Пример

Давайте рассмотрим простой пример, который использует Speech Detection для создания приложения, которое слушает команды пользователя и реагирует на них.

«`html

<!DOCTYPE html>

<html>

<head>

<meta charset=»UTF-8″>

<title>Speech Detection Example</title>

</head>

<body>

<button id=»startButton»>Начать распознавание</button>

<div id=»output»></div>

<script>

if (‘webkitSpeechRecognition’ in window) {

const recognition = new webkitSpeechRecognition();

recognition.continuous = true;

recognition.interimResults = true;

const startButton = document.getElementById(‘startButton’);

const output = document.getElementById(‘output’);

startButton.addEventListener(‘click’, () => {

recognition.start();

});

recognition.onresult = function(event) {

for (let i = event.resultIndex; i < event.results.length; i++) {

if (event.results[i].isFinal) {

const recognizedText = event.results[i][0].transcript;

output.textContent = recognizedText;

}

}

};

} else {

console.log(‘Web Speech API не поддерживается в данном браузере’);

}

</script>

</body>

</html>

«`

В этом примере мы создали простую HTML-страницу с кнопкой «Начать распознавание» и элементом `div` для отображения распознанного текста. При нажатии на кнопку, начинается распознавание, и распознанный текст выводится на странице.

Заключение

Speech Detection — мощный инструмент для создания интерактивных и доступных веб-приложений. С использованием Web Speech API и JavaScript, вы можете легко добавить распознавание речи в ваши проекты. Не забывайте обеспечивать безопасность и конфиденциальность данных пользователей, работая с микрофоном. Теперь у вас есть знания и пример, чтобы начать создавать свои собственные проекты с Speech Detection в JavaScript.