IT-инфраструктура для бизнеса и творчества

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

В движке 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 и выше.

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

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

(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
19 комментариев
Популярные
По порядку
Написать комментарий...
DatsOfNads Go

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить
0
Развернуть ветку
Читать все 19 комментариев
Как автоматизация работы юристов экономит время и деньги

В работе любой компании есть важнейшая рутина, малозаметная со стороны. Например, корпоративные юристы – это почти всегда «бойцы невидимого фронта», но от качества их претензионно-судебной работы зависит благополучие всей корпорации. Особенно если у вас в работе тысячи договоров, претензий и судебных дел. Тут поможет только глубокая автоматизация…

Улучшаем UX: ранжирование требований и анализ поведенческих переменных

Казалось бы, ваши копирайтеры хорошо постарались и изложили на сайте всю возможную информацию о продукте и его использовании, которая может интересовать потребителя. Но в техподдержку продолжает поступать большое количество звонков по самым рутинным вопросам, ответы на которые точно есть в разделе «Помощь». Возможно, пользователи просто…

Праздник к нам приходит: когда заказывать подарки за рубежом

Ещё в ноябре для логистических компаний начинается горячий сезон, который продолжается до марта. 11 ноября — большая распродажа AliExpress, а сразу после неё — Чёрная пятница, плавно перетекающая в подготовку к Новому году, 14 и 23 февраля, и, наконец, к 8 марта. В это время Почта и другие логистические службы по всему миру доставляют особенно…

Сезон подкаста как эксперимент: научили ведущих бегать и отправили на полумарафон. Кейс Sports.ru и adidas
«Вам потребуется их благословение»: сооснователь iFixit — о проблемах самостоятельного ремонта от Apple Статьи редакции

Кайл Винс считает, что компания будет мешать замене деталей программно и установит высокие цены на товары для ремонта.

Платежи в Южной Африке

Несмотря на то, что Южная Африка находится (сюрприз) в Африке, мобильные кошельки или QR-коды там совсем не используются, в отличие от большинства стран континента. И причина тому -- сильная банковская система, доставшаяся стране от Британской империи. Как следствие, в плане банковских услуг и платежей Южную Африку сложно отличить от…

Baring Vostok инвестировал $13 млн в российскую платформу автоматизации маркетинга Mindbox Статьи редакции

Деньги направят на развитие продуктов, опционный пул и сделки.

Фоторамка 2.0 или что подарить бабушке на Новый год

Давно мечтал подарить бабушке фоторамку для просмотра фотографий детей и внуков, но нужно было как-то поддерживать актуальность фотографий, загружать их на флешку, такое себе занятие.

Talantix подключил интеграцию с Telegram

Облачная CRM-система для рекрутмента Talantix расширила возможности общения HR-команд с кандидатами внутри сервиса. К уже существующим интеграциям — с Viber и WhatsApp — добавился Telegram!

Голова не варит: 10+ советов, как предотвратить умственное переутомление

Наш мозг потребляет уйму энергии, но мы почему-то часто игнорируем, продолжая нагружать его новыми задачами. Как следствие — возникает умственное переутомление, и мы печально и бессильно глядим в пустоту в конце дня. Разбираемся, почему такое состояние возникает и как с ним бороться.

null