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

Chrome Browser

Google Chrome is a browser that combines a minimal design with sophisticated technology to make…

www.google.com

<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>

<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>

//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(); } }