Sådan opbygges en simpel talegenkendelsesapp

”I denne 10-årige tidsramme tror jeg, at vi ikke kun bruger tastaturet og musen til at interagere, men i løbet af denne tid vil vi have perfektioneret talegenkendelse og taleoutput godt nok til, at de bliver en standard del af interface. ” - Bill Gates, 1. oktober 1997

Teknologi er kommet langt, og med hvert nyt fremskridt bliver menneskeheden mere knyttet til den og længes efter disse nye seje funktioner på tværs af alle enheder.

Med fremkomsten af ​​Siri, Alexa og Google Assistant har brugere af teknologi længes efter talegenkendelse i deres daglige brug af internettet. I dette indlæg vil jeg dække, hvordan man integrerer native talegenkendelse og talesyntese i browseren ved hjælp af JavaScript WebSpeech API.

Ifølge Mozilla-webdokumenterne:

Web Speech API giver dig mulighed for at inkorporere stemmedata i webapps. Web Speech API har to dele: SpeechSynthesis (Text-to-Speech) og SpeechRecognition (Asynchronous Speech Recognition.)

Krav, vi skal bygge vores applikation

Til denne enkle app til talegenkendelse arbejder vi med kun tre filer, som alle findes i samme bibliotek:

  • index.html indeholdende HTML til appen.
  • style.css indeholdende CSS-typografier.
  • index.js indeholdende JavaScript-koden.

Vi skal også have et par ting på plads. De er som følger:

  • Grundlæggende viden om JavaScript.
  • En webserver til at køre appen. Webserveren til Chromevil være tilstrækkelig til dette formål.

Opsætning af vores talegenkendelsesapp

Lad os komme i gang ved at opsætte HTML og CSS til appen. Nedenfor er HTML-markeringen:

      Speech Recognition  //soundbible.com/1598-Electronic-Chime.html -->

Her er dens ledsagende CSS-stil:

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

Kopiering af koden ovenfor skal resultere i noget svarende til dette:

Tænd for vores talegenkendelsesapp med WebSpeech API

I skrivende stund er WebSpeech API kun tilgængelig i Firefox og Chrome. Dens interface til talesyntese lever på browserens windowobjekt, speechSynthesismens dens talegenkendelsesgrænseflade lever på browserens windowobjekt som SpeechRecognitioni Firefox og som webkitSpeechRecognitioni Chrome.

Vi vil indstille genkendelsesgrænsefladen til SpeechRecognitionuanset hvilken browser vi er i:

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

Dernæst instantierer vi talegenkendelsesgrænsefladen:

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');

I ovenstående kode, bortset fra instantiere talegenkendelse, vi også valgt de icon, text-box,og soundelementer på siden. Vi oprettede også et afsnitelement, der indeholder de ord, vi siger, og vi tilføjede det til text-box.

Hver gang der klikkes på mikrofonikonet på siden, vil vi afspille vores lyd og starte talegenkendelsestjenesten. For at opnå dette tilføjer vi en klikbegivenhedslytter til ikonet:

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

I tilfælde af at lytteren, efter at have spillet lyden, gik vi videre og oprettede og kaldte en dictatefunktion. Den dictatefunktion starter den talegenkendelse tjeneste ved at kalde startmetoden på talegenkendelse instans.

For at returnere et resultat for hvad en bruger siger, er vi nødt til at tilføje en resultbegivenhed til vores taleigenkendelsesforekomst. Den dictatefunktion vil så se således ud:

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

Den resulterende eventreturnerer en SpeechRecognitionEventsom indeholder et resultsobjekt. Dette indeholder igen transcriptejendommen, der indeholder den anerkendte tale i tekst. Vi gemmer den genkendte tekst i en kaldet variabel speechToTextog placerer den i paragraphelementet på siden.

Hvis vi kører appen på dette tidspunkt, skal du klikke på iconog sige noget, det skal dukke op på siden.

Indpakning af det med tekst til tale

For at tilføje tekst til tale til vores app bruger vi speechSynthesisgrænsefladen til WebSpeech API. Vi starter med at instantiere det:

const synth = window.speechSynthesis;

Dernæst opretter vi en funktion, speaksom vi kalder, når vi vil have, at appen skal sige noget:

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

Den speakfunktion tager i en funktion kaldet den actionsom parameter. Funktionen returnerer en streng, der sendes til SpeechSynthesisUtterance. SpeechSynthesisUtteranceer WebSpeech API-interface, der indeholder det indhold, som talegenkendelsestjenesten skal læse. Derefter kaldes speakmetoden speechSynthesis til sin forekomst og sendte indholdet til at læse.

For at teste dette skal vi vide, hvornår brugeren er færdig med at tale og siger en keyword.Heldigvis er der en metode til at kontrollere, at:

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

I koden ovenfor kaldte vi isFinalmetoden på vores hændelsesresultat, som vender tilbage trueeller falseafhængigt af om brugeren er færdig med at tale.

Hvis brugeren er færdig med at tale, kontrollerer vi, om udskriften af ​​det, der er sagt, indeholder nøgleord som what is the timeosv. Hvis det sker, kalder vi vores speakfunktion og sender den til en af ​​de tre funktioner getTime, getDateeller getTheWeathersom alle returnerer en streng, som browseren kan læse.

Vores index.jsfil skal nu se sådan ud:

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

Lad os klikke på ikonet og prøve en af ​​følgende sætninger:

  • Hvad er klokken?
  • Hvad er datoen i dag?
  • Hvad er vejret i Lagos?

Vi skulle få et svar fra appen.

Konklusion

I denne artikel har vi været i stand til at opbygge en simpel talegenkendelsesapp. Der er et par mere seje ting, vi kunne gøre, som at vælge en anden stemme at læse for brugerne, men jeg overlader det til dig at gøre.

Hvis du har spørgsmål eller feedback, bedes du efterlade dem som en kommentar nedenfor. Jeg kan ikke vente med at se, hvad du bygger med dette. Du kan slå mig op på Twitter @developia_.