Как добавить голосовой поиск на сайт

Как добавить голосовой поиск на сайт

Как добавить голосовой поиск на сайт

Узнайте, Как добавить голосовой поиск на сайт с помощью HTML5 Web Speech API. Ваш сайт получит возможность заполнять поля форм и текстовых областей, используя голос.

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

Звучит как волшебство, не так ли? А знаете ли вы, что вы также можете подключить аналогичные возможности голосового поиска на свой ​​собственный сайт с помощью нескольких строк кода. Посетители могут искать что-либо, или даже заполнять формы, используя только свой голос. Оба главных браузера, Google Chrome и Firefox поддерживают API распознавания речи.

Как добавить голосовой поиск на сайт

Ранее мы могли добавить атрибут x-webkit-speech в любое поле форм ввода и он был способен распознавать голос. Однако, на сегодняшний день, атрибут x-webkit-speech устарел, и теперь мы должны использовать JavaScript API для добавления голосового поиска на сайт. Вот Обновленный код:

Код
<!-- CSS Styles -->
<style>
  .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  .speech img {float: right; width: 40px }
</style>
 
<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>
 
<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {
 
    if (window.hasOwnProperty('webkitSpeechRecognition')) {
 
      var recognition = new webkitSpeechRecognition();
 
      recognition.continuous = false;
      recognition.interimResults = false;
 
      recognition.lang = "en-US";
      recognition.start();
 
      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };
 
      recognition.onerror = function(e) {
        recognition.stop();
      }
 
    }
  }
</script>

Когда пользователь нажимает на изображение микрофона, JavaScript проверяет, поддерживает ли браузер пользователя распознавание речи? Если да, то он ждет транскрибируемый текст а затем отправляет форму.

Диктовки App также используют API распознавания речи, однако там транскрибируемый текст записывается в поле TEXTAREA вместо поля для ввода.

Некоторые замечания:

Если HTML форма / окно поиска встроено внутри веб-сайта HTTPS, браузер не будет повторно запрашивать разрешение на использование микрофона.

Вы можете изменить значение recognition.lang «ru-RU» на другой язык.

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *