Автор
Smoke выложил еще один вариант
управления голосом. Вариант интересный, но нет нормальной инструкции, что и как делать. Работает в браузере Хром и через https (нужен SSL сертификат). Плюсы: бесплатно, без ключей, быстро, не ограниченно в запросах, неограниченное время распознавания.
Так выглядит кнопка на сцене
- кнопка.jpg (62.91 КБ) 8759 просмотров
Выкладываю пошаговую инструкцию
Внимание!!! Если у вас уже установлен SSL сертификат и есть доступ по https, то пропускаем этот пункт
Создаем SSL сертификат (без этого не будет работать), пример создания SSL сертификата на Ubuntu
1) Ставим
certbot
1) sudo apt-get update
2) sudo apt-get install software-properties-common
3) sudo add-apt-repository universe - если запустить эту команду, то получим ошибку add-apt-repository universe error: universe invalid, в таком
случае запускаем эту команду sudo add-apt-repository "deb
http://archive.ubuntu.com/ubuntu $(lsb_release -sc) universe"
4) sudo add-apt-repository ppa:certbot/certbot
5) sudo apt-get update
1) Скачиваем
Font Awesome
2) Распаковываем и переименовываем в font-awesome
3) Закидываем всю папку font-awesome например сюда www/var/templates_alt/font-awesome/css/font-awesome.min.css";
- Путь к папке font awesome.jpg (100.98 КБ) 8759 просмотров
В раздел
Дополнительный код CSS вставляем код для импорта font-awesome
Код: Выделить всё
@import "/templates_alt/font-awesome/css/font-awesome.min.css";
- Дополнительный код CSS.JPG (17.9 КБ) 8759 просмотров
В раздел
Код вставляем весь код.
- раздел код.JPG (74.82 КБ) 8759 просмотров
Код: Выделить всё
<script>
// Создаем распознаватель
var recognizer = new webkitSpeechRecognition();
// Ставим опцию, чтобы распознавание началось ещё до того, как пользователь закончит говорить
recognizer.interimResults = false;
// Какой язык будем распознавать?
recognizer.lang = 'ru-Ru';
recognizer.onstart = function () {
//После старта
$('#voiceBtn').attr('style', 'position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background:lime;margin-bottom: 10px;animation: pulse;animation-iteration-count: infinite;animation-duration: 1s;');
$('#voiceBtn').attr('class', 'bg-gradient-06-anim-fast');
};
recognizer.onerror = function (event) {
//Если ошибка
};
// Используем колбек для обработки результатов
recognizer.onresult = function (event) {
var result = event.results[event.resultIndex];
if (result.isFinal) {
voiceStr = result[0].transcript.toLowerCase();
//Вот тут ключевое слово маленькими буквами, если ключего слова нет - будет слать все подряд на сервер
keyWords = voiceStr.indexOf('');
if(keyWords != '-1') {
//Часть запросов будем отрабатывать прямо из JS
if(voiceStr.substring(keyWords).toLowerCase() == 'алиса включи музыку') {
startPlayMusic();
} else {
//AJAX на сервер
$.getJSON({
url: '/objects/?script=VoiceTest&voice='+encodeURI(voiceStr.substring(keyWords)),
success: function(responce) {
//Возврат от скрипта MJDM
},
error: function(responce) {
console.log('Ошибка отправки AJAX');
}
});
}
}
}
};
recognizer.onend = function () {
//По окончании
$('#voiceBtn').attr('style', 'position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background: purple; margin-bottom: 10px;');
$('#voiceBtn').removeAttr('class');
//Если сюда вписать recognizer.start(); будет слушать эфир вечно
};
</script>
<div id="voiceBtn" style="position: fixed;z-index: 99;padding: 15px;border-radius: 50px;bottom: 0px;right: 0px;margin-right: 10px;background: purple;margin-bottom: 10px;" onclick="recognizer.start();">
<i class="fa fa-microphone" style="font-size: 3rem;color: white;"></i>
</div>
Здесь можно изменить ключевое слово (выделил где), но я убрал ключевое слово, нажали на кнопку и можно говорить.
- ключевое слово.jpg (43.84 КБ) 8759 просмотров
Здесь меняем цвет фона, тут устанавливается цвет фона при активации микрофона
- изменить цвет фона.jpg (70.57 КБ) 8759 просмотров
Здесь указываем имя скрипта (сценария). Сценарии создаете с любым именем и указываете в коде имя. У меня например так, где VoiceTest это имя сценария.
Код: Выделить всё
url: '/objects/?script=VoiceTest&voice='+encodeURI(voiceStr.substring(keyWords)),
- Имя скрипта.jpg (75.49 КБ) 8759 просмотров
Если в коде заменить адрес куда отправлять распознанный текст на:
Код: Выделить всё
url: '/command.php?qry='+encodeURI(voiceStr.substring(keyWords)),
- строка скрипта.jpg (86.14 КБ) 8744 просмотра
то сообщения будут прилетать в системную консоль (на главной странице).
Про ошибку AJAX
Когда вы все сделали и нажали на кнопку, а после всплыла такая ошибка, то не пугайтесь, это нормально, такая ошибка всплывает, если сценарий пустой, нужно добавить в код
echo 'ok'; чтобы сценарии возвращал ответ.
- ошибка AJAX.jpg (18.76 КБ) 8759 просмотров
- передача текста в свойство.JPG (36.31 КБ) 8759 просмотров
Чтобы увидеть текст, нужно нажать на консоль
- консоль.jpg (15.8 КБ) 8759 просмотров
Создали к примеру сценарии VoiceTest
- Сценарии VoiceTest.JPG (13.99 КБ) 8759 просмотров
Вставляем код на примере блокли, где я создал переменную
voice
- Код в блокли.JPG (24.29 КБ) 8759 просмотров
или код в PHP, кому как удобно
Код: Выделить всё
$voice = urldecode($_GET['voice']);
debMes($voice);
sg('VoiceMD.text',urldecode($_GET['voice']));
echo 'ok';
