Добавляем голосовой поиск на сайт!

В движке chromium (а это считай все современные браузеры: chrome, яндекс.браузер, ie) поддерживается так называемый Web Speech Api.

Интересен данный инструмент тем, что распознавание голоса в текст может быть добавлено в поиск любого сайта, интернет-магазина, т.е. добавлять можно в любой сайт буквально парой строк JS кода.

Причём бесплатно.

Русский распознаётся отлично, вообще без ошибок, очень быстро и очень точно.

В данной заметке небольшой пример как добавить в любую поисковую форму голосовой поиск.

Перевод голоса в текст и затем уже обычный поиск по тексту на любом сайте.

Небольшая демонстрация от гугла —

и демонстрация рабочего примера на русском языке на сайте интернет-магазина vamshop.ru или магазина best‑shop.su

Проверьте голосовой поиск словами: vamshop, техническая поддержка

На best‑shop словами: платок, ципао

Допустим, у нас есть wordpress и стандартная форма поиска:

<form role="search" method="get" class="search-form" action="http://blog.vamshop.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form>

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

Например так:

<form id="search" role="search" method="get" class="search-form" action="http://blog.vamshop.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input id="search-field" type="search" class="search-field" placeholder="Поиск" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form> <span id="voice-trigger">Голосовой поиск</span>

Теперь добавим пару строк javascript и всё готово.

//Voice Search /* setup vars for our trigger, form, text input and result elements */ var $voiceTrigger = $("#voice-trigger"); var $searchForm = $("#search"); var $searchInput = $("#search-field"); var $result = $("#result"); } /* set Web Speech API for Chrome or Firefox */ window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; /* Check if browser support Web Speech API, remove the voice trigger if not supported */ if (window.SpeechRecognition) { /* setup Speech Recognition */ var recognition = new SpeechRecognition(); recognition.interimResults = true; recognition.lang = 'ru-RU'; recognition.addEventListener('result', _transcriptHandler); recognition.onerror = function(event) { console.log(event.error); /* Revert input and icon CSS if no speech is detected */ if(event.error == 'no-speech'){ $voiceTrigger.removeClass('active'); $searchInput.attr("placeholder", "Поиск..."); } } } else { $voiceTrigger.remove(); } jQuery(document).ready(function(){ /* Trigger listen event when our trigger is clicked */ $voiceTrigger.on('click touch', listenStart); }); /* Our listen event */ function listenStart(e){ e.preventDefault(); /* Update input and icon CSS to show that the browser is listening */ $searchInput.attr("placeholder", "Говорите..."); $voiceTrigger.addClass('active'); /* Start voice recognition */ recognition.start(); } /* Parse voice input */ function _parseTranscript(e) { return Array.from(e.results).map(function (result) { return result[0] }).map(function (result) { return result.transcript }).join('') } /* Convert our voice input into text and submit the form */ function _transcriptHandler(e) { var speechOutput = _parseTranscript(e) $searchInput.val(speechOutput); //$result.html(speechOutput); if (e.results[0].isFinal) { $searchForm.submit(); } }

Нажимайте Голосовой поиск и говорите.

Работает на любых устройствах: на смартфоне, на планшете, на ноутбуке, на компьютере, на телевизоре, везде.

Возможно, chrome попросит Вас разрешить доступ к микрофону, разрешите, иначе поиск голосом работать не будет.

В строке поиска в момент записи голоса будет виден текст — Говорите…

Кроме того, в закладке будет красная точка, т.е. работает микрофон.

Голосовой поиск переводит всё в текст и автоматически запускает поиск по магазину, сайту.

Работает очень хорошо, хорошо распознаёт русский язык, практически без ошибок.

Единственное, что на смартфоне не работает на старых версиях andoid.

Голосовой поиск на смартфоне работает на версии android 8 и выше.

А так, получается отличная, универсальная вещь — работает везде: и на компах, и на смартфонах, и на планшетах.

Точность распознавания голоса очень хорошая.

0
19 комментариев
Написать комментарий...
DatsOfNads Go

С такими текстами вам на Хабр. Там и аудитория это воспримет лучше, и подсветка кода есть

Ответить
Развернуть ветку
Francis R. Wilkeу

Там туториалы минусуют

Ответить
Развернуть ветку
Denis Kiselev

Спасибо, полезно

Ответить
Развернуть ветку
Павло Воронюк

Спасибо, использую на сайте)

Ответить
Развернуть ветку
Francis R. Wilkeу

«В движке chromium (а это считай все современные браузеры: chrome, яндекс.браузер, ie)»

читаю с Сафари, спасибо 👍

Ответить
Развернуть ветку
Дарья Нежина

Я почему-то никогда особо не пользовалась голосовым поиском ни на телефоне, ни на компьютере, какие-то там проблемы были, даже уже не помню какие. А тут случайно увидела статью https://ifish2.ru/golosovoj-poisk/, почитала, поняла, что по идее там никаким проблемам-то особо неоткуда взяться, попробовала еще раз – и, черт возьми, это же так удобно!)))

Ответить
Развернуть ветку
Alexander VamShop
Автор

:) Да, такое же отношение было. О том и речь, что с выходом android 8 всё стало очень быстро, удобно и просто. На компе в хроме давно уже голосовой поиск хорошо работает, а вот на смартфонах, планшетах стал работать через Web Speech API в браузере не так давно, начиная с android 8. Собственно, именно об этом и заметка. Что сейчас подключить голосовой поиск можно буквально парой строк и поиск работает очень хорошо.

Ответить
Развернуть ветку
Оксана Федорова

Здравствуйте. На сайтах не wordpress возможна установка голосового поиска? Пытаюсь внедрить и не получается пока.

Ответить
Развернуть ветку
Alexander VamShop
Автор

Конечно возможно.

Ответить
Развернуть ветку
Владислав .

Не работает на мобильных устройствах, висит говорите.... и на этом все. С дестопа все работает как нужно. Вывел ошибку в alert пишет network. Проверял не только на своем телефоне, так у всех моих коллег. И не высвечивается предложение использования микрофона.

Ответить
Развернуть ветку
Alexander VamShop
Автор

На android работает начиная с версии android 8 и выше.

Ответить
Развернуть ветку
Владислав .

Работает в сервисе гугл - стандартная приложенька на android 7.1.2. Там был запрос юзеру на разрешение микрофона. В остальных браузерах запроса нет,  хотя в настройках разрешения выставлены 

Ответить
Развернуть ветку
Alexander VamShop
Автор

У меня и на android 7 и на android 8 в хроме выскакивает запрос на микрофон.
Но голос распознаёт только в andoid 8 и выше. В android 7 не работает.
На десктопе работает везде, в любы хверсиях android.

Ответить
Развернуть ветку
RegRegist .

как внедрить напишите подробнее прощу, по вашей инструкции не работает, выходить просто слово голосовой поиск и он ни на что не реагирует
прощу помочь
спс

Ответить
Развернуть ветку
RegRegist .

на джумлу на престошоп пробовал
нет реакции не пашет
подскажите подробнее пожалуйста

Ответить
Развернуть ветку
Alexander VamShop
Автор

На сайте должен быть обязательно установлен SSL сертификат. Без SSL работать не будет.

Ответить
Развернуть ветку
RegRegist .

SSL и так есть, не работает

Ответить
Развернуть ветку
RegRegist .

прям скопировал даже форму вашу и в html добавил пробно, не работает

помогите подскажите
дайте свой скайп прощу
я оплачу

Ответить
Развернуть ветку
svm

Мобильный Яндекс.Браузер не работает с данной шуткой. Движком заложено, а яндекс что-то там накосячил и не хочет это исправлять. Либо специально так сделал.
В общем, просто ошибку network выдает.
Если кто знает решение проблемы, поделитесь, пожалуйста.

Ответить
Развернуть ветку
Читать все 19 комментариев
null