Перед там как начать, стоит сразу отметить, что голосовой поиск работает только в последних версиях Google Chrome, поэтому этот пост нужно отнести в категорию “будущее где-то здесь” =)

Попробовать голосовой поиск можно у меня в блоге, для этого достаточно нажать по иконке микрофона в поисковой строке, сверху.

добавить голосовой поиск на сайт

Меня удивило насколько просто и легко встраивается данный функционал на сайт. Думал нужно будет загружать какие-то js-библиотеки, css-файлы с картинками, нет, ничего. Для работы голосового поиска используется “x-webkit-speech” и все необходимое уже встроено в движке браузера (Webkit).

Поэтому нужно дописать всего пару параметров в строку поиска <input.. />

Перейдем к главному. Не важно, на каком движке сделан Ваш сайт, главное чтобы присутствовала функция поиска =). Рассмотрим на примере моего блога на WordPress.

Находим код поисковой формы, в теме моего блога, я вынес его в файл header.php и searchform.php. Код:

[sourcecode language=”html”]

[/sourcecode]

Чтобы добавить голосовой поиск, необходимо дописать в следующее:

[sourcecode language=”html”]x-webkit-speech=”” speech=”” onwebkitspeechchange=”this.form.submit();”[/sourcecode]

В целом получается так:

[sourcecode language=”html”]<form method="get" id="searchform" action="http://artslab.info/">

<input type=”text” value=”Поиск на сайте” name=”s” id=”s” onblur=”if (this.value == ”)

{this.value = ‘Поиск на сайте’;}” onfocus=”if (this.value == ‘Поиск на сайте’)

{this.value = ”;}” x-webkit-speech=”” speech=”” onwebkitspeechchange=”this.form.submit();”>

</form>[/sourcecode]

Экспериментируем =)

PS: Интересно работает ли это на андроидфонах, у самого нет возможности проверить…

Опубликовано

Похожие записи

Подробнее

ArtsLab

Блог для тех, кто интересуется разработкой сайтов, веб-дизайном и новыми событиями в интернете. В моем блоге Вы найдете записи на различные околокомпьютерные темы, обзоры сервисов и новинок, статьи по кодингу, советы, скрипты, темы и хаки для wordpress, уроки phostohop и многое другое.

4gray artslab artslabinfo