„În acest interval de timp de 10 ani, cred că nu numai că vom folosi tastatura și mouse-ul pentru a interacționa, dar în acest timp vom avea recunoașterea vocală perfectă și o ieșire vocală suficient de bună încât acestea să devină o parte standard interfață. ” – Bill Gates, 1 octombrie 1997

Tehnologia a parcurs un drum lung și, cu fiecare nou progres, rasa umană devine mai atașată de ea și tânjește după aceste noi caracteristici interesante pe toate dispozitivele.

Odată cu apariția Siri, Alexa și Google Assistant, utilizatorii de tehnologie au dorit să recunoască vorbirea în utilizarea lor zilnică a internetului. În această postare, voi prezenta cum să integreze recunoașterea vorbirii native și sinteza vorbirii în browser folosind JavaScript API WebSpeech.

Conform documentelor web Mozilla:

API-ul Web Speech vă permite să încorporați date vocale în aplicațiile web. API-ul Web Speech are două părți: SpeechSynthesis (Text-to-Speech) și SpeechRecognition (Recunoaștere vorbire asincronă).

Cerințe de care vom avea nevoie pentru a ne construi aplicația

Pentru această aplicație simplă de recunoaștere a vorbirii, vom lucra cu doar trei fișiere care vor locui toate în același director:

  • index.html care conține codul HTML pentru aplicație.
  • style.css care conține stilurile CSS.
  • index.js care conține codul JavaScript.

De asemenea, trebuie să avem câteva lucruri la locul lor. Acestea sunt după cum urmează:

  • Cunoștințe de bază despre JavaScript.
  • Un server web pentru rularea aplicației. Server Web pentru Chrome va fi suficient în acest scop.

Configurarea aplicației noastre de recunoaștere a vorbirii

Să începem configurând HTML și CSS pentru aplicație. Mai jos este marcajul HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Speech Recognition</title>
  <link rel="stylesheet" href="https://www.freecodecamp.org/news/how-to-build-a-simple-speech-recognition-app-a65860da6108/style.css">
  <link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light" rel="stylesheet">
  <!-- load font awesome here for icon used on the page -->
</head>
<body>
  <div class="container"> <!--page container -->
    <div class="text-box" contenteditable="true"></div> <!--text box which will contain spoken text -->
    <i class="fa fa-microphone"></i> <!-- microphone icon to be clicked before speaking -->
  </div>
  <audio class="sound" src="chime.mp3"></audio> <!-- sound to be played when we click icon => http://soundbible.com/1598-Electronic-Chime.html -->
  <script src="index.js"></script> <!-- link to index.js script -->
</body>
</html>

Iată stilul CSS însoțitor:

body {
  background: #1e2440;
  color: #f2efe2;
  font-size: 16px;
  font-family: 'Kaushan Script', cursive;
  font-family: 'Shadows Into Light', cursive;
}
.container {
  position: relative;
  border: 1px solid #f2efe2;
  width: 40vw;
  max-width: 60vw;
  margin: 0 auto;
  border-radius: 0.1rem;
  background: #f2efe2;
  padding: 0.2rem 1rem;
  color: #1e2440;
  overflow: scroll;
  margin-top: 10vh;
}
.text-box {
  max-height: 70vh;
  overflow: scroll;
}
.text-box:focus {
  outline: none;
}
.text-box p {
  border-bottom: 1px dotted black;
  margin: 0px !important;
}
.fa {
  color: white;
  background: #1e2440;
  border-radius: 50%;
  cursor: pointer;
  margin-top: 1rem;
  float: right;
  width: 2rem;
  height: 2rem;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .container {
    width: 85vw;
    max-width: 85vw;
  }
.text-box {
    max-height: 55vh;
  }
}

Copierea codului de mai sus ar trebui să ducă la ceva similar cu acesta:

Cum sa construiti o aplicatie simpla de recunoastere a vorbirii
Interfață web pentru aplicația simplă de recunoaștere a vorbirii

Activarea aplicației noastre de recunoaștere a vorbirii cu API-ul WebSpeech

În momentul scrierii, API-ul WebSpeech este disponibil numai în Firefox și Chrome. Interfața sa de sinteză a vorbirii trăiește în browser window obiect ca speechSynthesis în timp ce interfața sa de recunoaștere a vorbirii trăiește în browser window obiect ca SpeechRecognition în Firefox și ca webkitSpeechRecognition în Chrome.

Vom seta interfața de recunoaștere la SpeechRecognition indiferent de browserul pe care ne aflăm:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;

Apoi vom crea o interfață de recunoaștere a vorbirii:

const recognition = new SpeechRecognition();
const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');

În codul de mai sus, în afară de instanțierea recunoașterii vorbirii, am selectat și icon, text-box, și sound elemente de pe pagină. De asemenea, am creat un element de paragraf care va conține cuvintele pe care le spunem și l-am adăugat la text-box.

Ori de câte ori se face clic pe pictograma microfonului din pagină, vrem să redăm sunetul nostru și să începem serviciul de recunoaștere a vorbirii. Pentru a realiza acest lucru, adăugăm un clic ascultător de evenimente la pictogramă:

icon.addEventListener('click', () => {
  sound.play();
  dictate();
});
const dictate = () => {
  recognition.start();
}

În ascultătorul de evenimente, după ce am redat sunetul, am continuat și am creat și am sunat la a dictate funcţie. dictate funcția pornește serviciul de recunoaștere a vorbirii apelând telefonul start metoda instanței de recunoaștere a vorbirii.

Pentru a returna un rezultat pentru orice spune un utilizator, trebuie să adăugăm un result eveniment la instanța noastră de recunoaștere a vorbirii. dictate funcția va arăta astfel:

const dictate = () => {
  recognition.start();
  recognition.onresult = (event) => {
    const speechToText = event.results[0][0].transcript;
    
    paragraph.textContent = speechToText;
  }
}

Rezultați event returnează un SpeechRecognitionEvent care conține o results obiect. La rândul său, acesta conține transcript proprietate care deține discursul recunoscut în text. Salvăm textul recunoscut într-o variabilă numită speechToText și pune-l în paragraph element de pe pagină.

Dacă rulăm aplicația în acest moment, faceți clic pe icon și spune ceva, ar trebui să apară pe pagină.

1612048688 23 Cum sa construiti o aplicatie simpla de recunoastere a vorbirii
Vorbire către text în plin efect

Înfășurându-l cu text în vorbire

Pentru a adăuga text la vorbire în aplicația noastră, vom folosi speechSynthesis interfața API-ului WebSpeech. Vom începe prin a-l instanția:

const synth = window.speechSynthesis;

Apoi, vom crea o funcție speak pe care îl vom apela ori de câte ori dorim ca aplicația să spună ceva:

const speak = (action) => {
  utterThis = new SpeechSynthesisUtterance(action());
  synth.speak(utterThis);
};

speak funcția preia o funcție numită action ca parametru. Funcția returnează un șir care este transmis către SpeechSynthesisUtterance. SpeechSynthesisUtterance este interfața API WebSpeech care deține conținutul pe care ar trebui să îl citească serviciul de recunoaștere a vorbirii. Discursul Sinteza speak metoda este apoi apelată la instanța sa și este transmisă conținutul pentru citire.

Pentru a testa acest lucru, trebuie să știm când utilizatorul a terminat de vorbit și spune a keyword. Din fericire există o metodă de verificare a faptului că:

const dictate = () => {
  ...
  if (event.results[0].isFinal) {
    if (speechToText.includes('what is the time')) {
        speak(getTime);
    };
    
    if (speechToText.includes('what is today's date
')) {
        speak(getDate);
    };
    
    if (speechToText.includes('what is the weather in')) {
        getTheWeather(speechToText);
    };
  }
  ...
}
const getTime = () => {
  const time = new Date(Date.now());
  return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};
const getDate = () => {
  const time = new Date(Date.now())
  return `today is ${time.toLocaleDateString()}`;
};
const getTheWeather = (speech) => {
fetch(`http://api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`)
.then(function(response){
  return response.json();
})
.then(function(weather){
  if (weather.cod === '404') {
    utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
    synth.speak(utterThis);
    return;
  }
  utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
  synth.speak(utterThis);
  });
};

În codul de mai sus, am apelat la isFinal metoda rezultatului evenimentului nostru care revine true sau false în funcție de dacă utilizatorul a terminat de vorbit.

Dacă utilizatorul a terminat de vorbit, verificăm dacă transcrierea celor spuse conține cuvinte cheie precum what is the time , și așa mai departe. Dacă da, îl numim pe al nostru speak funcția și treceți una dintre cele trei funcții getTime, getDate sau getTheWeather care returnează un șir pentru ca browserul să îl citească.

Al nostru index.js fișierul ar trebui să arate acum:

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const synth = window.speechSynthesis;
const recognition = new SpeechRecognition();

const icon = document.querySelector('i.fa.fa-microphone')
let paragraph = document.createElement('p');
let container = document.querySelector('.text-box');
container.appendChild(paragraph);
const sound = document.querySelector('.sound');

icon.addEventListener('click', () => {
  sound.play();
  dictate();
});

const dictate = () => {
  recognition.start();
  recognition.onresult = (event) => {
    const speechToText = event.results[0][0].transcript;
    
    paragraph.textContent = speechToText;

    if (event.results[0].isFinal) {

      if (speechToText.includes('what is the time')) {
          speak(getTime);
      };
      
      if (speechToText.includes('what is today's date')) {
          speak(getDate);
      };
      
      if (speechToText.includes('what is the weather in')) {
          getTheWeather(speechToText);
      };
    }
  }
}

const speak = (action) => {
  utterThis = new SpeechSynthesisUtterance(action());
  synth.speak(utterThis);
};

const getTime = () => {
  const time = new Date(Date.now());
  return `the time is ${time.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })}`
};

const getDate = () => {
  const time = new Date(Date.now())
  return `today is ${time.toLocaleDateString()}`;
};

const getTheWeather = (speech) => {
  fetch(`http://api.openweathermap.org/data/2.5/weather?q=${speech.split(' ')[5]}&appid=58b6f7c78582bffab3936dac99c31b25&units=metric`) 
  .then(function(response){
    return response.json();
  })
  .then(function(weather){
    if (weather.cod === '404') {
      utterThis = new SpeechSynthesisUtterance(`I cannot find the weather for ${speech.split(' ')[5]}`);
      synth.speak(utterThis);
      return;
    }
    utterThis = new SpeechSynthesisUtterance(`the weather condition in ${weather.name} is mostly full of ${weather.weather[0].description} at a temperature of ${weather.main.temp} degrees Celcius`);
    synth.speak(utterThis);
  });
};

Să facem clic pe pictogramă și să încercăm una dintre următoarele fraze:

  • Cat este ceasul?
  • În ce dată suntem astăzi?
  • Care este vremea în Lagos?

Ar trebui să primim un răspuns din aplicație.

Concluzie

În acest articol, am reușit să construim o aplicație simplă de recunoaștere a vorbirii. Există câteva alte lucruri interesante pe care le-am putea face, cum ar fi selectarea unei voci diferite pentru a le citi utilizatorilor, dar vă las asta.

Dacă aveți întrebări sau feedback, vă rugăm să le lăsați ca un comentariu mai jos. Abia aștept să văd ce construiești cu asta. Puteți să mă loviți pe Twitter @developia_.