Izgradite sučelje upravljano glasom

Tijekom posljednjih nekoliko godina na webu smo vidjeli mnoge nove API-je koji su stvarno omogućili web sadržaju da ima istu vrstu funkcionalnosti kao i mnoge aplikacije već neko vrijeme. Relativno novi API je API za prepoznavanje govora, koji vam, kao što vjerojatno možete pretpostaviti, omogućuje upotrebu teksta kao ulaza na stranicu. Za pokretanje usluge potreban je klik i ponovno zaustavljanje.

Odličan slučaj za to može biti omogućavanje pristupa vašim korisnicima, davanje glasovnog unosa kao alternativa kliku. Ako vaša analitika pokaže da imate puno mobilnog pregledavanja, pomislite koliko bi bilo lakše razgovarati u telefon nego koristiti tipkovnicu.

Bilo je predviđanja da bi sučelja zaslona mogla početi nestajati u roku od deset godina. U početku bi ovo moglo zvučati kao znanstvena fantastika, no kako se korisnici sve više osjećaju ugodno s govorom kao unosom poput Alexa i Siri, razumljivo je da će ovo postati sveprisutnije kao metoda unosa. Vodič ovdje dovest će vas do brzine unosa govora, a zatim upotrijebite to da biste ostavili recenzije proizvoda na web mjesto za e-trgovinu .



Preuzmite datoteke za ovaj vodič.

  • 8 savjeta za dizajniranje glasovnih sučelja

01. Pokrenite projekt

Izgradite korisničko sučelje kojim se upravlja glasom: pokrenite projekt

Ne brinite zbog CSS-a jer je to već napisano [Slika: Web Designer]

Iz mape projektnih datoteka otvorite mapu 'start' u vašem IDE koda i otvorite datoteku 'speech.html' za uređivanje. Sav CSS za projekt napisan je jer to nije fokus govornog API-ja, pa dodajte ovdje prikazanu vezu da biste dobili slovo Noto Serif i povezali CSS datoteku.

02. Dodajte sadržaj

Prvi elementi ovoga bit će omot u koji će se smjestiti sav naš sadržaj na ekranu. Prvi element ovdje bit će skrivena poruka koja korisniku govori da li je Govorni API podržan u pregledniku. To će se vidjeti samo ako nije. Tada zaglavlje govori korisniku da će se elementi obrasca koji slijede koristiti za njihovu poruku.

Speech API Not Supported

Your Message:

03. Odaberite rezultate

Kada se koristi Govorni API, dva su načina prikaza sadržaja. U jednom se tekst prikazuje kada korisnik prestane govoriti i klikne gumb 'slušanje'. Drugi prikazuje riječi na ekranu kao izgovorene. Ovaj prvi radio gumb omogućuje prikaz konačnog rezultata govora.

Results: Final speech

04. Radio dva

Ovdje je dodan drugi radio gumb koji omogućuje korisniku odabir teksta koji će se prikazivati ​​dok govori. Te će radio gumbe JavaScript kasnije podići i koristiti za upravljanje govornim unosom, ali za sada to korisniku omogućuje sučelje za kontrolu.

As you speak

05. Prikažite tekst

Izgradite korisničko sučelje kojim se upravlja glasom: prikažite tekst

Govor korisnika završit će u tekstnom području 'transkripcija' [Slika: Web Designer]

Tekst koji korisnik izgovori na stranici trebat će prikazati na zaslonu. Ovdje se dodaje područje teksta koje ima id 'transkripcije' - to će biti ciljano tako da govor korisnika završi ovdje. Postoji i jasan gumb za uklanjanje teksta.


Clear Text

06. Posljednje sučelje

Izgradite korisničko sučelje kojim se upravlja glasom: posljednje sučelje

Klikom na gumb za govor započinje i zaustavlja otkrivanje govora [Slika: Web Designer]

Završni elementi sučelja dodaju se na zaslon. Gumb za govor omogućuje i onemogućava govor, pa ga morate kliknuti prije govora. Klik ponovno zaustavlja. Budući da je ovo relativno nova interakcija, zapisnik ispod će reći korisnicima što treba učiniti.

Click to start speaking

07. Dodajte Javascript

Sada dodajte oznake skripte prije završne oznake tijela. Ovdje će ići sav JavaScript. Prva dva retka hvataju elemente stranice s odgovarajućim ID-om i spremaju ih u varijablu. Transkripcija je tekstualni rezultat govora. Zapisnik će korisnika ažurirati kako ga koristiti.

var transcription = document.getElementById('transcription'); var log = document.getElementById('log');

08. Varijabilni rezultati

Koristeći sljedećih nekoliko varijabli, u njih se predmemorira više elemenata sučelja. Gumb za govor postat će prekidač, dopuštajući korisnicima da uključuju i isključuju govor, nadziran logičkom, istinitom / lažnom varijablom. Gumb za brisanje svih izbrisat će nezadovoljavajuće rezultate govora.

var start = document.getElementById('speechButton'); var clear = document.getElementById('clear-all'); var speaking = false;

09. Je li podržan?

Prvo što će učiniti naš kod je saznati podržava li korisnikov preglednik ovu značajku govora. Ako se ovaj rezultat vrati kao nula, tada naredba if odbacuje skrivenu poruku, istodobno uklanjajući gumb za pokretanje sa sučelja da zaustavi govorni unos.

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition || null; if (window.SpeechRecognition === null) { document.getElementById('unsupported').classList.remove('hidden'); start.classList.add('hidden'); } else {

10. Započnite prepoznavanje

Prepoznavanje govora započinje kao 'ostalo' za dostupno prepoznavanje govora. Kontinuirani unos se započinje jer je to zadana postavka na radio gumbima. Funkcija 'onresult' upravlja s rezultatima unosa govora. To će se dodati u tekstualno polje transkripcije.

var recognizer = new window. SpeechRecognition(); recognizer.continuous = true; recognizer.onresult = function(event) { transcription.textContent = ''; for (var i = event.resultIndex; i < event. results.length; i++) {

11. Konačni ili privremeni?

Izjava if sada provjerava želi li korisnik prikazati tekst dok razgovara (privremeno) ili tek nakon što završi s govorom (završno). Primijetit ćete da se, ako je privremena, svaka riječ dodaje u tekst znakom '+ =', dok završnica tamo samo izbacuje cijeli tekst.

if (event.results[i].isFinal) { transcription.textContent = event.results[i][0].transcript; } else { transcription.textContent += event.results[i][0].transcript; } } };

12. Rukovanje pogreškama

Kao i kod većine JavaScript API-ja, postoji rukovatelj pogreškama koji će vam omogućiti da odlučite što učiniti s bilo kojim problemima koji se mogu pojaviti. Oni se ubacuju u 'log' div kako bi korisniku dali povratne informacije, jer je neophodno da budu svjesni što se može događati sa sučeljem.

recognizer.onerror = function(event) { log.innerHTML = 'Recognition error: ' + event.message + '
' + log.innerHTML; };

13. Počnite govoriti!

Ovdje se pokreće slušatelj događaja kada korisnik klikne gumb za početak govora. Ako korisnik ne govori, tada gumb mijenja boju da bi pokazivanje govora počelo, varijabla za govor postavljena je na true i provjerava se 'privremeni' radio gumb da li je ovo izbor korisnika za unos.

start.addEventListener('click', function() { if (!speaking) { speaking = true; start.classList.toggle('stop'); recognizer.interimResults = document. querySelector('input[name='recogniti on-type'][value='interim']').checked;

14. Uzmi ulaz

Izjava 'try and catch' (Pokušaj i uhvati) sada započinje prepoznavanje govora i govori korisniku da bi trebao početi govoriti te da, kad završe, 'kliknite ponovo da zaustavite'. Ulov će pokupiti pogrešku i baciti je u div 'dnevnika' kako bi korisnik mogao razumjeti što bi moglo biti pogrešno.

try { recognizer.start(); log.innerHTML = 'Start speaking now
Click to stop'; } catch (ex) { log.innerHTML = 'Recognition error:
' + ex.message; }

15. Pritisnite za zaustavljanje

Kad korisnik klikne da zaustavi razgovor, zaustavlja se prepoznavanje govora. Gumb se tijekom razgovora vraća na zeleno iz crvene boje. Korisničko sučelje se ažurira tako da korisnik bude obaviješten da je usluga zaustavljena. Govorna varijabla postavljena je na false, spremna za ponovno puštanje korisnika da govori.

} else { recognizer.stop(); start.classList.toggle('stop'); log.innerHTML = 'Recognition stopped
Click to speak'; speaking = false; } });

16. Očistite tekst

Izgradite korisničko sučelje kojim se upravlja glasom: Obrišite tekst

Gumb za brisanje uklanja pogrešno protumačen govor [Slika: Web Designer]

Završni kôd ovog odjeljka samo je jasan gumb za uklanjanje teksta za unos govora u slučaju da je pogrešno protumačen. Spremite datoteku i testirajte je u svom pregledniku. Moći ćete kliknuti gumb za govor u računalo i vidjeti rezultate.

clear.addEventListener('click', function() {transcription.textContent = ''; }); }

17. Dodajte svrhu

Sad kad imate radni primjer, sučelju mora postojati neka svrha, pa napravimo to tako da korisnici mogu unositi recenzije. Spremite stranicu, a zatim odaberite Spremi kao, s novim nazivom 'reviews.html'. Sljedeće HTML elemente dodajte odmah nakon retka.

Product Reviews

18. Ukupna prijava

Izradite korisničko sučelje kojim se upravlja glasom: Ukupno slanje

Gumb za slanje predaje uneseni govor [Slika: Web Designer]

Recenzije će sadržavati prethodni kôd. Korisnik će trebati poslati svoj govorni unos, pa dodajte gumb za slanje odmah nakon gumba 'očisti tekst', koji će se nalaziti oko retka 28 u vašem kodu. Zatim se možete spustiti na JavaScript za sljedeći korak.

Submit Review

19. Novi elementi sučelja

Na vrh svog Javascripta dodajte nove varijable da sadrže reference na nove elemente sučelja koji su upravo dodani. Oni će vam pružiti način za slanje i prikaz rezultata na zaslonu unutar odjeljka 'recenzije' na stranici.



var submit = document.getElementById('submit'); var review = document.getElementById('reviews');

20. Pošaljite unos

Sada će se ovdje kôd nositi kad korisnik klikne gumb za slanje, stavite to točno ispred koda gumba 'očisti', koji bi trebao biti oko retka 88 u vašem kodu. Prvo se stvara oznaka odlomka i u nju se naknadno dodaje govorni unos. Zatim će se dodati u odjeljak 'pregled'.

submit.addEventListener('click', function() { let p = document.createElement('p'); var textnode = document.createTextNode (transcription.value); p.appendChild(textnode); review.appendChild(p); let today = new Date(); let s = document.createElement('small');

21. Konačni podnesak

Izradite korisničko sučelje kojim se upravlja glasom: Konačno slanje

Ako želite pohraniti poslani govor, morat ćete koristiti bazu podataka [Slika: Web Designer]

Datum se dodaje tako da je pregled vremenski označen u dokumentu. Na kraju se dodaje vodoravno pravilo da se pokaže gdje završava svaka recenzija, a zatim se tekst briše i sprema za novi unos. Spremite stranicu i testirajte ovo. Vidjet ćete da svoj govor sada možete poslati na stranicu kao recenziju. Za ustrajnost trebat ćete koristiti bazu podataka za pohranu ovih rezultata.

textnode = document.createTextNode(today); s.appendChild(textnode); review.appendChild(s); let hr = document.createElement('hr'); review.appendChild(hr); transcription.textContent = ''; });

Ovaj je članak izvorno objavljen u broju 286 časopisa creative web design Web dizajner . Kupite izdanje 286 ovdje ili ovdje se pretplatite na Web Designer .

Povezani članci: