Divan писал(а): ↑Сб июн 06, 2020 12:32 amАвтор Smoke выложил еще один вариант управления голосом. Вариант интересный, но нет нормальной инструкции, что и как делать. Работает в браузере Хром и через https (нужен SSL сертификат). Плюсы: бесплатно, без ключей, быстро, не ограниченно в запросах, неограниченное время распознавания.СпойлерПоказатьТак выглядит кнопка на сценеСпойлерПоказатькнопка.jpg
Выкладываю пошаговую инструкцию
Внимание!!! Если у вас уже установлен 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
Привязываем Font Awesome
1) Скачиваем Font Awesome
2) Распаковываем и переименовываем в font-awesome
3) Закидываем всю папку font-awesome например сюда www/var/templates_alt/font-awesome/css/font-awesome.min.css";СпойлерПоказатьПуть к папке font awesome.jpg
Действия в сцене
В раздел Дополнительный код CSS вставляем код для импорта font-awesomeКод: Выделить всё
@import "/templates_alt/font-awesome/css/font-awesome.min.css";
В раздел Код вставляем весь код.СпойлерПоказатьДополнительный код CSS.JPGСпойлерПоказатьраздел код.JPGПояснение по кодуКод: Выделить всё
<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Здесь указываем имя скрипта (сценария). Сценарии создаете с любым именем и указываете в коде имя. У меня например так, где VoiceTest это имя сценария.СпойлерПоказатьизменить цвет фона.jpgКод: Выделить всё
url: '/objects/?script=VoiceTest&voice='+encodeURI(voiceStr.substring(keyWords)),
Если в коде заменить адрес куда отправлять распознанный текст на:СпойлерПоказатьИмя скрипта.jpgКод: Выделить всё
url: '/command.php?qry='+encodeURI(voiceStr.substring(keyWords)),
то сообщения будут прилетать в системную консоль (на главной странице).СпойлерПоказатьстрока скрипта.jpg
Про ошибку AJAX
Когда вы все сделали и нажали на кнопку, а после всплыла такая ошибка, то не пугайтесь, это нормально, такая ошибка всплывает, если сценарий пустой, нужно добавить в код echo 'ok'; чтобы сценарии возвращал ответ.Пример сценария который будет записывать голос в свойство и в консоле можно увидеть текстСпойлерПоказатьошибка AJAX.jpgЧтобы увидеть текст, нужно нажать на консольСпойлерПоказатьпередача текста в свойство.JPGСоздали к примеру сценарии VoiceTestСпойлерПоказатьконсоль.jpgВставляем код на примере блокли, где я создал переменную voiceСпойлерПоказатьСценарии VoiceTest.JPGили код в PHP, кому как удобноСпойлерПоказатьКод в блокли.JPGКод: Выделить всё
$voice = urldecode($_GET['voice']); debMes($voice); sg('VoiceMD.text',urldecode($_GET['voice'])); echo 'ok';
Уважаемый Divan, вы мне предложили обратиться к вам за помощью через форум.
Я пробовал получить SSL сертификат по вашему описанию через certbot (с оговоркой, что у меня Raspberry Pi4B+).
Соответственно, я выбрал Nginx и Debian 10 (buster).
Но несмотря на как-бы успешное получение сертификата, доступа по защищенному протоколу https нет....
Спасибо!