Найти на сайте

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

+35
9.12K
  2. Блоги
  3. Голосовой поиск по сайту или распознавание речи
На сегодняшний день очень популярны планшеты и мобильные устройства!
Как Вы знаете компания Google запустила функцию голосового поиска для мобильных устройств!

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

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

А этот, распознаёт произносимую речь, вставляет текст в строку поиска и автоматически запускает поиск по сайту.
  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, следующим образом:
  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)
Смена цветовой схемы сайта
webkitголосовой поискпоискраспознание речиречь
0
CROSS &#12484; CROSS ツ 10 лет назад #
Если кто найдет больше информации и возможности реализации данного сервиса, буду рад! hoho
0
CROSS &#12484; CROSS ツ 10 лет назад #
Если у кого возникнут проблемы, то вот код из 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>
0
reload reload 10 лет назад #
Как Вы знаете компания Google запустила функцию голосового поиска для мобильных устройств!
Опубликовано 27 сентября 10 (14:04)
Это изучение истории?)
0
CROSS &#12484; CROSS ツ 10 лет назад #
Ага! hoho Для того кто не в курсе о этой технологии, то повод изучить, а для тех кто знает о ней - пощупать её на практическом применении hoho
По телеку очень долго рекламу крутили про нёё!
0
WowChih WowChih 10 лет назад #
такс, надо попробовать :)

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

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

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

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

Всех благ и успехов!
0
Tagil-Rulit Tagil-Rulit 10 лет назад #
плюсанул и добавил в закладки, с надеждой на развитие направления.
0
CROSS &#12484; CROSS ツ 10 лет назад #
я серьёзно говорю, что длинную речь распознаёт! позже выложу видео в доказательство!
0
CROSS &#12484; CROSS ツ 10 лет назад #
никаких отдельных настроек не приходилось делать hoho
0
CROSS &#12484; CROSS ツ 10 лет назад #
Нарыл ещё инфы!
Вот пример, чтобы голосовой ввод работал с 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>
0
CROSS &#12484; CROSS ツ 10 лет назад #
Полезные ссылки:
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/
0
CROSS &#12484; CROSS ツ 10 лет назад #
Как и обещал, вот видео!
http://youtu.be/co7RRdHm1UQ
+1
Май Май 10 лет назад #
Спасибо за пост! Интересно! Кто нибудь уже пробовал прикрутить эту возможность к форуму, коментам блога? Как полет?
0
SALIK SALIK 10 лет назад #
А вот это было бы очень круто!
0
CROSS &#12484; CROSS ツ 10 лет назад #
В форуме и блоге редактор использует textarea, вот тут пример как использовать эту функцию с textareа, метод работает! проверенно! ВОТ ДЕМО сайт может временами не работать, он еще в разработке - делает мой знакомый!
0
Май Май 10 лет назад #
Пробую вставить в форум, есть пикт микрофона, распознает, но текст не вставляется в окно редактора текста сообщения, если не использовать стили, под окном редактирования сообщения - форма ввода input, при распознавании текст появляется в ней, но форма не отправляет этот текст. Кто знает как лечится?
0
CROSS &#12484; CROSS ツ 10 лет назад #
Посмотрите исходный код здесь
Вот рабочий пример
0
Май Май 10 лет назад #
phpied.com - разве на Инстанте сделан? ) Вы пробовали сделать это для textarea на Инстанте?
0
CROSS &#12484; CROSS ツ 10 лет назад #
Это не от движка зависит! Это просто функция браузера на движке Хромиум... И нет разницы будь-то CMS или HTML страничка, работать будет только в хроме! А точней в хроме от гугла и майла, эт уже проверил hoho
0
Май Май 10 лет назад #
И все же не ответили на вопрос. Скажите пожалуйста, Вы пробовали это сделать для формы ответа форума Инстанта 1-10-1?

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

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

Еще от автора

Смена цветовой схемы сайта

Смена цветовой схемы сайта

Всем доброго времени суток! В одном из шаблонов от Dezerit Web Group, мне понравилась реализация смены стилей CSS в шаблоне сайта. Т.К.
15

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.