„Î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ă).
Conţinut
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:
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ă.
Î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_.
#Cum #să #construiți #aplicație #simplă #recunoaștere #vorbirii
Cum să construiți o aplicație simplă de recunoaștere a vorbirii