Byg en stemme kontrolleret UI

Vi har set mange nye API'er, der tilføjes på internettet i løbet af de sidste par år, der virkelig har gjort det muligt for webindholdet at have den samme slags funktionalitet, så mange apps har haft i nogen tid. En relativt ny API er talegenkendelse API, som som du sandsynligvis kan gætte, giver dig mulighed for at bruge din tekst som et input til siden. Det kræver et klik for at starte tjenesten og igen for at stoppe.

Et godt tilfælde for dette kan være i at tillade tilgængelighed blandt dine brugere, hvilket giver taleindgang som et alternativ til at klikke. Hvis dine analyser viser, at du har en masse mobil browsing, så tænk hvor meget lettere det ville være at tale i din telefon end at bruge tastaturet.

Der har været forudsigelser, at skærmbaserede grænseflader måske begynder at forsvinde inden for ti år. I starten kan det lyde som science fiction, men som brugerne får mere og mere komfortabel med tale som input gennem Likes Alexa og Siri, så står det for at begrunde, at dette vil blive gennemgribende som en inputmetode. Tutorialen her vil få dig hurtigere på taleindgang og derefter bruge det til at forlade produktanmeldelser på en E-handel Site. .

Download filerne for denne vejledning.

• 8 tips til at designe stemmeinterfaces

01. Start projektet

Fra mappen Project Files skal du åbne mappen 'Start' i din kode IDE og åbne 'Speech.html' -filen, der skal redigeres. Alle CSS for projektet er skrevet, da det ikke fokuserer på talen API, så tilføj linket vist her for at få NOTO SERIF skrifttypeface og linke 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. Tilføj indholdet

De første elementer i dette vil være at have en wrapper, hvor man skal holde alt vores on-screen-indhold. Det første element i her vil være en skjult besked, der fortæller brugeren, hvis talen API understøttes i browseren. Dette ses kun, hvis det ikke er det. Derefter fortæller en overskrift den bruger, at formelementerne, der følger, vil blive brugt til deres besked.

 & lt; div id = "wrapper" & gt;
& lt; span id = "ikke understøttet" klasse = "support skjult" & gt; tale api ikke understøttet & lt; / span & gt;
& lt; h2 & gt; din besked: & lt; / h2 & gt; 

03. Vælg resultaterne

Når du bruger talen API, er der to måder at vise indholdet på. I en vises tekst, når brugeren er stoppet med at tale, og 'Lytte' -knappen klikkes. Den anden viser ord på skærmen som talt. Denne første radioknap giver mulighed for det endelige talesultat, der skal vises.

 & LT; DIV ID = "TypeOffinput" & GT;
& lt; span & gt; resultater: & lt; / span & gt;
& lt; label & gt;
& lt; input type = radio navn = genkendelses-type værdi = endelig & gt; Endelig tale & lt; / Etiket & GT; 

04. Radio Two.

Den anden radioknap er tilføjet her, og denne giver brugeren mulighed for at vælge teksten, der skal vises, når de taler. Disse radioknapper vil blive afhentet af JavaScript senere og bruges til at styre taletilgangen, men for nu kan brugeren have en grænseflade til at kontrollere det.

 & lt; label & gt;
& lt; input type = radio navn = genkendelsestype Værdi = Interim kontrolleret & GT; Som du taler / lt; / label & gt;
& lt; / div & gt; 

05. Vis teksten

Teksten, som brugeren taler ind på siden, skal vises på skærmen. Her tilføjes tekstområdet, der har ID for 'Transcription' - dette vil blive målrettet, så brugerens tale slutter her. Der er også en klar knap for at fjerne teksten.

 & lt; textarea id = "transkription" readonly & gt;
& lt; / textarea & gt;
& lt; br / gt;
& lt; knap id = "CLEAR-ALL" klasse = "-knap" og GT; Ryd tekst & LT; / Button & GT; 

06. Den sidste grænseflade

De endelige interfaceelementer tilføjes nu på skærmen. Taleknappen muliggør og deaktiverer talen, så det skal klikkes, før du taler. Ved at klikke igen stopper det igen. Da dette er en relativt ny interaktion, vil loggen nedenunder fortælle brugerne hvad de skal gøre.

& lt; div class = "knap-wrapper" & gt;
    & lt; div id = "Speechbutton" klasse = "Start" & gt; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; klik for at starte tale og lt; / div & gt;
& lt; / div & gt; 

07. Tilføj JavaScript.

Tilføj nu script-tags før lukkekroppen. Det er her, hvor alle javascript vil gå. De to første linjer tager fat på sidelementerne med matchende id og gemmer dem i en variabel. Transskriptionen er tekstresultatet af talen. Loggen opdaterer brugeren med, hvordan du bruger den.

 & lt; script & gt;
var transkription = dokument.getelementbyid ('transkription');
Var Log = Document.GetelementById ('Log');
& lt; / script & gt; 

08. Variable resultater.

Ved hjælp af de næste få variabler er flere interfaceelementer cacket i dem. Taleknappen bliver en skifte, så brugerne til at skifte tale til og fra., Overvåget af en boolsk, sand / falsk variabel. Den klare-alle-knap vil slette utilfredsstillende talesultater.

 Var Start = Document.GetelementById ('SpeechButton');
Var Clear = Document.GetelementById ('CLEAR-ALL');
VAR TALING = FALSE; 

09. Er det støttet?

Det første vores kode vil gøre er at finde ud af, om denne talefunktion understøttes af brugerens browser. Hvis dette resultat kommer tilbage som null, så kaster den skjulte besked på den skjulte besked, samtidig med at startknappen samtidig tager startknappen væk fra grænsefladen for at stoppe taletindgangen.

 vindue.speechrecognition = vindue.speechrecognition ||
vindue.webkitspeechRecognition ||.
nul;
hvis (vindue.speechrecognition === null) {
dokument.getelementbyid ('unsupported'). ClassList.Remove ('Hidden');
start.classlist.add ('skjult');
} ellers {

10. Start anerkendelsen

Talegenkendelsen er startet som "ellers" for talegenkendelsen er tilgængelig. Den kontinuerlige indgang startes som det er standard på radioknapperne. Funktionen 'Onresult' vil håndtere resultaterne af talindgangen. Dette vil blive tilføjet i transkriptionens tekstfelt.

 VAR genkendelse = nyt vindue.
Tale genkendelse();
genkendelse. Kontinuerlig = sandt;
genkendelse.onresult = funktion (begivenhed) {
transcription.textcontent = '';
for (var i = event.resultindex; i & lt; begivenhed.
resultater.Længde; I ++) {

11. Endelig eller foreløbig?

IF-sætningen kontrollerer nu, om brugeren ønsker at vise teksten, som de taler (midlertidigt) eller kun efter at de er færdige med at tale (endelig). Du vil bemærke, at hvis det er midlertidigt, bliver hvert ord tilføjet til teksten med '+ =', mens den endelige bare dumper hele teksten derinde.

 hvis (event.results [i] .frisfinal) {
transcription.textcontent = event.results [i] 
 .Transcript;
} ellers {
transcription.TextContent + = event.Results [i] 
 .Transcript;
}
}
}; 

12. Håndtering af fejl

Som med de fleste JavaScript API'er er der en fejlhandler, der giver dig mulighed for at bestemme, hvad de skal gøre med eventuelle problemer, der måtte opstå. Disse kastes i 'log'-div for at give feedback til brugeren, da det er vigtigt, at de er opmærksomme på, hvad der kan foregå med grænsefladen.

 RECENDER.ONERROR = FUNKTION (EVENT) {
log.innerhtml = 'genkendelsesfejl:' +
event.message + '& lt; br / gt;' + log.innerhtml;
}; 

13. Begynd at tale!

Hændelseslytteren her er startet, når brugeren klikker på knappen for at begynde at tale. Hvis brugeren ikke taler, ændres knappen Farve til at vise tale, er startet, variablen til tale er indstillet til TRUE, og 'Interim' -knappen er markeret for at se, om dette er brugerens valg til input.

 Start.AddeventListener ('Klik', funktion () {
Hvis (! Talende) {
Talende = TRUE;
start.classlist.toggle ('stop');
genkendelses.interimresults = dokument.
Queryselector ('Input [Name = "genkenditi
on-type "] [Value =" Interim "] '). Kontrolleret; 

14. Tag input

"Prøv og fangst" starter nu talegenkendelse og fortæller brugeren, at de skal begynde at tale, og at når de er færdige, skal du 'klikke igen for at stoppe'. Fangstenen vil afhente fejlen og smide det ind i 'Log' Div, så brugeren kan forstå, hvad der kan være forkert.

 Prøv {
genkendelse.start ();
log.innerhtml = 'Start tale nu
& lt; BR / & GT; klik for at stoppe ';
} fangst (ex) {
log.innerhtml = 'Genkendelsesfejl:
& lt; br / gt; ' + ex.message;
} 

15. Klik for at stoppe

Nu, når brugeren klikker for at stoppe med at tale, er talegenkendelse stoppet. Knappen skiftes tilbage til grøn fra rødt, mens du snakker. Brugergrænsefladen opdateres, så brugeren er informeret om, at tjenesten er stoppet. Talende variabel er indstillet til FALSE, klar til at lade brugeren tale igen.

} ellers {
genkendelse.stop ();
start.classlist.toggle ('stop');
log.innerhtml = 'Anerkendelse stoppet
& lt; BR / & GT; klik for at tale ';
tale = falsk;
}
}); 

16. Ryd teksten

Den endelige kode for dette afsnit er bare en klar knap for at fjerne taletindgangsteksten, hvis den fejlagtigt fortolkes. Gem filen og test dette i din browser. Du vil være i stand til at klikke på knappen for at tale i computeren og se resultaterne.

 Clear.AddeventListener ('klik', funktion () {transkription.textcontent = '';
});
} 

17. Tilføj formål

Nu som du har et arbejdseksempel, skal der være et tegn på grænsefladen, så lad os gøre det, så brugerne kan indtaste anmeldelser. Gem siden og vælg derefter Gem som, med det nye navn på 'anmeldelser.html'. Tilføj følgende HTML-elementer lige efter & lt; div id = "wrapper" & gt; linje.

 & lt; H1 & GT; Produktanmeldelser & lt; / h1 & gt;
& lt; div id = "anmeldelser" & gt; & lt; / div & gt; 

18. Samlet indsendelse

Den forrige kode vil holde anmeldelserne. Brugeren skal indsende deres taleinput, så tilføj knappen Send-knap lige efter knappen 'Clear Text', som vil være omkring linje 28 i din kode. Derefter kan du flytte ned til JavaScript for det næste trin.

 & LT; Button ID = "Send" Class = "-knap" & GT; Submit Review & LT; / Button & GT; 

19. Nye interface elementer

Øverst på javascript Tilføj de nye variabler for at holde referencerne til de nye interfaceelementer, der netop er blevet tilføjet. Disse vil give dig en måde at indsende og vise resultaterne på skærmen i afsnittet 'Anmeldelser' på siden.

 Var Send = Document.GetelementById ('Send');
Var Review = Document.GetelementById ('anmeldelser'); 

20. Indsend posten

Nu vil koden her håndtere, når brugeren klikker på knappen Submit, skal du placere dette lige før knappen 'Clear', som skal være omkring linje 88 i din kode. For det første oprettes et stykkemærke, og talindgangen tilføjes efterfølgende i dette. Dette vil så blive tilføjet i afsnittet 'Review'.

 Send.AddeventListener ('klik', funktion () {
Lad p = dokument.creationleelement ('P');
VAR TEXTNODE = DOCUMENT.CREATETEXTNODE
(transcription.Value);
p.appendchild (tekstnode);
Review.Appendchild (P);
lad i dag = ny dato ();
lad s = dokument.createelement ('lille'); 

21. Endelig indsendelse

Datoen er tilføjet, så anmeldelsen er tidsstempel i dokumentet. Endelig tilføjes en vandret regel for at vise, hvor hver anmeldelse slutter, så er teksten ryddet klar til ny indgang. Gem siden og test dette. Du vil se, at du nu kan indsende din tale på siden som anmeldelser. For vedholdenhed skal du bruge en database til at gemme disse resultater.

 Textnode = Document.creatorTextnode (i dag);
s.appendchild (tekstnode);
Review.Appendchild (r);
lad hr = dokument.createelement ('hr');
Review.Appendchild (HR);
transcription.textcontent = '';
}); 

Denne artikel blev oprindeligt offentliggjort i udstedelse 286 af Creative Web Design Magazine Webdesigner . Køb problem 286 her eller Abonner på Web Designer her .

Relaterede artikler:

• 14 af de bedste JavaScript API'er
• Byg en AI-Powered Chatbot
• 5 nye UX-trends i 2019