Простой голосовой поиск с использованием распознавания речи Javascript
Добро пожаловать в краткое руководство по созданию голосового поиска с помощью Javascript Speech Recognition API. «Обычная панель поиска» слишком скучна для вас? Хотите знать, можем ли мы добавить кнопку «голосовой поиск» на веб-страницу? Да мы можем. Это также удивительно легко сделать.
ГОЛОСОВОЙ ПОИСК НА JAVASCRIPT
Хорошо, давайте теперь перейдем к примеру поиска Javascript.
ЧАСТЬ 1) HTML
speech-search.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Демонстрация речевого поиска</title>
<script src="speech-search.js"></script>
</head>
<body>
<form id="search-form" onsubmit="return false;">
<!-- (A) ОБЫЧНОЕ ПОЛЕ ПОИСКА И КНОПКА -->
<input type="text" id="search-field"/>
<input type="submit" value="Поиск"/>
<!-- (B) ПОИСК РЕЧИ -->
<input type="button" id="search-speech" value="Загрузка" disabled/>
</form>
</body>
</html>
Это должно быть очень просто. Практически «обычная поисковая форма» с дополнительной кнопкой голосового поиска.
ЧАСТЬ 2) JAVASCRIPT
speech-search.js
// (A) НАЧАТЬ РАСПОЗНАВАНИЕ РЕЧИ
sform: null, // ФОРМА ПОИСКА HTML
sfield: null, // ПОЛЕ ПОИСКА HTML
sbtn: null, // КНОПКА ГОЛОСОВОГО ПОИСКА HTML
recog: null, // ОБЪЕКТ РАСПОЗНАВАНИЯ РЕЧИ
init: function () {
// (A1) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
voice.sfrom = document.getElementById("search-form");
voice.sfield = document.getElementById("search-field");
voice.sbtn = document.getElementById("search-speech");
// (A2) ПОЛУЧИТЬ ДОСТУП К МИКРОФОНУ
navigator.mediaDevices.getUserMedia({ audio: true })
.then((stream) => {
// (A3) ОБЪЕКТ РАСПОЗНАВАНИЯ РЕЧИ + НАСТРОЙКИ
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
voice.recog = new SpeechRecognition();
voice.recog.lang = "ru";
voice.recog.continuous = false;
voice.recog.interimResults = false;
// (A4) НАПОЛНИТЬ ПОЛЕ ПОИСКА ПО РАСПОЗНАВАНИЮ РЕЧИ
voice.recog.onresult = (evt) => {
let said = evt.results[0][0].transcript.toLowerCase();
voice.sfield.value = said;
// voice.sform.submit();
// ИЛИ ЗАПУСТИТЕ ПОИСК AJAX/FETCH
voice.stop();
};
// (A5) ОБ ОШИБКЕ РАСПОЗНАВАНИЯ РЕЧИ
voice.recog.onerror = (err) => { console.error(err); };
// (A6) ГОТОВЫ!
voice.sbtn.disabled = false;
voice.stop();
})
.catch((err) => {
console.error(err);
voice.sbtn.value = "Включите доступ и подключите микрофон.";
});
},
// (B) НАЧАТЬ РАСПОЗНАВАНИЕ РЕЧИ
start: () => {
voice.recog.start();
voice.sbtn.onclick = voice.stop;
voice.sbtn.value = "Говорите сейчас или нажмите еще раз, чтобы отменить";
},
// (C) ОСТАНОВИТЬ/ОТМЕНИТЬ РАСПОЗНАВАНИЕ РЕЧИ
stop: () => {
voice.recog.stop();
voice.sbtn.onclick = voice.start;
voice.sbtn.value = "Нажмите, чтобы говорить";
}
};
window.addEventListener("DOMContentLoaded", voice.init);
Да, это может быть довольно пугающим для новичков. Итак, вот основные части.
1. При загрузке окна мы запускаем voice.init(). Секция A2 в значительной степени является «главным двигателем».
2. Первое, что нужно сделать, это получить разрешение пользователя на доступ к его микрофону —navigator.mediaDevices.getUserMedia({ audio: true })
3. Только тогда мы сможем правильно настроить распознавание речи —voice.recog = new SpeechRecognition()
4. Капитан Очевидность — voice.recog.start()запустит движок распознавания голоса, voice.recog.stop()чтобы закончить.
5. Волшебство происходит в voice.recog.onresult.
• Превращаем произносимые слова в строку – let said = evt.results[0][0].transcript.toLowerCase().
• Затем просто заполните поле поиска voice.sfield.value = saidи запустите процесс поиска.
Это все. Остальное в значительной степени связано с интерфейсом.
Можете посмотреть и скачать пример.
Посмотреть
Скачать
