Bygg en röststyrd UI

Vi har sett många nya API som läggs till på webben under de senaste åren som har verkligen aktiverat webbinnehåll för att ha samma typ av funktionalitet, eftersom många appar har haft någon tid. En relativt ny API är taligenkänningen API, som du förmodligen kan gissa, låter dig använda din text som en ingång på sidan. Det kräver ett klick för att starta tjänsten och igen för att stoppa.

Ett bra fall för detta kan vara att möjliggöra tillgänglighet bland dina användare, vilket ger röstinmatning som ett alternativ till att klicka. Om din Analytics visar att du har mycket mobil surfning, tänk så mycket lättare det är att tala i din telefon än att använda tangentbordet.

Det har förutsägats att skärmbaserade gränssnitt kan börja försvinna inom tio år. Först kan det låta som science fiction, men som användare blir mer och mer bekväma med tal som ingång genom Like Of Alexa och Siri, står det till att detta kommer att bli genomgripande som en inmatningsmetod. Tutorialet här får dig att fart på talingången och sedan använda det för att lämna produktrecensioner på en e-handel .

Ladda ner filerna för denna handledning.

• 8 tips för att designa röstgränssnitt

01. Starta projektet

På mappen Projektfiler öppnar du "Start" -mappen i din kod IDE och öppna filen "Speech.html" för att redigera. Alla CSS för projektet är skrivet som det är inte fokus för Tal API, så lägg till länken som visas här för att få Noto-serien Typeface och länka upp CSS-filen.

 & lt; länka href = "https://fonts.googleapis.com/css?family=noto+serif" rel = "stylesheet" & gt;
& lt; länk rel = "stylesheet" href = "css / style.css" & gt; 

02. Lägg till innehållet

De första delarna av detta är att ha en omslag för att hålla allt vårt skärminnehåll. Det första elementet här kommer att vara ett dolt meddelande som berättar användaren om talet API stöds i webbläsaren. Detta kommer bara att ses om det inte är det. Då berättar en rubrik som användaren att de formelement som följer kommer att användas för deras meddelande.

 & lt; div id = "wrapper" & gt;
& LT; Span ID = "Unsupported" Class = "Support Hidden" & GT; Tal API stöds inte & LT; / Span & GT;
& lt; H2 & GT; Ditt meddelande: & LT; / H2 & GT; 

03. Välj resultaten

När du använder talet API finns det två sätt att visa innehållet. I en, skriver text när användaren har slutat att tala och "Listening" -knappen klickas av. Den andra visar ord på skärmen som talat. Den här första radioknappen tillåter att det slutliga talresultatet visas.

 & lt; div ID = "TypeOfinput" & GT;
& lt; span & gt; resultat: & lt; / span & gt;
& LT; Etikett & GT;
& LT; Input Type = Radio Name = Recognition-Type Value = Final & GT; Final Tal & LT; / Etikett & GT; 

04. Radio två

Den andra radioknappen läggs till här och den här gör att användaren kan välja den text som ska visas som de talar. Dessa radioknappar kommer att hämtas av JavaScript senare och används för att styra talingången, men för tillfället tillåter användaren att ha ett gränssnitt för att styra det.

 & LT; Etikett & GT;
& LT; Input Type = Radio Namn = Recognition-Type Value = Interim Kontrollerad & GT; Som du talar och lt; / etikett och gt;
& lt; / div & gt; 

05. Visa texten

Den text som användaren talar till sidan måste visas på skärmen. Här läggs textområdet som har id av "transkription" - det kommer att riktas så att användarens tal hamnar här. Det finns också en klar knapp för att ta bort texten.

 & lt; TextArea ID = "Transkription" Readonly & GT;
& LT; / TextArea & GT;
& lt; BR / & GT;
& lt; knapp ID = "CLEAR-ALL" CLASS = "Knapp" & GT; CLEAR TEXT & LT; / knapp & GT; 

06. Det sista gränssnittet

De slutliga gränssnittselementen läggs till på skärmen nu. Talknappen aktiverar och inaktiverar talet, så det måste klickas innan du talar. Klicka igen stoppar det. Eftersom det här är en relativt ny interaktion, kommer loggen nedan att berätta för användarna vad de ska göra.

& lt; div class = "button-wrapper" & gt;
    & lt; div id = "speechbutton" class = "Start" & GT; & LT; / Div & GT;
  & lt; / div & gt;
  & lt; div id = "log" & gt; klicka för att börja Teating & LT; / Div & GT;
& lt; / div & gt; 

07. Lägg till JavaScript

Lägg nu till skriptetiketterna före den stängande kroppsmärket. Det är här hela JavaScript kommer att gå. De första två linjerna fånga sidelementen med matchande ID och lagra dem i en variabel. Transkriptionen är textresultatet av talet. Loggen uppdaterar användaren med hur man använder den.

 & lt; script & gt;
Var transkription = dokument.getelementby ('Transcription');
Var Log = Document.getElementByD ('Log');
& lt; / script & gt; 

08. Variabla resultat

Med hjälp av de närmaste variablerna cachas fler gränssnittselement i dem. Talsknappen blir en växel, vilket gör att användarna byter tal på och av., Övervakad av en booleskt, sann / falsk variabel. Den tydliga knappen kommer att radera otillfredsställande talresultat.

 var start = document.getelementbyid ('speechbutton');
Var Clear = Document.getElementByD ('Clear-ALL');
vartalande = falskt; 

09. Stöds den?

Det första som vår kod kommer att göra är att ta reda på om den här talfunktionen stöds av användarens webbläsare. Om det här resultatet kommer tillbaka som null, kastar det om uttalandet av det dolda meddelandet, samtidigt som du tar startknappen bort från gränssnittet för att stoppa talinmatningen.

 Window.SpeechRecognition = Window.SpeechRecognition ||
Fönster.WebkitsPeechRecognition ||
null;
IF (Window.SpeechRecognition === null) {
document.getelementby ('ostödd'). Classlist.Remove ('dold');
start.classlist.add ('dold');
} annars {

10. Starta erkännandet

Taligenkänningen startas som "annars" för att taligenkänningen är tillgänglig. Den kontinuerliga ingången startas som det är standard på radioknapparna. Funktionen "Onresult" kommer att hantera resultaten av talingången. Detta kommer att läggas till i transkriptionens textfält.

 Var Recognizer = Nytt fönster.
Taligenkänning();
igenkännare.Kontinuous = sant;
igenkännare.onresult = funktion (händelse) {
transkription.textcontent = '';
för (var i = evenemang.resultindex; i & lt; händelse.
resultat.length; I ++) {

11. Slutlig eller delår?

Om uttalandet nu kontrollerar för att se om användaren vill visa texten när de pratar (interim) eller först efter att de slutat tala (slutgiltigt). Du kommer att märka att om det är mellan, läggs varje ord till texten med "+ =", medan den sista bara dumpar hela texten där.

 Om (Event.Results [I] .Ifinal) {
Transcription.TextContent = Event.Results [i] 
 .Transcript;
} annars {
transkription.TextContent + = evenemang.Results [i] 
 .Transcript;
}
}
}; 

12. Hanteringsfel

Som med de flesta JavaScript API: er finns det en felhanterare som gör att du kan bestämma vad du ska göra med några problem som kan uppstå. Dessa kastas i "Log" Div för att ge feedback till användaren, eftersom det är viktigt att de är medvetna om vad som kan komma på med gränssnittet.

 igenkännare.onError = funktion (händelse) {
log.innerhtml = 'Erkännandefel:' +
evenemang.message + '& lt; br / & gt;' ' + log.innerhtml;
}; 

13. Börja med att tala!

Händelseläraren här startas när användaren klickar på knappen för att börja tala. Om användaren inte talar, ändras knappen färg för att visa att tala har startat, variabeln för att tala är inställd på TRUE och "Interim" -knappen är markerad för att se om det här är användarens val för inmatning.

 start.addeventlistener ("klicka på", funktion () {
Om (! talar) {
talar = sant;
start.classlist.toggle ('STOPP');
igenkännare.interimresults = dokument.
Queryselector ('Input [Name = "Recogseiti
on-type "] [värde =" interim "] '). kontrolleras; 

14. Ta in ingången

Uttalandet "försök och fånga" startar nu taligenkänningen och berättar användaren att de ska börja prata och att när de är klara, "klicka igen för att stoppa". Fångsten kommer att hämta felet och kasta det i "log" div så att användaren kan förstå vad som kan vara fel.

 Prova {
igenkännare.start ();
log.innerhtml = 'Börja med att prata nu
& lt; br / & gt; klicka för att stoppa ';
} fånga (ex) {
log.innerhtml = 'Erkännandefel:
& lt; br / & gt; ' + ex.message;
} 

15. Klicka för att stoppa

Nu när användaren klickar för att sluta prata, stoppas taligenkänningen. Knappen ändras tillbaka till grönt från rött medan du pratar. Användargränssnittet är uppdaterat så att användaren är informerad om att tjänsten har slutat. Den talande variabeln är inställd på FALSE, redo att låta användaren prata igen.

} annars {
igenkännare.stop ();
start.classlist.toggle ('STOPP');
log.innerhtml = 'Erkännande slutade
& lt; BR / & GT; Klicka för att prata ";
Talar = FALSE;
}
}); 

16. Rensa texten

Slutkoden för det här avsnittet är bara en klar knapp för att ta bort talinmatningstexten om den felaktigt tolkas. Spara filen och testa det här i din webbläsare. Du kommer att kunna klicka på knappen för att tala in i datorn och se resultaten.

 Clear.Addeventlistener ('Click', Function () {Transcription.TextContent = '';
});
} 

17. Lägg till syfte

Nu som du har ett arbetsexempel måste det finnas något syfte med gränssnittet, så låt oss göra det så att användarna kan skriva in recensioner. Spara sidan och välj sedan Spara som, med det nya namnet "recensioner.html". Lägg till följande html-element strax efter & lt; div id = "wrapper" & gt; linje.

 & lt; H1 & GT; Produktrecensioner och LT; / H1 & GT;
& lt; div id = "recensioner" & gt; & lt; / div & gt; 

18. Total inlämning

Den föregående koden kommer att hålla recensionerna. Användaren måste skicka in sin talingång, så lägg till Skicka-knappen direkt efter knappen "Clear Text", som kommer att vara runt linjen 28 i din kod. Då kan du flytta ner till JavaScript för nästa steg.

 & lt; knapp ID = "Skicka" klass = "-knapp" & GT; Skicka in Review & LT; / Button & GT; 

19. Nya gränssnittselement

Överst på din Javascript Lägg till de nya variablerna för att hålla referenserna till de nya gränssnittselement som just har lagts till. Dessa kommer att ge dig ett sätt att skicka in och visa resultaten på skärmen i avsnittet "recensioner" på sidan.

 Var Skicka = document.getelementby ('Submit');
Var Recension = document.getElementByD ("recensioner"); 

20. Skicka in posten

Nu kommer koden här att hantera när användaren klickar på Skicka-knappen, placera den här strax före "Clear" -koden, som ska vara runt linjen 88 i din kod. För det första skapas en stycke tagg och talingången läggs därefter till i detta. Detta kommer då att läggas till i avsnittet "Review".

 Skicka.Addeventlistener ("Klicka", funktion () {
Låt p = document.createelement ('p');
var textnode = document.createTextnode
(Transkription.Value);
P.AppendChild (TextNode);
review.appendchild (p);
Låt idag = nytt datum ();
Låt s = document.createelement ("liten"); 

21. Slutlig inlämning

Datumet läggs till så att granskningen är tidsstämpad i dokumentet. Slutligen läggs en horisontell regel att visa var varje granskning slutar, då rensas texten redo för ny ingång. Spara sidan och testa det här. Du kommer att se att du nu kan skicka in ditt tal på sidan som recensioner. För uthållighet skulle du behöva använda en databas för att lagra dessa resultat.

 Textnode = document.createtextnode (idag);
S.AppendChild (TextNode);
review.appendchild (s);
Låt hr = document.createelement ('hr');
Recension.AppendChild (HR);
transkription.textcontent = '';
}); 

Denna artikel publicerades ursprungligen i utgåva 286 av kreativ webbdesignmagasin Webbdesigner . Köp utgåva 286 här eller Prenumerera på webbdesigner här .

Relaterade artiklar:

• 14 av de bästa Javascript API
• Bygg en AI-driven chatbot
• 5 Emerging UX-trender år 2019