Construiți un UI controlat de voce

Am văzut multe API-uri noi adăugate pe web în ultimii ani, care au permis cu adevărat conținut web pentru a avea același tip de funcționalitate, deoarece multe aplicații au avut de ceva timp. Un API relativ nou este API-ul de recunoaștere a vorbirii, pe care probabil îl puteți ghici, vă permite să utilizați textul ca intrare pe pagină. Este nevoie de un clic pentru a porni serviciul și pentru a opri din nou.

Un caz deosebit pentru acest lucru ar putea fi să permită accesibilitatea între utilizatorii dvs., oferind o tehnică de intrare ca o alternativă la clic. Dacă analiticii dvs. arată că aveți o mulțime de navigare mobilă, atunci gândiți-vă cât mai ușor ar fi să vorbiți în telefonul dvs. decât să utilizați tastatura.

Au existat previziuni că interfețele bazate pe ecran ar putea începe să dispară în decurs de zece ani. La început, acest lucru ar putea suna ca o ficțiune științifică, dar utilizatorii devin din ce în ce mai confortabili cu vorbire ca fiind contribuția lui Alexa și Siri, atunci este un motiv că acest lucru va deveni omniprezent ca metodă de introducere. Tutorialul aici vă va primi până la viteza de intrare a vorbirii și apoi utilizați acest lucru pentru a lăsa recenziile de produs pe un Site-ul de comerț electronic .

Descărcați fișierele pentru acest tutorial.

• 8 sfaturi pentru proiectarea interfețelor vocale

01. Porniți proiectul

Din dosarul Fișiere Project, deschideți folderul "Start" din codul dvs. IDE și deschideți fișierul "Discurs.html" pentru a edita. Toată CSS pentru proiect este scrisă deoarece nu este centrul API-ului de vorbire, deci adăugați linkul afișat aici pentru a obține Tipul Noto Serif și conectați fișierul CSS.

 & Link Href = "https://fonts.googleapis.com/css?family=oto+SERIF" Rel = "Stylesheet" & GT;
& Link Rel = "Stylesheet" Href = "CSS / STYLE.CSS" & GT; 

02. Adăugați conținutul

Primele elemente ale acestui lucru vor fi să aibă un înveliș în care să păstreze toate conținutul nostru pe ecran. Primul element din aici va fi un mesaj ascuns care spune utilizatorului dacă API-ul de vorbire este acceptat în browser. Acest lucru va fi văzut numai dacă nu este. Apoi, o rubrică îi spune utilizatorului că elementele de formă care urmează vor fi utilizate pentru mesajul lor.

 & lt; div id = "wrapper" & gt;
& Lt; Span id = "Clasa" neacceptată "Clasa =" Suport ascuns "& GT; Discursul API nu este acceptat și lt; / span & gt;
& lt; h2 & gt; mesajul dvs .: 

03. Alegeți rezultatele

Când utilizați API-ul de vorbire, există două modalități de afișare a conținutului. Într-unul, textul afișează atunci când utilizatorul a încetat să vorbească și butonul "Ascultare" este dat clic. Celălalt prezintă cuvinte pe ecran ca vorbită. Acest prim buton radio permite ca rezultatul final de discurs să fie afișat.

 & lt; div id = "tipofinput" & gt;
"Rezultate: Rezultate: și lt; / span & gt;
& lt; etichete & gt;
& lt; tip de intrare = numele radio = valoarea de recunoaștere = finală & GT; Final Drept & Lt; / etichetă & gt; 

04. Radio două

A doua buton radio este adăugată aici și acest lucru permite utilizatorului să selecteze textul care urmează să fie afișat pe măsură ce vorbesc. Aceste butoane radio vor fi preluate de JavaScript mai târziu și se vor folosi pentru a controla intrarea de vorbire, dar pentru moment acest lucru permite utilizatorului să aibă o interfață pentru a controla acest lucru.

 și lt; etichete & gt;
& lt; introduceți tipul = numele radio = valoarea de recunoaștere a valorii = interimare checked & GT; Așa cum vorbești 

05. Afișați textul

Textul pe care utilizatorul îl vorbește în pagină va trebui afișat pe ecran. Aici se adaugă zona de text care are codul de "transcriere" - acest lucru va fi vizat astfel încât discursul utilizatorului să se încheie aici. Există, de asemenea, un buton clar pentru a elimina textul.

 & lt; textarea id = "transcripție" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& buton id = "clar-toate butonul" clasa = "" & gt; limpede text & lt; / buton & gt; 

06. Ultima interfață

Elementele finale de interfață sunt adăugate acum pe ecran. Butonul de vorbire permite și dezactivează discursul, așa că trebuie să fie făcut clic înainte de a vorbi. Clicul din nou oprește-l. Deoarece aceasta este o interacțiune relativ nouă, jurnalul de dedesubt va spune utilizatorilor ce să facă.

& Lt; Div clasa = "ambalaj de buton" & gt;
    & lt; div id = "Speechbutton" Clasa = "Start" & GT; / Div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; faceți clic pentru a începe să vorbiți "/ div & gt;
& lt; / div & gt; 

07. Adăugați JavaScript

Acum adăugați etichetele scriptului înainte de eticheta de închidere a corpului. Aici va merge tot JavaScript. Primele două linii atrag elementele paginii cu ID-ul de potrivire și le stochează într-o variabilă. Transcrierea este rezultatul textului discursului. Jurnalul va actualiza utilizatorul cu modul de utilizare.

 și lt; script & gt;
VAR TRANSPRICTIGE = document.getelementbyid ("transcriere");
var log = document.getelementbyid ("jurnal");
& lt; / script & gt; 

08. Rezultatele variabile

Folosind următoarele variabile, mai multe elemente de interfață sunt stocate în memoria lor. Butonul de vorbire va deveni un comutator, permițând utilizatorilor să comute discursul și oprit., Monitorizat de o variabilă booleană, adevărată / falsă. Butonul clar va șterge rezultatele discursului nesatisfăcător.

 VAR START = DOCUMENT.GETELEMENTBYID ('DONGEBUTTON');
var clar = document.getelementbyid ("clare-all ');
Var vorbește = FALSE; 

09. Este acceptat?

Primul lucru pe care îl va face codul nostru este să afle dacă această caracteristică de vorbire este acceptată de browserul utilizatorului. Dacă acest rezultat se întoarce la fel de NULL, atunci instrucțiunea IF aruncă mesajul ascuns, luând în același timp butonul de pornire departe de interfață pentru a opri intrarea de vorbire.

 fereastră.Speechrecunoașteți = fereastră.Speechcogniția ||
fereastră.Webkitspeechcognition ||.
nul;
dacă (fereastră.speechrecungition === null) {
document.getelementbyid ("nesuport"). Classlist.remove ("ascunse");
start.classlist.add ("ascuns");
} altceva {

10. Începeți recunoașterea

Recunoașterea discursului este pornită ca fiind "altceva" pentru recunoașterea discursului disponibilă. Intrarea continuă este pornită ca cea implicită pe butoanele radio. Funcția "Onresult" se va ocupa de rezultatele intrării de vorbire. Aceasta va fi adăugată în câmpul de text al transcrierii.

 VAR Recunoaștere = fereastră nouă.
Recunoaștere a vorbirii();
Recunoaștere.continuu = adevărat;
recunoaștere.onresult = funcția (eveniment) {
transcription.textcontent = '';
pentru (var i = eveniment.resultindex; I & lt; eveniment.
rezultate. i ++) {

11. Final sau interimar?

Declarația IF verifică acum pentru a vedea dacă utilizatorul dorește să afișeze textul în timp ce vorbesc (intermediar) sau numai după terminarea vorbelor (finală). Veți observa că, dacă este intermediar, fiecare cuvânt este adăugat la text cu "+ =", în timp ce finala dăunează doar întregul text acolo.

 Dacă (Eveniment.RESULTS [I] .Final) {
transcription.textContent = eveniment.results [i] 
 .Transcript;
} altfel {
transcription.textContent + = eveniment.results [i] 
 .Transcript;
}
}
}; 

12. Manipularea erorilor

Ca și în cazul majorității API-uri JavaScript, există un handler de eroare care vă va permite să decideți ce să faceți cu orice problemă care ar putea apărea. Acestea sunt aruncate în DIV "log" pentru a oferi feedback utilizatorului, deoarece este esențial ca ei să fie conștienți de ceea ce se întâmplă cu interfața.

 Recunoaștere.onerror = Funcție (eveniment) {
log.innerhtml = "Eroare de recunoaștere:" +
Event.Message + '& Br / & Gt; + log.innerhtml;
}; 

13. Începeți să vorbiți!

Ascultătorul de evenimente aici este pornit când utilizatorul face clic pe butonul pentru a începe să vorbească. Dacă utilizatorul nu vorbește, atunci butonul modifică culoarea pentru a afișa vorbirea a început, variabila pentru vorbire este setată la adevărat și butonul radio "Interim" este verificat pentru a vedea dacă acesta este alegerea utilizatorului pentru intrare.

 Start.AdDeventlistener ("clic", funcția () {
Dacă (! vorbind) {
vorbind = adevărat;
start.classlist.toggle ('opri');
Recunoaștere.Interimresults = Document.
QuerySelector ("Intrare [Name =" Recunoașteți
on-tip "] [valoare =" interimare "]"). Verificat; 

14. Luați intrarea

Declarația "încercare și captură" începe acum recunoașterea discursului și spune utilizatorului că ar trebui să înceapă să vorbească și că atunci când sunt terminate, "faceți clic din nou pentru a opri". Prinde va ridica eroarea și aruncați-o în "log", astfel încât utilizatorul să poată înțelege ce ar putea fi greșit.

 Încercați {
Recunoaștere.start ();
log.innerhtml = 'Începeți să vorbiți acum
& lt; br / & gt; faceți clic pentru a opri ";
} captura (ex) {
log.Innerhtml = "Eroare de recunoaștere:
& lt; br / & gt; + ex.message;
} 

15. Faceți clic pentru a opri

Acum, când utilizatorul face clic pentru a opri vorbirea, recunoașterea discursului este oprită. Butonul este schimbat înapoi la verde de la roșu în timp ce vorbește. Interfața cu utilizatorul este actualizată astfel încât utilizatorul să fie informat că serviciul sa oprit. Variabila de vorbire este setată la FALSE, gata să lase utilizatorul să vorbească din nou.

 {altceva
Recunoaștere.Stop ();
start.classlist.toggle ('opri');
log.innerhtml = "Recunoașterea oprită
& lt; br / & gt; faceți clic pentru a vorbi ";
vorbind = fals;
}
}); 

16. Ștergeți textul

Codul final pentru această secțiune este doar un buton clar pentru a elimina textul de introducere a vorbirii în cazul în care este interpretat greșit. Salvați fișierul și testați acest lucru în browserul dvs. Veți putea face clic pe buton pentru a vorbi în computer și pentru a vedea rezultatele.

 Clear.AdDeventlistener ("clic", funcția () {transcription.textccccctent = '';
});
} 

17. Adăugați scopul

Acum, deoarece aveți un exemplu de lucru, trebuie să existe un scop pentru interfață, astfel încât să facem acest lucru astfel încât utilizatorii să poată introduce recenzii. Salvați pagina și apoi alegeți Salvare ca, cu noul nume de "Reviews.html". Adăugați următoarele elemente HTML imediat după LT; div id = "wrapper" & gt; linia.

 & lt; h1 & gt; recenzii de produs & lt; / h1 & gt;
& lt; div id = "comentarii" & gt; / div & gt; 

18. Prezentarea totală

Codul anterior va organiza recenziile. Utilizatorul va trebui să-și prezinte introducerea de vorbire, deci adăugați butonul Trimitere imediat după butonul "Clear Text", care va fi în jurul liniei 28 în codul dvs. Apoi vă puteți deplasa la JavaScript pentru următorul pas.

 buton id = "Trimiteți butonul" CLASS = "" & GT; trimiteți recenzii & lt; / buton & gt; 

19. Noi elemente de interfață

În partea de sus a dvs. JavaScript adăugați noile variabile pentru a ține referințele la noile elemente de interfață care tocmai au fost adăugate. Acestea vă vor oferi o modalitate de a trimite și de a afișa rezultatele pe ecran în secțiunea "Review-uri" din pagină.

 VAR Trimiteți = document.getelementbyid ("Trimiteți");
Var Review = Document.getelementByid ("Recenzii"); 

20. Trimiteți intrarea

Acum, codul de aici se va gestiona atunci când utilizatorul face clic pe butonul Trimiteți, plasați acest drept înainte de codul butonului "Clear", care ar trebui să fie în jurul liniei 88 în codul dvs. În primul rând, se creează o etichetă de paragraf și introducerea ulterioară a cererii de vorbire. Aceasta va fi apoi adăugată în secțiunea "Revizuire".

 Trimiteți.AdDeventlistener ("clic", funcția () {
lăsați p = document.creelemente ("p");
var textnode = document.createtextnode
(transcriere.value);
p.appendandild (textnode);
Review.appendandild (P);
Lăsați astăzi = noua dată ();
Fie S = document.Creeelement ("mic"); 

21. Depunerea finală

Data este adăugată astfel încât revizuirea să fie marcată în funcție de document. În cele din urmă, se adaugă o regulă orizontală pentru a arăta unde fiecare revizuire se încheie, atunci textul este eliberat pentru o nouă intrare. Salvați pagina și testați acest lucru. Veți vedea că acum puteți trimite discursul dvs. în pagină ca recenzii. Pentru persistență, ar trebui să utilizați o bază de date pentru a stoca aceste rezultate.

 textnode = document.createtextnode (astăzi);
s.appendandild (textnode);
Review.appendandild (e);
Hr = document.Creeelement ("HR");
Review.appendandild (HR);
transcription.textcontent = '';
}); 

Acest articol a fost publicat inițial în numărul 286 din revista Creative Web Design Web designer . Cumpăra problema 286 aici sau Aboneaza-te la designerul web aici .

Articole similare:

• 14 dintre cele mai bune api JavaScript
• Construiți un chat-bot AI-Powered
• 5 tendințe UX emergente în 2019