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

Отворете Google на вашия настолен компютър и ще намерите малка икона на микрофон, вградена в полето за търсене. Щракнете върху иконата, кажете нещо и гласът ви бързо ще се обърне в думи. За разлика от по-ранните продукти за разпознаване на реч, вече не е нужно да обучавате браузъра да разбира речта ви.

Звучи като магия, нали? Е, знаете ли, че можете да включите подобни възможности за разпознаване на реч на вашия собствен уебсайт с няколко реда код. Посетителите могат да търсят в уебсайта Ви или дори да попълват формуляри, използвайки само техния глас. Както браузърите Google Chrome, така и Firefox поддържат API за разпознаване на реч.

Преди да се потопим в реалното внедряване, нека да играем с работеща демонстрация. Ако разглеждате тази страница в Google Chrome (настолен или мобилен), щракнете върху иконата на глас в полето за търсене и кажете заявка за търсене. Може да разрешите на браузъра да получи достъп до вашия микрофон. Когато свършите да говорите, страницата с резултати от търсенето ще се отвори автоматично.

Добавете гласово разпознаване към вашия уебсайт

HTML5 Web Speech API съществува от няколко години, но сега е необходимо малко повече работа, за да го включите в уебсайта си.

По-рано можете да добавите атрибута x-webkit-speach към всяко поле за въвеждане на формуляр и той ще стане гласовo способен. Атрибутът x-webkit-speach обаче е оттеглен и сега се изисква да използвате 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>

Имаме CSS, за да поставим изображението на микрофона във полето за въвеждане, кода на формата, съдържащ бутона за въвеждане и JavaScript, който върши тежката работа.

Когато потребителят кликне върху микрофона в полето за търсене, JavaScript проверява дали браузърът на потребителя поддържа разпознаване на речта. Ако е така, той чака преписаният текст да пристигне от сървърите на Google и след това изпраща формуляра.

Някои бележки:

1. Ако HTML формулярът / полето за търсене е вграден в уебсайт на HTTPS, браузърът няма да иска многократно разрешение за използване на микрофона.
2. Можете да промените стойността на свойството recognition.lang от ‘en-US’ на друг език (като hi-In за хинди или fr-FR за Français). Вижте пълния списък на поддържаните езици.

Вижте още: как да си купя домейн