Bouw een spraakgestuurde UI

We hebben de afgelopen jaren veel nieuwe API's toegevoegd aan het web dat de algemene inhoud van het web echt heeft ingeschakeld om dezelfde soort functionaliteit te hebben, omdat veel apps al enige tijd hebben gehad. Een relatief nieuwe API is de spraakherkenning API, wat u waarschijnlijk kunt raden, kunt u uw tekst gebruiken als een invoer op de pagina. Het vereist een klik om de service te starten en opnieuw te stoppen.

Een geweldig geval hiervoor kan worden toegankelijk voor de toegankelijkheid van uw gebruikers, het geven van spraakingang als een alternatief voor het klikken. Als uw analyse laten zien dat u veel mobiele browsen hebt, denk dan hoe veel gemakkelijker het zou zijn om in uw telefoon te spreken dan het toetsenbord gebruiken.

Er zijn voorspellingen geweest dat op het scherm gebaseerde interfaces binnen tien jaar zouden kunnen verdwijnen. In het begin klinkt dit misschien als science fiction, maar omdat gebruikers steeds comfortabeler worden met spraak als invoer door de wil van Alexa en Siri, dan staat het dan aan reden dat dit doordringend wordt als een invoermethode. De tutorial hier zorgt voor snelheid op spraakinvoer en gebruik dan dat om productrecensies op een te verlaten e-commerce site ​

Download de bestanden voor deze tutorial.

• 8 tips voor het ontwerpen van spraakinterfaces

01. Start het project

Open vanuit de map Projectbestanden de map 'Start' in uw code IDE en open het bestand 'Speech.html' om te bewerken. Alle CSS voor het project is geschreven omdat dat niet de focus van de Speech API is, dus voeg de link hier toe om het TOTO-SERIF-lettertype te krijgen en het CSS-bestand te koppelen.

 & lt; link href = "https://fonts.gogleapis.com/css?family=noto+serif" rel = "stylesheet" & GT;
& LT; LINK REL = "STYLESHEET" HREF = "CSS / STYLE.CSSS" & GT; 

02. Voeg de inhoud toe

De eerste elementen hiervan zullen zijn om een ​​wikkel te hebben om al onze inhoud op het scherm te houden. Het eerste element hier is een verborgen bericht dat de gebruiker vertelt of de spraak-API wordt ondersteund in de browser. Dit wordt alleen gezien als dat niet is. Dan vertelt een rubriek de gebruiker die de formulierelementen die volgen zullen worden gebruikt voor hun bericht.

 & lt; div id = "wrapper" & GT;
& LT; span id = "niet-ondersteunde" klasse = "ondersteuning verborgen" & GT; Speech API niet ondersteund & lt; / span & GT;
& LT; H2 & GT; Uw bericht: & LT; / H2 & GT; 

03. Kies de resultaten

Bij gebruik van de Speech API zijn er twee manieren om de inhoud weer te geven. In één wordt tekst weergegeven wanneer de gebruiker is gestopt met spreken en de knop 'Luisteren' wordt aangeklikt. De andere toont woorden op het scherm zoals gesproken. Dit eerste keuzerondje maakt het definitieve spraakresumaat mogelijk om te worden getoond.

 & lt; div id = "Typeofinput" & GT;
& LT; Span & GT; Resultaten: & LT; / Span & GT;
& LT; Label & GT;
& LT; INPUT TYPE = RADIO NAAM = Herkenning-Type Waarde = Final & GT; Definitieve speech & lt; / label & gt; 

04. Radio twee

Het tweede keuzerondje is hier toegevoegd en deze kan de gebruiker de tekst selecteren die moet worden weergegeven als ze spreken. Deze radioknoppen worden later opgehaald door het JavaScript en gebruikt om de spraakinvoer te besturen, maar voor nu kan dit de gebruiker een interface hebben om dat te regelen.

 & LT; Label & GT;
& LT; INPUT TYPE = RADIO NAAM = Herkenning-type waarde = tussentijdse gecontroleerd en GT; Zoals je spreekt & lt; / label & gt;
& LT; / DIV & GT; 

05. Geef de tekst weer

De tekst die de gebruiker in de pagina spreekt, moet op het scherm worden weergegeven. Hier wordt het tekstgebied toegevoegd dat de ID van 'transcriptie' heeft - dit wordt beoogd, zodat de toespraak van de gebruiker hier eindigt. Er is ook een duidelijke knop om de tekst te verwijderen.

 & lt; Textarea ID = "Transcriptie" Readonly & GT;
& LT; / Textarea & GT;
& LT; BR / & GT;
& LT; knop ID = "Clear-All" Class = "knop" & GT; Duidelijke tekst & lt; / knop & GT; 

06. De laatste interface

De uiteindelijke interface-elementen worden nu aan het scherm toegevoegd. De toespraakknop schakelt en schakelt de spraak in en schakelt er dus op te klikken voordat u spreekt. Klik hier opnieuw op. Omdat dit een relatief nieuwe interactie is, vertelt het log hieronder de gebruikers wat ze moeten doen.

& lt; div class = "knop-wrapper" & GT;
    & LT; DIV ID = "SpeechButton" Class = "Start" & GT; & LT; / DIV & GT;
  & LT; / DIV & GT;
  & LT; DIV ID = "LOG" & GT; klik om te beginnen met spreken & lt; / div & gt;
& LT; / DIV & GT; 

07. Voeg JavaScript toe

Voeg nu de script-tags toe vóór het afsluitende lichaamstag. Dit is waar al het JavaScript gaan. De eerste twee lijnen pakken de pagina-elementen met de bijpassende ID en bewaar ze in een variabele. De transcriptie is het tekstresultaat van de toespraak. Het logboek werkt de gebruiker bij met het gebruik ervan.

 & LT; Script & GT;
var transcriptie = document.getelementByID ('transcriptie');
Var Log = Document.getelementByID ('log');
& lt; / script & gt; 

08. Variabele resultaten

Met behulp van de volgende paar variabelen zijn meer interfacemelementen in de cache in de cache. De toespraakknop wordt een schakelaar, waardoor gebruikers de spraak in en uit kunnen schakelen., Monitored door een Boolean, TRUE / FALSE-variabele. De knop Clear-All zal onbevredigende spraakresultaten verwijderen.

 Var Start = Document.getelementByID ('speechbutton');
Var Clear = Document.getelementByID ('Clear-All');
var sprekend = false; 

09. Is het ondersteund?

Het eerste ding dat onze code doet, is ontdekken of deze spraakfunctie wordt ondersteund door de browser van de gebruiker. Als dit resultaat terugkomt als null, dan wordt de IF-instructie het verborgen bericht omhooggeeft, terwijl u tegelijkertijd de startknop van de interface kunt verwijderen om de spraakinvoer te stoppen.

 venster.Peechrecognition = venster.Peechrecognition ||
venster.WebkitsPeechrecognition ||
nul;
if (window.speechrecognition === null) {
Document.getelementByID ('niet-ondersteund'). Klassist.Remove ('verborgen');
start.classlist.add ('verborgen');
} anders {

10. Start de erkenning

De spraakherkenning wordt gestart als het 'anders' voor de spraakherkenning die beschikbaar is. De continue ingang wordt gestart, omdat dat de standaardinstelling is op de keuzerondjes. De functie 'Onresult' zal de resultaten van de spraakinvoer aan. Dit wordt toegevoegd aan het tekstveld van het transcriptie.

 Var herkenner = nieuw venster.
Spraakherkenning();
herkenizer.continu = true;
herkenning.onresult = functie (evenement) {
transcriptie.textcontent = '';
voor (var i = event.resultintex; i & lt; evenement.
resultaten. Lengte; i ++) {

11. Finale of interim?

De IF-verklaring controleert nu om te zien of de gebruiker de tekst wil weergeven zoals ze praten (tussentijds) of pas nadat ze het hebben gedaan (finale). U zult merken dat als het interim is, elk woord wordt toegevoegd aan de tekst met de '+ =', terwijl de finale gewoon de hele tekst binnenkeert.

 IF (Event.resultaten [I] .isfinal) {
transcriptie.textcontent = evenement.resultaten [I] 
 .Transcript;
} anders {
transcriptie.textcontent + = evenement.resultaten [i] 
 .Transcript;
​
​
}; 

12. Verwerking van fouten

Net als bij de meeste JavaScript API's is er een foutenhandler waarmee u kunt beslissen wat u moet doen met eventuele problemen die kunnen ontstaan. Deze worden in het 'log' div gegooid om feedback te geven aan de gebruiker, omdat het essentieel is dat ze zich bewust zijn van wat er mogelijk aan de hand is met de interface.

 herkenizer.onerror = functie (evenement) {
log.innerhtml = 'Erfout-fout:' +
event.message + '& lt; br / & gt;' + log.innerhtml;
}; 

13. Begin met spreken!

De gebeurtenisluisteraar hier wordt gestart wanneer de gebruiker op de knop klikt om te beginnen met spreken. Als de gebruiker niet spreekt, verandert de knop van kleur om te laten zien dat het wordt gestart, de variabele voor spreken is ingesteld op TRUE en het 'Interim' -koets wordt gecontroleerd om te zien of dit de keuze van de gebruiker is voor invoer.

 Start.AddevenListener ('klik', functie () {
Als (! Spreken) {
spreken = waar;
start.classlist.toggle ('stop');
herkenner.interimElsults = document.
QuerySelector ('Input [Name = "REERITI
op type "] [waarde =" interim "] '). gecontroleerd; 

14. Neem de invoer

De verklaring 'Try and Catch' start nu de spraakherkenning en vertelt de gebruiker die ze moeten beginnen met spreken en dat wanneer ze klaar zijn, 'klik nogmaals om te stoppen'. De vangst haalt de fout op en gooit dat in de 'log' div, zodat de gebruiker kan begrijpen wat er mis is.

 Probeer {
herkenner.start ();
log.innerhtml = 'begin nu te praten
& LT; BR / & GT; klik om te stoppen ';
} Catch (ex) {
log.innerhtml = 'erfout-fout:
& LT; BR / & GT; ' + ex-Message;
} 

15. Klik om te stoppen

Nu, wanneer de gebruiker klikt om te stoppen met praten, wordt de spraakherkenning gestopt. De knop wordt tijdens het praten terug naar groen gewijzigd. De gebruikersinterface wordt bijgewerkt, zodat de gebruiker wordt geïnformeerd dat de service is gestopt. De sprekende variabele is ingesteld op FALSE, klaar om de gebruiker opnieuw te laten spreken.

} anders {
herkenizer.stop ();
start.classlist.toggle ('stop');
log.innerhtml = 'herkenning stopte
& LT; BR / & GT; klik om te praten ';
spreken = false;
​
}); 

16. Wis de tekst

De definitieve code voor dit gedeelte is slechts een duidelijke knop om de tekstinvoertekst te verwijderen voor het geval deze verkeerd is geïnterpreteerd. Sla het bestand op en test dit in uw browser. U kunt op de knop klikken om in de computer te praten en de resultaten te bekijken.

 Clear.AddeventListener ('klik', functie () {transcription.textcontent = '';
​
} 

17. Voeg het doel toe

Nu, zoals u een werkvoorbeeld hebt, moet er een doel zijn voor de interface, dus laten we dit maken, zodat gebruikers beoordelingen kunnen invoeren. Sla de pagina op en kies vervolgens op Opslaan als, met de nieuwe naam van 'beoordelingen.html'. Voeg de volgende HTML-elementen toe vlak na The & Lt; DIV ID = "Wrapper" & GT; lijn.

 & LT; H1 & GT; Productbeoordelingen & LT; / H1 & GT;
& lt; div id = "beoordelingen" & gt; & lt; / div & gt; 

18. Totale inzending

De vorige code bevat de beoordelingen. De gebruiker moet hun spraakinvoer indienen, dus voeg de verzendknop aan na de knop 'Tekst wissen', die rond de regel 28 in uw code staat. Dan kunt u naar het JavaScript gaan voor de volgende stap.

 & LT; KNOP ID = "INDIEND" Klasse = "knop" & GT; Indien Review & LT; / knop & GT; 

19. Nieuwe interface-elementen

Voeg bovenaan uw JavaScript de nieuwe variabelen toe om de verwijzingen naar de nieuwe interface-elementen die zojuist zijn toegevoegd vasthouden. Deze zullen u voorzien van een manier om de resultaten op het scherm in te dienen en weer te geven in het gedeelte 'Beoordelingen' van de pagina.

 Var subsion = document.getelementByID ('indienen');
Var Review = Document.GetelementByID ('beoordelingen'); 

20. Dien de invoer in

Nu gaat de code hierheen wanneer de gebruiker op de knop Verzenden klikt, plaats dit recht voor de knop 'Clear', die in de buurt van de regel 88 in uw code zou moeten zijn. Ten eerste wordt een alinea-tag gemaakt en wordt de spraakinvoer vervolgens toegevoegd. Dit wordt dan toegevoegd aan het gedeelte 'Beoordeling'.

 Submit.AddDeVENTListener ('klik', functie () {
laat p = document.createeLement ('P');
var textnode = document.createtExtnode
(transcriptie.value);
p.Antchild (tekstnode);
Review.Aptdchild (P);
Laat vandaag = nieuwe datum ();
laat s = document.creëlement ('klein'); 

21. Laatste inzending

De datum wordt toegevoegd, zodat de evaluatie tijdig is in het document. Ten slotte wordt een horizontale regel toegevoegd om te laten zien wanneer elke recensie eindigt, dan wordt de tekst klaargemaakt voor nieuwe invoer. Sla de pagina op en test dit. U zult zien dat u nu uw spraak in de pagina kunt indienen als beoordelingen. Voor persistentie zou u een database moeten gebruiken om deze resultaten op te slaan.

 Tekstnode = document.createtextnode (vandaag);
s.Antchild (tekstnode);
Review.AlldChild (s);
Laat HR = document.createeLement ('HR');
Review.Antchild (HR);
transcriptie.textcontent = '';
}); 

Dit artikel is oorspronkelijk gepubliceerd in kwestie 286 van Creative Web Design Magazine Webdesigner ​ Koop nummer 286 hier of Abonneer u hier op Web Designer ​

Gerelateerde artikelen:

• 14 van de beste JavaScript-API's
• Bouw een AI-aangedreven Chatbot
• 5 Emerging UX-trends in 2019