Простые голосовые команды с использованием распознавания речи Javascript
Добро пожаловать в краткое руководство по добавлению голосовых команд на веб-сайт с помощью распознавания речи Javascript. Вы когда-нибудь задумывались, можно ли управлять веб-сайтом с помощью голосовых команд? Да, мы можем использовать распознавание речи и запускать с его помощью команды… Это также удивительно легко сделать. Читайте пример!
ЧАСТЬ 1) HTML
voice-command.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Демонстрация простой голосовой команды</title>
<link rel="stylesheet" href="voice-command.css"/>
</head>
<body>
<!-- (A) ДЕМО Обертка -->
<div id="vwrap"></div>
<!-- (B) КНОПКА ДЕМО -->
<input type="button" id="vbtn" value="Загрузка" disabled/>
<div>Команды: "чёрный фон", "жёлтый фон", "привет сайт"</div>
</body>
</html>
Для этой демонстрации у нас есть только простой <div id="vwrap"> и <input type="button"/>.
ЧАСТЬ 2) ГОЛОСОВЫЕ КОМАНДЫ JAVASCRIPT
voice-command.js
// (A) НАЧАТЬ ГОЛОСОВУЮ КОМАНДУ
wrap: null, // HTML DEMO <DIV> WRAPPER
btn: null, // HTML DEMO КНОПКА
recog: null, // ОБЪЕКТ РАСПОЗНАВАНИЯ РЕЧИ
init: () => {
// (A1) ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
voice.wrap = document.getElementById("vwrap");
voice.btn = document.getElementById("vbtn");
// (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();
if (cmd[said]) { cmd[said](); }
else { said += " (команда не найдена)"; }
voice.wrap.innerHTML = said;
voice.stop();
};
// (A5) ОБ ОШИБКЕ РАСПОЗНАВАНИЯ РЕЧИ
voice.recog.onerror = (err) => { console.error(evt); };
// (A6) ГОТОВО!
voice.btn.disabled = false;
voice.stop();
})
.catch((err) => {
console.error(err);
voice.wrap.innerHTML = "Пожалуйста, включите доступ и подключите микрофон.";
});
},
// (B) НАЧАТЬ РАСПОЗНАВАНИЕ РЕЧИ
start: () => {
voice.recog.start();
voice.btn.onclick = voice.stop;
voice.btn.value = "Говорите сейчас или нажмите еще раз, чтобы отменить";
},
// (C) ОСТАНОВИТЬ/ОТМЕНИТЬ РАСПОЗНАВАНИЕ РЕЧИ
stop: () => {
voice.recog.stop();
voice.btn.onclick = voice.start;
voice.btn.value = "Нажмите, чтобы говорить";
}
};
window.addEventListener("DOMContentLoaded", voice.init);
Да, это, вероятно, пугает новичков. Поэтому я не буду объяснять построчно, вот основные части:
1. Мы запускаем voice.init()оконную загрузку, раздел A2 в значительной степени является «основным движком».
2. Во-первых, нам нужно запросить разрешение на доступ к микрофону —navigator.mediaDevices.getUserMedia({ audio: true })
3. Только тогда мы сможем правильно настроить распознавание речи — voice.recog = new SpeechRecognition(). Измените voice.recog.lang, если хотите использовать другие языки.
4. Волшебство происходит в voice.recog.onresult.
• let said = evt.results[0][0].transcript.toLowerCase()это строка того, что сказал пользователь. Например, «включить».
• Далее мы создаем объект функций. IE var cmd = { "power on" : () => {...} }.
• Наконец, нам нужно только сопоставить произнесенную пользователем команду с объектом — cmd[said]().
ЧАСТЬ 3) КОМАНДНЫЕ ФУНКЦИИ JAVASCRIPT
voice-command.js
var cmd = {
"жёлтый фон": () => {
voice.wrap.style.backgroundColor = "yellow";
voice.wrap.style.color = "black";
},
"чёрный фон": () => {
voice.wrap.style.backgroundColor = "black";
voice.wrap.style.color = "white";
},
"привет сайт": () => {
alert("Привет гость!");
}
};
Ну, это просто список фиктивных команд для этого примера. Не стесняйтесь вносить изменения и делать действительно полезные вещи в своем собственном проекте…
ЧАСТЬ 4 CSS
voice-command.css
box-sizing: border-box;
width: 100%;
height: 100px;
padding: 10px;
transition: all 0.3s;
}
Можете посмотреть и скачать пример.
Посмотреть
Скачать
