Costruisci un UI controllato dalla voce

Abbiamo visto molte nuove API aggiunte al Web negli ultimi anni che hanno realmente abilitato il contenuto Web di avere lo stesso tipo di funzionalità che molte app hanno avuto per qualche tempo. Un API relativamente nuova è l'API del riconoscimento vocale, che come puoi probabilmente indovinare, ti consente di utilizzare il testo come input sulla pagina. Richiede un clic per avviare il servizio e di nuovo per fermarsi.

Un grande caso per questo potrebbe essere nel consentire l'accessibilità tra i tuoi utenti, dando input vocale come alternativa al clic. Se la tua analisi mostra che hai un sacco di navigazione mobile, allora pensa quanto sarebbe più facile parlare nel telefono che usare la tastiera.

Ci sono state previsioni che le interfacce basate su schermo potrebbero iniziare a scomparire entro dieci anni. All'inizio questo potrebbe sembrare una fantascienza, ma mentre gli utenti diventano sempre più comodi con il discorso come input attraverso i simpatini di Alexa e Siri, allora è in attesa di ragione che ciò diventerà pervasivo come metodo di input. Il tutorial qui ti porterà per accelerare l'input vocale e quindi usarlo per lasciare le recensioni dei prodotti su un Sito di e-commerce. .

Scarica i file. per questo tutorial.

• 8 Suggerimenti per la progettazione di interfacce vocali

01. Avvia il progetto

Dalla cartella dei file di progetto, aprire la cartella 'Start' nel codice IDE e aprire il file 'sparge.html' da modificare. Tutto il CSS per il progetto è scritto come quello non è il focus dell'API del discorso, quindi aggiungi il collegamento mostrato qui per ottenere il carattere TOTO SERIF e collegare il file CSS.

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

02. Aggiungi il contenuto

I primi elementi di ciò saranno per avere un wrapper in cui tenere tutti i nostri contenuti sullo schermo. Il primo elemento qui sarà un messaggio nascosto che dice all'utente se l'API vocale è supportato nel browser. Questo sarà visto solo se non lo è. Quindi una rubrica indica all'utente che gli elementi del modulo che seguono saranno utilizzati per il loro messaggio.

 & lt; div id = "wrapper" e gt;
& lt; span id = "non supportato" class = "support nascosto" & gt; parlato API non supportato & lt; / span & gt;
& lt; h2 & gt; il tuo messaggio: & lt; / h2 & gt; 

03. Scegli i risultati

Quando si utilizza l'API vocale ci sono due modi per visualizzare il contenuto. In uno, il testo viene visualizzato quando l'utente ha smesso di parlare e il pulsante "Ascolto" è stato cliccato. L'altro mostra le parole sullo schermo come parlato. Questo primo pulsante di opzione consente di mostrare il risultato del discorso finale.

 & lt; div id = "typeofinput" & gt;
& lt; span & gt; risultati: & lt; / span & gt;
& lt; Etichetta e GT;
& lt; Tipo di ingresso = Nome radio = Valore del tipo di riconoscimento = Final & GT; Final Speech & Lt; / Etichetta e GT; 

04. Radio due.

Qui viene aggiunto il secondo pulsante di opzione e questo consente all'utente di selezionare il testo da visualizzare mentre parlano. Questi pulsanti radio verranno prelevati dal JavaScript in seguito e utilizzato per controllare l'ingresso vocale, ma per ora ciò consente all'utente di disporre di un'interfaccia per controllarlo.

 & lt; Etichetta e GT;
& lt; Tipo di ingresso = Nome radio = Valore del tipo di riconoscimento = Interim Controllo e GT; Mentre parli & lt; / etichetta e GT;
& lt; / div & gt; 

05. Visualizza il testo

Il testo che l'utente parla nella pagina dovrà essere visualizzato sullo schermo. Qui viene aggiunta l'area di testo che ha l'ID della "trascrizione" - questo sarà mirato in modo che il discorso dell'utente finisca qui. C'è anche un pulsante chiaro per rimuovere il testo.

 & lt; textarea id = "trascrizione" Readonly & GT;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; tasto ID = "Cancella-all" Class = "Button" & GT; Cancella testo & lt; / Button & GT; 

06. L'ultima interfaccia

Gli elementi di interfaccia finale vengono aggiunti allo schermo ora. Il pulsante del discorso abilita e disabilita il discorso, quindi deve essere cliccato prima di parlare. Cliccando di nuovo fermalo. Poiché questa è un'interazione relativamente nuova, il registro sotto dirà gli utenti cosa fare.

 & lt; div class = "button-wrapper" e gt;
    & lt; div id = "SpeechButton" Class = "Start" & GT; & Lt; / Div & GT;
  & lt; / div & gt;
  & lt; div id = "log" & gt; clicca per iniziare a parlare e lt; / div & gt;
& lt; / div & gt; 

07. Aggiungi JavaScript.

Ora aggiungi i tag dello script prima del tag del corpo di chiusura. Questo è dove tutto il JavaScript andrà. Le prime due linee afferrano gli elementi della pagina con l'ID corrispondente e memorizzali in una variabile. La trascrizione è il risultato del testo del discorso. Il registro aggiornerà l'utente con come usarlo.

 & lt; script & gt;
var trascrizione = document.getelementbyID ('trascrizione');
VAR LOG = Document.getElementbyID ('log');
& lt; / script & gt; 

08. Risultati variabili.

Usando le prossime variabili, più elementi di interfaccia vengono memorizzati nella cache. Il pulsante del discorso diventerà un interruttore, lasciando che gli utenti cambiano e spegnere., Monitorati da una variabile booleana, true / false. Il pulsante CLEAR-ALL eliminerà i risultati del linguaggio insoddisfacenti.

 Var Start = Document.getElementbyID ('SpeechButton');
VAR CLEAR = Document.getElementByID ('Clear-all');
Var che parla = falso; 

09. È supportato?

La prima cosa che il nostro codice farà è scoprire se questa funzione vocale è supportata dal browser dell'utente. Se questo risultato ritorna come NULL, quindi l'istruzione IF lancia il messaggio nascosto, mentre contemporaneamente si prende il pulsante Start dall'interfaccia per interrompere l'ingresso vocale.

 Finestra.SpeechinoRecognition = window.speechrecognition ||
finestra.Webkitspeechrecognition ||.
nullo;
se (window.speechrecognition === null) {
document.getelementbyID ('non supportato'). classlist.remove ('nascosto');
start.classlist.add ('nascosto');
} else {

10. Avvia il riconoscimento

Il riconoscimento vocale è iniziato come "altro" per il riconoscimento vocale disponibile. L'input continuo viene avviato in quanto è il valore predefinito sui pulsanti radio. La funzione 'onResult' gestirà i risultati dell'input vocale. Questo sarà aggiunto nel campo di testo della trascrizione.

 Riconoscitore VAR = nuova finestra.
SpeechRecognition ();
riconosciuto.continuore = true;
riconoscimento.onresult = funzione (evento) {
transcription.textcontent = '';
per (VAR I = Event.Resultindex; I & Lt; event.
risultati.length; I ++) {

11. Final o Interim?

L'istruzione IF ora controlla se l'utente desidera visualizzare il testo in quanto parla (intermedia) o solo dopo aver finito di parlare (finale). Noterai che se è intermedia, ogni parola viene aggiunta al testo con '+ =', mentre il finale scarica semplicemente il testo intero.

 IF (evento.results [i] .isfinal) {
Transcription.TextContent = Event.results [i] 
 .trascript;
} altro {
Transcription.TextContent + = Event.results [i] 
 .trascript;
}
}
}; 

12. Gestione degli errori

Come con la maggior parte delle API JavaScript c'è un gestore di errori che ti permetterà di decidere cosa fare con qualsiasi problema che potrebbe sorgere. Questi vengono gettati nel div "log" per dare un feedback all'utente, in quanto è essenziale che siano consapevoli di ciò che potrebbe andare avanti con l'interfaccia.

 riconoscimento.onerror = funzione (evento) {
log.innerhtml = 'Errore di riconoscimento:' +
event.Message + '& Lt; BR / & GT;' + log.innerhtml;
}; 

13. Inizia a parlare!

L'ascoltatore dell'evento qui viene avviato quando l'utente fa clic sul pulsante per iniziare a parlare. Se l'utente non sta parlando, il pulsante cambia colore per mostrare che è stato avviato il linguaggio, la variabile per parlare è impostata su true e il pulsante di opzione 'intermedio' viene controllato per vedere se questa è la scelta dell'utente per l'input.

 Start.addeventListener ('Click', Function () {
se (! parlando) {
parlando = vero;
start.classlist.toggle ('stop');
riconoscimento.interimresulsults = documento.
QuerySelector ('Input [Nome = "riconosci
On-Type "] [Value =" Interim "] '). Controllato; 

14. Prendi l'input

L'affermazione "Prova e cattura" ora avvia il riconoscimento vocale e dice all'utente che dovrebbero iniziare a parlare e che quando vengono fatti, 'Clicca di nuovo per fermare'. La cattura raccoglierà l'errore e lancerà questo nel "log" in modo che l'utente possa capire cosa potrebbe essere sbagliato.

 Prova {
riconoscimento.start ();
log.innerhtml = 'Inizia a parlare ora
& lt; br / & gt; clicca per fermare ';
} catch (ex) {
log.innerhtml = 'Errore di riconoscimento:
& lt; br / & gt; ' + ex.Message;
} 

15. Clicca per fermarsi

Ora quando l'utente fa clic per interrompere il parlare, il riconoscimento vocale viene fermato. Il pulsante è cambiato su verde dal rosso mentre si parla. L'interfaccia utente viene aggiornata in modo che l'utente sia informato sul fatto che il servizio si è fermato. La variabile di lingua è impostata su false, pronta per consentire all'utente di parlare di nuovo.

} else {
riconoscimento.stop ();
start.classlist.toggle ('stop');
log.innerhtml = 'riconoscimento fermato
& lt; br / & gt; clicca per parlare ';
parlando = falso;
}
}); 

16. Cancella il testo

Il codice finale per questa sezione è solo un pulsante chiaro per rimuovere il testo di input vocale nel caso in cui sia interpretato erroneamente. Salva il file e prova questo nel tuo browser. Sarai in grado di fare clic sul pulsante per parlare nel computer e vedere i risultati.

 Cancella.addeventListener ('click', funzione () {Transcription.textContent = '';
}););
} 

17. Aggiungi scopo

Ora, come hai un esempio di funzionamento, è necessario essere uno scopo all'interfaccia, quindi facciamolo in modo che gli utenti possano inserire recensioni. Salva la pagina e quindi scegli Salva come, con il nuovo nome di 'recensioni.html'. Aggiungere i seguenti elementi HTML subito dopo il & lt; div id = "wrapper" e gt; linea.

 & lt; H1 & GT; Recensioni del prodotto & LT; / H1 & GT;
& lt; div id = "recensioni" & gt; & lt; / div & gt; 

18. Invio totale

Il codice precedente terrà le recensioni. L'utente dovrà inviare il proprio ingresso vocale, quindi aggiungi il pulsante di invio subito dopo il pulsante "Cancella testo", che sarà attorno alla linea 28 del tuo codice. Quindi puoi spostarti fino al JavaScript per il prossimo passo.

 & lt; pulsante ID = "Invia" Class = "Button" & GT; Invia recensione & lt; / Button & GT; 

19. Nuovi elementi di interfaccia

Nella parte superiore del tuo JavaScript aggiungi le nuove variabili per tenere i riferimenti ai nuovi elementi di interfaccia che sono stati appena aggiunti. Questi ti forniranno un modo per inviare e visualizzare i risultati sullo schermo all'interno della sezione 'Valutazioni' della pagina.

 Var Invia = Document.getElementbyID ('Invia');
Var Review = Document.getElementbyID ('Recensioni'); 

20. Invia la voce

Ora il codice qui gestirà quando l'utente fa clic sul pulsante di invio, posizionalo a destra prima del codice del pulsante "Cancella", che dovrebbe essere attorno alla linea 88 nel tuo codice. Innanzitutto, viene creato un tag di paragrafo e l'ingresso vocale viene successivamente aggiunto in questo. Questo verrà quindi aggiunto nella sezione "Revisione".

 Invia.AdDeventenerListener ('click', funzione () {
Sia P = Document.CreateSelement ('P');
Var TextNode = Document.CreateTextNode
(trascrizione.Value);
p.appendchild (Textnode);
review.appendchild (P);
Lascia oggi = nuova data ();
Sia S = Document.CreateSelement ('Small'); 

21. presentazione finale

La data viene aggiunta in modo che la revisione sia timestamptata nel documento. Infine, viene aggiunta una regola orizzontale per mostrare dove finisce ogni recensione, il testo viene cancellato pronto per il nuovo ingresso. Salva la pagina e prova questo. Vedrai che ora puoi inviare il tuo discorso nella pagina come recensioni. Per perseverare è necessario utilizzare un database per memorizzare questi risultati.

 Textnode = document.createTextnode (oggi);
s.appendchild (Textnode);
review.appendchild (s);
Lascia che hr = document.createelement ('hr');
review.appendchild (hr);
transcription.textcontent = '';
}); 

Questo articolo è stato originariamente pubblicato in emissione 286 di creative Web Design Magazine Web designer . Comprare il problema 286 qui o Iscriviti al web designer qui .

Articoli Correlati:

• 14 delle migliori API JavaScript
• Costruisci un chatbot AI-Powered
• 5 Tendenze UX emergenti nel 2019