Перед там как начать, стоит сразу отметить, что голосовой поиск работает только в последних версиях Google Chrome, поэтому этот пост нужно отнести в категорию “будущее где-то здесь” =)
Попробовать голосовой поиск можно у меня в блоге, для этого достаточно нажать по иконке микрофона в поисковой строке, сверху.
Меня удивило насколько просто и легко встраивается данный функционал на сайт. Думал нужно будет загружать какие-то js-библиотеки, css-файлы с картинками, нет, ничего. Для работы голосового поиска используется “x-webkit-speech” и все необходимое уже встроено в движке браузера (Webkit).
Поэтому нужно дописать всего пару параметров в строку поиска <input.. />
Перейдем к главному. Не важно, на каком движке сделан Ваш сайт, главное чтобы присутствовала функция поиска =). Рассмотрим на примере моего блога на WordPress.
Находим код поисковой формы, в теме моего блога, я вынес его в файл header.php и searchform.php. Код:
[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 = ”;}">
<input type="hidden" id="searchsubmit">
</form>
[/sourcecode]
Чтобы добавить голосовой поиск, необходимо дописать в <input /> следующее:
[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();">
<input type="hidden" id="searchsubmit">
</form>[/sourcecode]
Экспериментируем =)
PS: Интересно работает ли это на андроидфонах, у самого нет возможности проверить…