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 комментариев
Популярные
По порядку
Написать комментарий...

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

0

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

0

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

0

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

0

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

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

0

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

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

0

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

0
Читать все 19 комментариев
Бизнес — как ребенок: как мамы совмещают свое дело с заботой о детях

Как совмещать бизнес и семью? Ко Дню матери своими историями поделились бизнесвумен, которые работают c ЮKassa и занимаются детьми. Читайте, как им удается сохранять жизненный баланс и добиваться успеха.

Как я заработал свой первый миллион просмотров на лонгридах

Мой опыт ведения текстового блога на «Виси», «Пикабу», «Хабре», Дзене и еще пачке площадок. Сколько потратил на них сил и какую отдачу в итоге получил.

Завод по производству идей. Как работают акселераторы, зачем они нужны стартапам и куда идти с идеей прямо сейчас

По данным Startup Genome, 9 из 10 стартапов терпят неудачу. Возможных причин «смерти» много: недостаточно протестированная гипотеза, неподтвержденная юнит-экономика, неверная стратегия или просто неудача в подходе к продажам.

Что Tele2 предлагает клиентам в «черную пятницу»

На главной распродаже года клиентов компании ждут сразу несколько интересных предложений: скидки на смартфоны, пакеты SMS и безлимитный трафик на YouTube, Яндекс.Карты, Яндекс.Навигатор.

Из науки в IT: как создать свой стартап и стать преподавателем

Как перейти в IT из другой сферы? Как разработать курс, которому нет аналогов? Как студенту получить максимум пользы от занятий? Рассказывает преподаватель OTUS Сергей Окатов, руководитель курсов «Kotlin Backend Developer» и «Kotlin Developer. Basic».

Бот, который сделает маму счастливее

Kind Bot напечатает и отправит по почте фото вашей маме. В 2 клика.

Сервис Boxberry по доставке посылок из США в Россию не умеет забирать посылки из почтового отделения, товар потерян?

Прочитала статью и решила воспользоваться сервисом, заказав товар на eBay.com:

Хочу кухню как у подруги: зачем в Циан сделали поиск квартир по фото

Рассказывает Юлия Зыкова, руководитель команды «Аудитория» в Циан.

Как у меня украли 600 тысяч с карты, а Тинькофф нарушает федеральный закон

Спойлер: я НЕ вводил никуда код, НЕ переходил по ссылкам и НЕ сообщал данные карты.

Я всегда считал себя финансово грамотным человеком, сам когда-то работал в банке, соблюдал цифровую гигиену, держал деньги на нескольких счетах, не привязывал основную карту в непонятных сервисах, в 90% оплат пользовался Google Pay. Когда родственники присылали…

Крысы играют в DOOM, используя VR-подобную систему
Пятерочка списала баллы вместе с деньгами и не желает исправлять ситуацию

Так получилось, что за покупками в основном ходим в пятёрочку, есть их "Выручай-карта" на которую копятся бонусы с покупок. 28.09.21 решил использовать эти бонусы в магазине по адресу Москва. Ул. Лухмановская 17А. При оплате терминал, со слов продавцов выдал ошибку, о невозможности списания баллов, и я оплатил деньгами. Вышло так, что списались и…

null