Голосовой поиск по сайту или распознавание речи

6816
На сегодняшний день очень популярны планшеты и мобильные устройства!
Как Вы знаете компания Google запустила функцию голосового поиска для мобильных устройств!

Название поста говорит само за себя!
Как прикрутить такую функцию на сайт?!
Все очень просто!
Нужно всего-лишь добавить атрибут для текстового поля.

Код PHP:
  1. x-webkit-speech="x-webkit-speech"
Вот пример на основе кода из модуля mod_search.tpl:
Код PHP:
  1. <input type="text" name="query" id="query" size="40" value="" class="text-input" x-webkit-speech="x-webkit-speech"/>
Данный атрибут распознаёт произносимую речь и вставляет текст в строку поиска.

А этот, распознаёт произносимую речь, вставляет текст в строку поиска и автоматически запускает поиск по сайту.
Код PHP:
  1. <input type="text" name="query" id="query" size="40" value="" class="text-input" x-webkit-speech="x-webkit-speech" onwebkitspeechchange="this.form.submit();"/>
Особенности:
Распознаваемый язык Google Voice Search зависит от атрибута lang.
Если установить «ru-RU» то распознаваться будет исключительно русский.
Если установить «en-EN» то распознаваться будет исключительно английский.

Устанавливается атрибут lang следующим образом:
<meta http-equiv='Content-Language' content='ru-RU'/>

Плюсы:
- Может распознавать длинные фразы.
- Очень удобно и модно.
- Легко интегрируется в любую CMS или HTML код.
- Можно использовать в чате, блоге, статусе и.т.д.

Недостатки:
- К сожалению вся эта прелесть работает только в браузере Google Chrome. (Но технологии не стоят на месте! Компания Яндекс запустила аналогичный проект. Сейчас он в режиме альфа-версии.
- Неправильное распознавание некоторых слов. (Зависит от четкости и качества речи)
- Не распознает интонацию. (Так что знаки препинания придется расставлять вручную)

Дизайн: (Лично менять дизайн не пробовал)
Если Вас не устраивает стандартный стиль, то его можно заменить с помощью CSS, следующим образом:
Код PHP:
  1. input::-webkit-input-speech-button {
  2. -webkit-appearance: button;
  3. background: url('voice.gif') no-repeat 0px 2px;
  4. float: right;width: 17px;height: 17px}


Демонстрация (Сайт на WordPress)
Смена цветовой схемы сайта
Комментарии (27)
CROSS ツ 11 июня 2013 в 14:44 0
Если кто найдет больше информации и возможности реализации данного сервиса, буду рад! hoho
CROSS ツ 11 июня 2013 в 14:51 0
Если у кого возникнут проблемы, то вот код из WordPress
Код PHP:
  1. <?php $search_text = empty($_GET['s']) ? "Поиск" : get_search_query(); ?>
  2. <div id="search">
  3. <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
  4. <input type="text" value="<?php echo $search_text; ?>"
  5. name="s" id="s" onblur="if (this.value == '') {this.value = 'Это поле необходимо очистить, иначе при распознании нового голосового запроса, текст будет добавляться к имеющей переменной $search_text, та что в начале и поиск не даст результатов (Поискквартиры)';}"
  6. onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" x-webkit-speech="x-webkit-speech" onwebkitspeechchange="this.form.submit();"/>
  7. <input type="image" src="<?php bloginfo('template_url'); ?>/images/search.gif" style="border:0; vertical-align: top;" />
  8. </form>
  9. </div>
reload 11 июня 2013 в 15:17 0
Как Вы знаете компания Google запустила функцию голосового поиска для мобильных устройств!
Опубликовано 27 сентября 10 (14:04)
Это изучение истории?)
CROSS ツ 11 июня 2013 в 16:01 0
Ага! hoho Для того кто не в курсе о этой технологии, то повод изучить, а для тех кто знает о ней - пощупать её на практическом применении hoho
По телеку очень долго рекламу крутили про нёё!
WowChih 11 июня 2013 в 18:00 0
такс, надо попробовать :)

Спасибо )))
CROSS ツ 11 июня 2013 в 20:08 0
АААА! Забыл! Эту замечательную штучку распознавания речи можно так же использовать при переписке, в чате, при создании поста, статуса! Блин ну короче везде! Суть уловили??? Если кому лень писать,нажал кнопочку и можно говорить, скрипт всё распознает и вставит в текстовое поле! Проверенно уже! Для этого используйте первый вариант интеграции, тот что не отправляет автоматически! В общем классная штука, жаль что не в каждом браузере работает!

Работает в:
Google Chrome
Браузер от Mail
А вот от Яндекса не хочет, хотя платформа одинаковая!
lezginka.ru 11 июня 2013 в 23:30 0
+
CROSS &#12484; а как в текстовой редактор встроить или напечатать статью ?
CROSS ツ 12 июня 2013 в 16:35 0
просто добавьте атрибут
Код PHP:
  1. x-webkit-speech="x-webkit-speech"
в шаблон редактора.
Скела 12 июня 2013 в 01:58 +1
Вообще то обсуждалось уже http://instantcms.ru/forum/thread14852.html#133846
Многострочный ввод не работает... очень много провел над этим времени - перепробовал варианты. После длинного ввода первые фразы нормальные, а потом чушь идёт - так что можно сказать что невозможно!
CROSS ツ 12 июня 2013 в 15:11 0
Многострочный ввод не работает...
на то он и голосовой поиск! чтобы распознавать короткие фразы! и расчитан только для поиска,но сфера применения технологии широка! я пробовал говорить длинную речь и скрипт её распознал...не знаю как у Вас, но мы с коллегой зачитали приказ директора в микрофон и всё совпало слово в слово! попробуйте настроить чувствительность микрофона, может поможет! а на счёт того что это уже обсуждалось я не знал! у меня не так много времени, чтобы жить в форуме! hoho И если Вы заметили, то мой код немного отличается от того что на форуме)))
SALIK 12 июня 2013 в 16:42 0
А на Ipadе в браузере Crhome микрофончик не появляется =((( , хотя в браузере на компе всё работает...
CROSS ツ 12 июня 2013 в 17:03 0
тестировал только на компе. планшета к сожалению нет(
Tagil-Rulit 12 июня 2013 в 21:43 0
Доброго времени. Данные танцы с бубном, так же исполнял.Короткие фразы определяет, длинные нет-даже несколько предложений уже сбой. Тестил с винды и с андроида. В андроиде есть переводчик гугловский с этой функцией-приложение.

но мы с коллегой зачитали приказ директора в микрофон и всё совпало слово в слово! попробуйте настроить чувствительность микрофона
Админ конечно может потратить неделю на настройку-покупку оборудования и ПО, а вот пользователь-особенно если не "мастер в компах" как мне часто говорят женщины, не захотят или не смогут...

Тема хорошая но вот прокачать бы её. Если возмётесь цены вам нет :)

Всех благ и успехов!
Tagil-Rulit 12 июня 2013 в 21:45 0
плюсанул и добавил в закладки, с надеждой на развитие направления.
CROSS ツ 12 июня 2013 в 22:28 0
я серьёзно говорю, что длинную речь распознаёт! позже выложу видео в доказательство!
CROSS ツ 12 июня 2013 в 22:30 0
никаких отдельных настроек не приходилось делать hoho
CROSS ツ 13 июня 2013 в 10:52 0
Нарыл ещё инфы!
Вот пример, чтобы голосовой ввод работал с textarea
Код PHP:
  1. <html>
  2. <body>
  3. <p>Применение с <b>textarea</b></p>
  4. <script>
  5. var mike = document.getElementById('mike');
  6. mike.onfocus = mike.blur;
  7. mike.onwebkitspeechchange = function(e) {
  8. //console.log(e); // SpeechInputEvent
  9. document.getElementById('txt').value = mike.value;
  10. };
  11. </script>
  12. <style>
  13. #mike {
  14. font-size: 25px;
  15. width: 25px;
  16. height: 25px;
  17. cursor:pointer;
  18. border: none;
  19. position: absolute;
  20. margin-left: 5px;
  21. outline: none;
  22. background: transparent;
  23. }
  24. #txt {
  25. height: 150px;
  26. width: 300px;
  27. }
  28. </style>
  29. <textarea id="txt"></textarea>
  30. <input x-webkit-speech id="mike"/>
  31. </body>
  32. </html>
CROSS ツ 13 июня 2013 в 10:56 0
Полезные ссылки:
http://www.phpied.com/x-webkit-speech-input-and-textareas/
http://speechpad.ru/
http://demo.g63.ru/speech.html
думаю что из переводчика googl'a, тоже можно кое что вытянуть, т.к. там речь распознаётся более чётче!
http://translate.google.ru/
CROSS ツ 13 июня 2013 в 13:03 0
Как и обещал, вот видео!
http://youtu.be/co7RRdHm1UQ
Май 13 июня 2013 в 17:36 +1
Спасибо за пост! Интересно! Кто нибудь уже пробовал прикрутить эту возможность к форуму, коментам блога? Как полет?
SALIK 13 июня 2013 в 19:05 0
А вот это было бы очень круто!
CROSS ツ 13 июня 2013 в 21:33 0
В форуме и блоге редактор использует textarea, вот тут пример как использовать эту функцию с textareа, метод работает! проверенно! ВОТ ДЕМО сайт может временами не работать, он еще в разработке - делает мой знакомый!
Май 15 июня 2013 в 18:32 0
Пробую вставить в форум, есть пикт микрофона, распознает, но текст не вставляется в окно редактора текста сообщения, если не использовать стили, под окном редактирования сообщения - форма ввода input, при распознавании текст появляется в ней, но форма не отправляет этот текст. Кто знает как лечится?
CROSS ツ 17 июня 2013 в 08:10 0
Посмотрите исходный код здесь
Вот рабочий пример
Май 17 июня 2013 в 09:33 0
phpied.com - разве на Инстанте сделан? ) Вы пробовали сделать это для textarea на Инстанте?
CROSS ツ 19 июня 2013 в 11:24 0
Это не от движка зависит! Это просто функция браузера на движке Хромиум... И нет разницы будь-то CMS или HTML страничка, работать будет только в хроме! А точней в хроме от гугла и майла, эт уже проверил hoho
Май 19 июня 2013 в 11:47 0
И все же не ответили на вопрос. Скажите пожалуйста, Вы пробовали это сделать для формы ответа форума Инстанта 1-10-1?

От движка не зависит сама функция распознавания, но отправка данных из формы от движка очень даже зависит.

Если это просто, поделитесь как сделать чтобы работало, тривиальное выполнение инструкций по ссылке - не работает, инпут появляется, голос распознается, но текст в окно сообщения не вводится, форма из инпута распознанный текст не отправляет. Предполагаю что это из-за системы безопасности, в форме есть скрытые поля с токенами, я ни разу не программист, но подозреваю, что в этом причина. Поэтому и спрашиваю знающих людей, как сделать чтобы работало с учетом особенностей Инстанта.