Джаваскрипт для голосового управления: annyang

Тема в разделе "JavaScript", создана пользователем 1van, 5 авг 2017.

Модераторы: ZiX
  1. 1van

    1van Создатель

    Регистр.:
    22 май 2013
    Сообщения:
    36
    Симпатии:
    11
    Есть замечательный джаваскрипт, который можно использовать для голосового управления сайтом. Ссылка на гитхаб Перейти по ссылке.
    Его достоинства маленький, лёгкий и поддерживает русский язык.
    Из недостатков - поддерживается только хромом и его клонами.
    Вот ещё одна ссылка на его описание Перейти по ссылке.
    Как сейчас навигация реализована у меня можно посмотреть на сайте Перейти по ссылке.
    Например, для перехода на страницу сайта я использую функцию
    Код:
    var internetprilavok = function() {
          window.location.href = 'https://stavrinok.ru/prilavok';
        }
    а голосовая команда задается
    Код:
    var commands = {
      'Прилавок':   internetprilavok,
    };
    Но, так как я абсолютно не знаю JavaScript, прошу помощи у гуру js программирования в написании функции, которая бы вставляла распознанный текст в поля формы и функции прокрутки страницы вниз и вверх.
    Заранее спасибо!
     
    Последнее редактирование: 11 авг 2017
  2. maniac314

    maniac314 Создатель

    Регистр.:
    3 авг 2017
    Сообщения:
    11
    Симпатии:
    0
    Однако, для нормально зрячего удобнее тыцнуть на ссылку в меню, чем голосом управлять.
    Теоретически, эта фишка будет полезна для слабовидящих. Если так, то можешь предлагать ее для внедрения на сайтах госучреждений.
    Они такое любят.
     
  3. 1van

    1van Создатель

    Регистр.:
    22 май 2013
    Сообщения:
    36
    Симпатии:
    11
    "Удобство" - не обсуждается, однако!
     
  4. xxxsoal

    xxxsoal Писатель

    Регистр.:
    15 авг 2016
    Сообщения:
    9
    Симпатии:
    4
    ну почему снова Java, если даже сначала оговаривался js (((
    думаю, Вам нужно попробовать задать наводящие вопросы, а не обращаться с просьбой сделать полностью все
     
  5. nitrogen37

    nitrogen37 Создатель

    Регистр.:
    22 янв 2013
    Сообщения:
    18
    Симпатии:
    1
    Получается этот скрипт к любому сайту привязать можно, я правильно понял ?
     
  6. 1van

    1van Создатель

    Регистр.:
    22 май 2013
    Сообщения:
    36
    Симпатии:
    11
    Спасибо за замечание. Исправил.

    Теперь про наводящие вопросы: Вот ссылка на codepen.io example Перейти по ссылке.
    Простая страница с формой ввода текста. Скрипты annyang и speechkitt (включение и выключение голосового интерфейса) уже подгружены.

    Скрипт активации двух команд: Перейти на главную и Прилавок:
    Код:
    if (annyang) {
        var glavnaya = function() {
         window.location.href = 'https://stavrinok.ru';
        }
        var internetprilavok = function() {
          window.location.href = 'https://stavrinok.ru/prilavok';
        }
    
        var commands = {
          'Перейти на главную':   glavnaya,
          'Прилавок':   internetprilavok,
           };
        annyang.debug();
        annyang.addCommands(commands);
        annyang.setLanguage('ru');
        annyang.start();
        SpeechKITT.annyang();
        SpeechKITT.vroom();
    }

    Вы можете убедиться, что команды распознаются и работают, разрешив браузеру доступ к микрофону.

    Так как включен режим debug в консоли мы можем наблюдать успешную загрузку и ожидание этих команд и успешное распознание текста, который вы произносите.

    Задача: текст который не является командой, но успешно распознан, должен вставляться в текстовое поле (когда курсор находится в этом поле).
     
    Последнее редактирование: 14 авг 2017
  7. 1van

    1van Создатель

    Регистр.:
    22 май 2013
    Сообщения:
    36
    Симпатии:
    11
    Да, но работать будет только в хроме. На мобильном хроме тоже работает, но периодически противно пикает.
     
    Последнее редактирование: 11 авг 2017
  8. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    397
    Симпатии:
    210
    Как-то так:
    HTML:
    annyang.start({continuous: false});
    annyang.addCallback('resultNoMatch', function(e) {
      jQuery('textarea:focus').val(e[0]);
    });
     
    1van нравится это.
  9. 1van

    1van Создатель

    Регистр.:
    22 май 2013
    Сообщения:
    36
    Симпатии:
    11
    Снимаю шляпу!
    Спасибо Absolute!
    Как сделать, чтобы после паузы уже распознанный старый текст сохранялся? Иначе, каждая новая фраза заменяет старую.
    Код уважаемого Absolute уже добавил в пример на codepen Перейти по ссылке
     
    Последнее редактирование: 14 авг 2017
  10. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    397
    Симпатии:
    210
    Можно вот так:
    Код:
    annyang.addCallback('resultNoMatch', function(e) {
       jQuery('textarea:focus').val(function(){
         return this.value + ' ' + e[0];
      });
    });
    Прикольная штука, поигрался. Кстати, в e - массив возможных фраз, а элемент с индексом 0 - наиболее точное соответствие, как я понял.
     
    1van нравится это.