Bygg en stemme kontrollert UI

Vi har sett mange nye APIer lagt til på nettet de siste årene som har virkelig gjort det mulig for webinnhold å ha samme type funksjonalitet som mange apper har hatt i noen tid. En relativt ny API er talegjenkjenning API, som du sikkert kan gjette, lar deg bruke teksten som en inngang på siden. Det krever et klikk for å starte tjenesten og igjen for å stoppe.

Et godt tilfelle for dette kan være i å tillate tilgjengelighet blant brukerne, noe som gir stemmeinngang som et alternativ til å klikke. Hvis analyset ditt viser at du har mye mobilbrowsing, så tenk hvor mye lettere det ville være å snakke inn i telefonen enn å bruke tastaturet.

Det har vært spådommer at skjermbaserte grensesnitt kan begynne å forsvinne innen ti år. Først kan dette høres ut som science fiction, men som brukere blir mer og mer komfortable med tale som input gjennom slike som Alexa og Siri, står det til grunn at dette vil bli gjennomgripende som en inngangsmetode. Tutorialet her vil få deg opp til fart på taleinngang og deretter bruke det til å forlate produktanmeldelser på en e-handel nettsted .

Last ned filene for denne opplæringen.

• 8 tips for å designe stemmegrensesnitt

01. Start prosjektet

Fra mappen Prosjektfiler åpner du "Start" -mappen i koden din og åpner "Speech.html" -filen for å redigere. Alle CSS for prosjektet er skrevet som det ikke er fokuset på talen API, så legg til lenken som vises her for å få Noto Serif Typeface og koble opp CSS-filen.

 & lt; link href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "Stylesheet" & gt;
& lt; link rel = "Stylesheet" href = "css / style.css" & gt; 

02. Legg til innholdet

De første elementene i dette vil være å ha en wrapper for å holde alt vårt på skjermen. Det første elementet her vil være en skjult melding som forteller brukeren om talen API støttes i nettleseren. Dette vil bare bli sett hvis det ikke er det. Deretter forteller en overskrift brukeren om at skjemaelementene som følger, vil bli brukt til deres melding.

 & lt; div id = "wrapper" & gt;
& lt; span id = "unsupported" class = "support skjult" & gt; tale api ikke støttet & lt; / span & gt;
& lt; h2 & gt; din melding: & lt; / h2 & gt; 

03. Velg resultatene

Når du bruker talen API, er det to måter å vise innholdet på. I en, vises tekst når brukeren har sluttet å snakke og "Lytt" -knappen klikkes. Den andre viser ord på skjermen som snakkes. Denne første radioknappen tillater det endelige tale resultatet som skal vises.

 & lt; div id = "TypeOfinput" & gt;
& lt; span & gt; results: & lt; / span & gt;
& lt; label & gt;
& lt; input type = radio navn = anerkjennelse-type verdi = Final & GT; Endelig tale & lt; / label & gt; 

04. Radio to

Den andre radioknappen er lagt til her, og denne tillater brukeren å velge teksten som skal vises som de snakker. Disse radioknappene vil bli plukket opp av JavaScript senere og brukes til å kontrollere taleinngangen, men for nå lar dette at brukeren har et grensesnitt for å kontrollere det.

 & lt; etikett & gt;
& lt; input type = radio navn = anerkjennelse-type verdi = Interim Checked & GT; Som du snakker og lt; / label & gt;
& lt; / div & gt; 

05. Vis teksten

Teksten som brukeren snakker på siden, må vises på skjermen. Her er tekstområdet lagt til som har ID for 'Transkripsjon' - dette vil bli målrettet slik at brukerens tale slutter her. Det er også en klar knapp for å fjerne teksten.

 & lt; textarea id = "transkripsjon" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; button id = "clear-all" class = "knappen" & gt; clear text & lt; / button & gt; 

06. Det siste grensesnittet

De endelige grensesnittelementene legges til skjermen nå. Tale-knappen gjør det mulig å deaktivere talen, så den må klikkes før du snakker. Å klikke på igjen stopper den. Siden dette er en relativt ny interaksjon, vil loggen under, fortelle brukerne hva de skal gjøre.

& lt; div class = "knapp-wrapper" & gt;
    & lt; div id = "talebutton" class = "start" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "logg" & gt; klikk for å begynne å snakke & lt; / div & gt;
& lt; / div & gt; 

07. Legg til JavaScript.

Legg nå skriptmerkene før sluttkroppen. Dette er hvor alt JavaScript vil gå. De to første linjene tar tak i sidelinjene med matchende ID og lagrer dem i en variabel. Transkripsjonen er tekstresultatet av talen. Loggen vil oppdatere brukeren med hvordan du bruker den.

 & lt; script & gt;
var transkripsjon = dokument.getelementbyid ('transkripsjon');
var logg = dokument.getElementbyid ('log');
& lt; / script & gt; 

08. Variable resultater

Ved å bruke de neste få variablene, blir flere grensesnittelementer bufret i dem. Tale-knappen blir en veksle, slik at brukerne bytter tale på og av., Overvåkes av en boolsk, sann / falsk variabel. Clear-All-knappen vil slette utilfredsstillende tale resultater.

 var start = Document.GetelementByid ('SpeechButton');
Var Clear = Document.GetelementByid ('Clear-All');
var taler = false; 

09. Er det støttet?

Det første vår kode vil gjøre er å finne ut om denne talenes funksjonen støttes av brukerens nettleser. Hvis dette resultatet kommer tilbake som null, kaster ikke i hvis setningen opp den skjulte meldingen, samtidig som startknappen tar startknappen fra grensesnittet for å stoppe taleinngangen.

 window.speechRecognition = window.speechRecognition ||
window.webkitspeechRecognition ||.
null;
hvis (window.speechRecognition === null) {
Document.GetelementById ('unsupported'). classlist.Remove ('skjult');
start.classlist.add ('skjult');
} else {

10. Start anerkjennelsen

Talegenkjenningen er startet som "annet" for talegjenkjenningen som er tilgjengelig. Den kontinuerlige inngangen startes som den som er standard på radioknappene. "Onresult" -funksjonen vil håndtere resultatene av taleinngangen. Dette vil bli lagt til i transkripsjonens tekstfelt.

 vargjenkjenning = nytt vindu.
Talegjenkjenning();
Recognizer.Continuous = sant;
Recognizer.onResult = Funksjon (Event) {
transkripsjon.TextContent = '';
for (var i = event.resultindex; i & lt; hendelsen.
results.length; i ++) {

11. Endelig eller delvis?

IF-setningen sjekker nå for å se om brukeren ønsker å vise teksten som de snakker (delvis) eller først etter at de er ferdig med å snakke (endelig). Du vil legge merke til at hvis det er midlertidig, blir hvert ord lagt til teksten med '+ =', mens den endelige bare dumper hele teksten der inne.

 Hvis (Event.results [i] .isfinal) {
transkripsjon.TextContent = event.results [i] 
 .transcript;
} else {
transkripsjon.TextContent + = Event.results [i] 
 .transcript;
}
}
}; 

12. Håndtering av feil

Som med de fleste JavaScript-APIer er det en feilhåndterer som lar deg bestemme hva du skal gjøre med eventuelle problemer som kan oppstå. Disse kastes i 'Log' Diven for å gi tilbakemelding til brukeren, da det er viktig at de er klar over hva som kan fortsette med grensesnittet.

 Recognizer.onError = Funksjon (begivenhet) {
log.innerhtml = 'anerkjennelsesfeil:' +
begivenhet.Message + '& lt; br / gt;' + logg.innerhtml;
}; 

13. Start å snakke!

Hendelseslisten her er startet når brukeren klikker på knappen for å begynne å snakke. Hvis brukeren ikke snakker, endres knappen farge for å vise snakking har startet, variabelen for å snakke er satt til TRUE, og "Interim" -knappen er sjekket for å se om dette er brukerens valg for inngang.

 Start.addeventListener ('klikk', funksjon () {
hvis (! snakker) {
snakker = sant;
start.classlist.Toggle ('stopp');
Recognizer.interimresults = Dokument.
QuerySelector ('Input [Name = "Recogniti
på-type "] [verdi =" Interim "] '). Sjekket; 

14. Ta innspillet

"Prøv og fange" -klæringen starter nå talegjenkjenningen og forteller brukeren at de skal begynne å snakke og at når de er ferdige, "klikker du igjen for å stoppe". Fangsten vil hente feilen og kaste det inn i "logg" div slik at brukeren kan forstå hva som kan være feil.

 Prøv {
anerkjenner.start ();
log.innerhtml = 'Start å snakke nå
& lt; br / & gt; klikk for å stoppe ';
} fangst (ex) {
log.innerhtml = 'anerkjennelsesfeil:
& lt; br / & gt; ' + ex.message;
} 

15. Klikk for å stoppe

Nå når brukeren klikker for å slutte å snakke, er talegjenkjenningen stoppet. Knappen endres tilbake til grønt fra rødt mens du snakker. Brukergrensesnittet oppdateres slik at brukeren er informert om at tjenesten har stoppet. Språkvariabelen er satt til False, klar til å la brukeren snakke igjen.

} else {
anerkjenner.stopp ();
start.classlist.Toggle ('stopp');
log.innerhtml = 'anerkjennelse stoppet
& lt; br / & gt; klikk for å snakke ';
snakker = false;
}
}); 

16. Fjern teksten

Den endelige koden for denne delen er bare en klar knapp for å fjerne taleinngangsteksten i tilfelle det er feilaktig tolket. Lagre filen og test dette i nettleseren din. Du vil kunne klikke på knappen for å snakke inn i datamaskinen og se resultatene.

 Clear.addeventListener ('klikk', funksjon () {transkripsjon.TextContent = '';
});
} 

17. Legg til formål

Nå som du har et arbeidseksempel, må det være noe formål til grensesnittet, så la oss gjøre dette slik at brukerne kan skrive inn vurderinger. Lagre siden og velg deretter Lagre som, med det nye navnet 'anmeldelser.html'. Legg til følgende HTML-elementer like etter at Wrapper "& GT) linje.

 & lt; h1 & gt; produktanmeldelser & lt; / h1 & gt;
& lt; div id = "Anmeldelser" & gt; 

18. Total innsending

Den forrige koden vil holde vurderinger. Brukeren må sende inn taleinngangen, så legg til Submit-knappen rett etter den "Clear Text" -knappen, som vil være rundt linje 28 i koden din. Deretter kan du flytte ned til JavaScript for neste trinn.

 & lt; button id = "Send" class = "knappen" & gt; Send anmeldelse & lt; / button & gt; 

19. Nye grensesnittelementer

På toppen av JavaScript legger du til de nye variablene for å holde referansene til de nye grensesnittelementene som nettopp har blitt lagt til. Disse vil gi deg en måte å sende inn og vise resultatene på skjermen i delen "Anmeldelser" av siden.

 var Send = Document.GetelementByid ('Send');
Var Review = Document.GetelementByid ('anmeldelser'); 

20. Send inn oppføringen

Nå vil koden her håndtere når brukeren klikker på Send-knappen, plasserer dette rett før "Clear" -koden, som skal være rundt linje 88 i koden din. For det første er et avsnitt-tag opprettet, og taleinngangen blir deretter lagt til i dette. Dette vil da bli lagt til i "Review" -delen.

 Send.addeventlistener ('klikk', funksjon () {
La P = Document.Createemement ('P');
VAR TextNode = Document.CreateTextNode
(transkripsjon.Value);
P.appendchild (tekDNODE);
gjennomgang.Allendchild (P);
la i dag = ny dato ();
La S = Document.Createelement ('liten'); 

21. Endelig innsending

Datoen er lagt til slik at anmeldelsen er timestampet i dokumentet. Endelig legges en horisontal regel for å vise hvor hver gjennomgang slutter, så teksten er klar for ny inngang. Lagre siden og test dette. Du vil se at du nå kan sende talen din til siden som vurderinger. For utholdenhet må du bruke en database for å lagre disse resultatene.

 TextNode = Document.CreateTextNode (i dag);
s.appendchild (textnode);
gjennomgang.Allendchild (s);
la hr = dokument.createmement ('hr');
gjennomgang.Allendchild (HR);
transkripsjon.TextContent = '';
}); 

Denne artikkelen ble opprinnelig publisert i utgave 286 av Creative Web Design Magazine Webdesigner . Kjøp problem 286 her eller Abonner på webdesigner her .

Relaterte artikler:

• 14 av de beste JavaScript-APIene
• Bygg en AI-Powered Chatbot
• 5 Emerging UX trender i 2019