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

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

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

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

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

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

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

Небольшая демонстрация от гугла — https://www.google.com/intl/en/chrome/demos/speech.html

и демонстрация рабочего примера на русском языке на сайте интернет-магазина https://vamshop.ru или магазина https://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 и выше.

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

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