Δημιουργήστε μια φωνητική ελεγχόμενη UI

Έχουμε δει πολλά νέα API που προστέθηκαν στο διαδίκτυο τα τελευταία χρόνια τα τελευταία χρόνια που έχουν ενεργοποιήσει πραγματικά το περιεχόμενο στο Web να έχει το ίδιο είδος λειτουργικότητας, καθώς πολλές εφαρμογές είχαν για κάποιο χρονικό διάστημα. Ένα σχετικά νέο API είναι το API αναγνώρισης ομιλίας, το οποίο όπως πιθανόν να μαντέψει, σας επιτρέπει να χρησιμοποιήσετε το κείμενό σας ως είσοδο στη σελίδα. Απαιτεί ένα κλικ για να ξεκινήσει η υπηρεσία και ξανά για να σταματήσει.

Μια μεγάλη περίπτωση για αυτό μπορεί να επιτρέπει την προσβασιμότητα μεταξύ των χρηστών σας, δίνοντας φωνητική είσοδο ως εναλλακτική λύση για το κλικ. Εάν τα αναλύσεις σας δείχνουν ότι έχετε πολλές κινητές περιηγήσεις, τότε σκεφτείτε πόσο πιο εύκολο θα ήταν να μιλήσετε στο τηλέφωνό σας παρά να χρησιμοποιήσετε το πληκτρολόγιο.

Έχουν υπάρξει προβλέψεις ότι οι διασυνδέσεις που βασίζονται στην οθόνη θα μπορούσαν να αρχίσουν να εξαφανίζονται εντός δέκα ετών. Στην αρχή αυτό μπορεί να ακούγεται σαν επιστημονική φαντασία, αλλά καθώς οι χρήστες παίρνουν όλο και πιο άνετα με την ομιλία ως εισροές μέσα από τους συμπαθείς του Alexa και του Siri, στη συνέχεια, θεωρεί ότι αυτό θα γίνει διάχυτο ως μέθοδο εισόδου. Το σεμινάριο εδώ θα σας φτάσει για να επιταχύνει την είσοδο ομιλίας και στη συνέχεια να χρησιμοποιήσετε ότι για να αφήσετε κριτικές προϊόντων σε ένα Ιστοσελίδα ηλεκτρονικού εμπορίου .

Κατεβάστε τα αρχεία για αυτό το σεμινάριο.

• 8 συμβουλές για το σχεδιασμό των φωνητικών διεπαφών

01. Ξεκινήστε το έργο

Από το φάκελο του έργου, ανοίξτε το φάκελο "Έναρξη" στον κωδικό σας IDE και ανοίξτε το αρχείο 'Speech.html' για επεξεργασία. Όλα τα CSS για το έργο γράφονται ως αυτό δεν είναι το επίκεντρο του API ομιλίας, οπότε προσθέστε το σύνδεσμο που εμφανίζεται εδώ για να πάρετε το The Noto Serif TypeFace και να συνδέσετε το αρχείο 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. Προσθέστε το περιεχόμενο

Τα πρώτα στοιχεία αυτού θα είναι να έχουμε ένα περιτύλιγμα για να κρατήσει όλο το περιεχόμενο της οθόνης μας. Το πρώτο στοιχείο εδώ θα είναι ένα κρυφό μήνυμα που λέει στον χρήστη εάν το API ομιλίας υποστηρίζεται στο πρόγραμμα περιήγησης. Αυτό θα φανεί μόνο αν δεν είναι. Στη συνέχεια, μια επικεφαλίδα λέει στον χρήστη ότι τα στοιχεία της φόρμας που ακολουθούν θα χρησιμοποιηθούν για το μήνυμά τους.

 & lt; div id = "wrapper" & gt;
& lt; span id = "Unsupported" Class = "Υποστήριξη κρυφών" & GT; api ομιλίας δεν υποστηρίζεται & lt; / span & gt;
& lt; h2 & gt; το μήνυμά σας: & lt; / h2 & gt; 

03. Επιλέξτε τα αποτελέσματα

Όταν χρησιμοποιείτε το API ομιλίας υπάρχουν δύο τρόποι για να εμφανίσετε το περιεχόμενο. Σε ένα, το κείμενο εμφανίζεται όταν ο χρήστης έχει σταματήσει να μιλάει και το κουμπί "Ακρόαση" κλείνει. Το άλλο δείχνει λέξεις στην οθόνη όπως ομιλείται. Αυτό το πρώτο κουμπί επιλογής επιτρέπει την εμφάνιση του τελικού οφειλόμενου λόγου.

 & lt; div id = "typeofinput" & gt;
& lt; span & gt; αποτελέσματα: & lt; / span & gt;
& lt; label & gt;
& lt; τύπος εισόδου = όνομα ραδιοφώνου = τιμή τύπου αναγνώρισης = τελική & gt; Τελική ομιλία & LT; / Label & GT; 

04. Ραδιόφωνο δύο

Το δεύτερο κουμπί επιλογής προστίθεται εδώ και αυτό επιτρέπει στο χρήστη να επιλέξει το κείμενο που θα εμφανίζεται καθώς μιλούν. Αυτά τα κουμπιά ραδιοφώνου θα παραληφθούν από το JavaScript αργότερα και θα χρησιμοποιηθούν για τον έλεγχο της εισόδου ομιλίας, αλλά για τώρα αυτό επιτρέπει στον χρήστη να έχει μια διεπαφή για να τον ελέγξει.

 Label & GT;
& lt; τύπος εισόδου = όνομα ραδιοφώνου = τιμή τύπου αναγνώρισης = ενδιάμεση ελέγχεται & gt; Όπως μιλάτε & lt; / label & gt;
& lt; / div & gt; 

05. Εμφανίστε το κείμενο

Το κείμενο που ο χρήστης μιλάει στη σελίδα θα πρέπει να εμφανίζεται στην οθόνη. Εδώ προστίθεται η περιοχή κειμένου που έχει το αναγνωριστικό της «μεταγραφής» - αυτό θα στοχεύει έτσι ώστε η ομιλία του χρήστη να καταλήξει εδώ. Υπάρχει επίσης ένα σαφές κουμπί για να αφαιρέσετε το κείμενο.

 & lt; textarea id = "μεταγραφή" readonly & gt;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; button id = "clear-all" class = "button" & gt, / button & gt; 

06. Η τελευταία διεπαφή

Τα τελικά στοιχεία διεπαφής προστίθενται τώρα στην οθόνη. Το κουμπί ομιλίας επιτρέπει και απενεργοποιεί την ομιλία, οπότε πρέπει να γίνει κλικ πριν από την ομιλία. Κάνοντας κλικ και πάλι το σταματά. Καθώς αυτή είναι μια σχετικά νέα αλληλεπίδραση, το ημερολόγιο κάτω θα πει στους χρήστες τι πρέπει να κάνουν.

& lt; div class = "wrapper-wrapper" & gt;
    & lt; div id = "class smotionbutton" = "start" & gt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; κάντε κλικ για να αρχίσετε να μιλάτε & lt; / div & gt;
& lt; / div & gt; 

07. Προσθήκη JavaScript

Προσθέστε τώρα τις ετικέτες δέσμης ενεργειών πριν από την ετικέτα κλεισίματος. Αυτό είναι όπου θα πάνε όλη η JavaScript. Οι δύο πρώτες γραμμές αρπάξτε τα στοιχεία της σελίδας με το αναγνωριστικό αντιστοίχισης και τα αποθηκεύουν σε μια μεταβλητή. Η μεταγραφή είναι το αποτέλεσμα του κειμένου της ομιλίας. Το αρχείο καταγραφής θα ενημερώσει τον χρήστη με τον τρόπο χρήσης του.

 & lt; script & gt;
var transcription = document.getelementidiid ('μεταγραφή');
var log = document.getelementidbyid ('log');
& lt; / script & gt; 

08. Μεταβλητά αποτελέσματα

Χρησιμοποιώντας τις επόμενες μεταβλητές, τα περισσότερα στοιχεία διασύνδεσης αποθηκεύονται σε αυτά. Το κουμπί ομιλίας θα γίνει εναλλαγή, αφήνοντας τις χρήστες να αλλάξουν και να απενεργοποιηθούν., Παρακολουθούνται από μια Boolean, True / False μεταβλητή. Το κουμπί Clear-All θα διαγράψει τα μη ικανοποιητικά αποτελέσματα ομιλίας.

 var start = document.getelementid ('speeplubutton');
var clear = document.geteLemementid ('clear-all');
var μιλώντας = false; 

09. Υποστηρίζεται;

Το πρώτο πράγμα που θα κάνει ο κώδικας μας είναι να μάθετε αν αυτή η λειτουργία ομιλίας υποστηρίζεται από το πρόγραμμα περιήγησης του χρήστη. Εάν αυτό το αποτέλεσμα επανέλθει ως NULL τότε η δήλωση αν η δήλωση ρίχνει το κρυφό μήνυμα, ενώ ταυτόχρονα λαμβάνοντας το κουμπί έναρξης μακριά από τη διασύνδεση για να σταματήσει η είσοδος ομιλίας.

 Window.SepeechRecognition = window.Epeechrecognition ||
window.webkitspeechrecognition ||
μηδενικό;
Εάν (παράθυρο.EpeechreCognition === null) {
document.getelementidbyid («μη υποστηριζόμενη»). ClassList.Remove ('κρυμμένο');
start.ClassList.Add ('κρυμμένο');
} αλλιώς {

10. Ξεκινήστε την αναγνώριση

Η αναγνώριση ομιλίας ξεκινά ως «αλλιώς» για την αναγνώριση ομιλίας που είναι διαθέσιμη. Η συνεχής είσοδος ξεκινάει η προεπιλογή στα κουμπιά ραδιοφώνου. Η λειτουργία "ONRESULT" θα χειριστεί τα αποτελέσματα της εισόδου ομιλίας. Αυτό θα προστεθεί στο πεδίο κειμένου της μεταγραφής.

 VAR αναγνώρισης = νέο παράθυρο.
Αναγνώρισης ομιλίας();
αναγνωρίζοντας.connusive = TRUE;
Αναγνώριση.Onresult = λειτουργία (συμβάν) {
transcription.TextContent = '';
για (var i = event.resultindex, i & lt; γεγονός.
Αποτελέσματα. I ++) {

11. τελικό ή ενδιάμεσο;

Η δήλωση αν ελέγχει τώρα για να δει αν ο χρήστης θέλει να εμφανίσει το κείμενο καθώς μιλάνε (ενδιάμεσες) ή μόνο αφού τελειώσουν να μιλούν (τελικά). Θα παρατηρήσετε ότι αν είναι ενδιάμεσο, κάθε λέξη προστίθεται στο κείμενο με το '+ =', ενώ ο τελικός απλώς απορρίπτει ολόκληρο το κείμενο εκεί.

 εάν (συμβάντα. Διεξάγει [i] .isfinal) {
transcriptration.TextContent = event.results [i] 
 .Transcript;
} αλλιώς {
transcriptration.TextContent + = event.results [i] 
 .Transcript;
}
}
} · 

12. Σφάλματα χειρισμού

Όπως και με το μεγαλύτερο μέρος JavaScript API υπάρχει ένας χειριστής σφαλμάτων που θα σας επιτρέψει να αποφασίσετε τι να κάνετε με τυχόν ζητήματα που μπορεί να προκύψουν. Αυτά ρίχνονται στο 'log' div για να δώσουν ανατροφοδότηση στον χρήστη, καθώς είναι απαραίτητο να γνωρίζουν τι θα μπορούσε να συμβαδίσει με τη διεπαφή.

 Αναγνώριση.OnError = λειτουργία (συμβάν) {
log.innerhtml = 'Σφάλμα αναγνώρισης:' +
event.message + '& lt; br / & gt;' + log.innerhtml;
} · 

13. Αρχίστε να μιλάτε!

Ο ακροατής εκδήλωσης εδώ ξεκινά όταν ο χρήστης κάνει κλικ στο κουμπί για να ξεκινήσει η ομιλία. Εάν ο χρήστης δεν μιλήσει, τότε το κουμπί αλλάζει χρώμα για να εμφανιστεί η ομιλία έχει ξεκινήσει, η μεταβλητή για την ομιλία έχει οριστεί σε TRUE και το κουμπί "Interim" Radio "ελέγχεται για να δείτε αν αυτή είναι η επιλογή του χρήστη για είσοδο.

 Έναρξη.AddeventListener ('κλικ', λειτουργία () {
Αν (! Μιλώντας) {
Μιλώντας = TRUE;
start.ClassList.Toggle ('STOP');
Αναγνώριση.Interimresults = έγγραφο.
Queryselector ('Εισαγωγή [Όνομα = "adioriti
on-type "] [τιμή =" interim "] '). Ελέγξτε; 

14. Πάρτε την είσοδο

Η δήλωση «δοκιμής και αλιευμάτων» ξεκινά τώρα την αναγνώριση ομιλίας και λέει στον χρήστη ότι πρέπει να αρχίσουν να μιλάνε και ότι όταν τελειώσουν », κάντε ξανά κλικ για να σταματήσετε». Το πιάτο θα πάρει το σφάλμα και θα ρίξει αυτό στο Div 'Log' έτσι ώστε ο χρήστης να μπορεί να καταλάβει τι μπορεί να είναι λάθος.

 Δοκιμάστε {
αναγνωρίζοντας.start ();
log.innerhtml = 'αρχίστε να μιλάτε τώρα
& lt; br / & gt; κάντε κλικ για να σταματήσετε;
} αλιεύματα (ex) {
log.innerhtml = 'Σφάλμα αναγνώρισης:
& lt; br / & gt; ' + ex.message;
} 

15. Κάντε κλικ για να σταματήσετε

Τώρα όταν ο χρήστης κάνει κλικ για να σταματήσει να μιλάει, η αναγνώριση ομιλίας σταματάει. Το κουμπί αλλάζει πίσω στο πράσινο από το κόκκινο, ενώ μιλάει. Η διεπαφή χρήστη ενημερώνεται έτσι ώστε ο χρήστης να ενημερώνεται ότι η υπηρεσία έχει σταματήσει. Η μεταβλητή ομιλίας έχει οριστεί σε FALSE, έτοιμο να αφήσει τον χρήστη να μιλήσει ξανά.

} αλλιώς {
αναγνωρίζοντας.Stop ();
start.ClassList.Toggle ('STOP');
log.innerhtml = 'Η αναγνώριση σταμάτησε
& lt; br / & gt; κάντε κλικ για να μιλήσετε;
Μιλώντας = FALSE;
}
}) · 

16. Καθαρίστε το κείμενο

Ο τελικός κωδικός για αυτή την ενότητα είναι απλά ένα σαφές κουμπί για να καταργήσετε το κείμενο εισόδου ομιλίας σε περίπτωση που ερμηνεύεται λανθασμένα. Αποθηκεύστε το αρχείο και δοκιμάστε αυτό στο πρόγραμμα περιήγησης. Θα μπορείτε να κάνετε κλικ στο κουμπί για να μιλήσετε στον υπολογιστή και να δείτε τα αποτελέσματα.

 Clear.addeventListener ('κλικ', λειτουργία () {transcription.textcontent = '';
});
} 

17. Προσθέστε το σκοπό

Τώρα, όπως έχετε ένα παράδειγμα εργασίας, πρέπει να υπάρχει κάποιος σκοπός στη διασύνδεση, οπότε ας το κάνουμε αυτό, ώστε οι χρήστες να μπορούν να εισαγάγουν σχόλια. Αποθηκεύστε τη σελίδα και, στη συνέχεια, επιλέξτε Αποθήκευση ως, με το νέο όνομα του 'Reviews.html'. Προσθέστε τα ακόλουθα στοιχεία HTML λίγο μετά το "Div ID =" Wrapper "& GT; γραμμή.

 & LT; H1 & GT; Κριτικές Προϊόντων & LT; / H1 & GT;
& lt; div id = "σχόλια" & gt; / div & gt; 

18. Συνολική υποβολή

Ο προηγούμενος κώδικας θα κρατήσει τις αναθεωρήσεις. Ο χρήστης θα χρειαστεί να υποβάλει την είσοδο ομιλίας τους, οπότε προσθέστε το κουμπί υποβολής αμέσως μετά το κουμπί "Clear text", το οποίο θα είναι γύρω από τη γραμμή 28 στον κώδικα σας. Στη συνέχεια, μπορείτε να μετακινηθείτε προς τα κάτω στο javascript για το επόμενο βήμα.

 & LT; Button ID = "Υποβολή" Class = "Κουμπί" & GT; Υποβολή κριτικής & LT; / button & gt; 

19. Νέα στοιχεία διασύνδεσης

Στην κορυφή της JavaScript προσθέστε τις νέες μεταβλητές για να κρατήσετε τις αναφορές στα νέα στοιχεία διασύνδεσης που μόλις προστέθηκαν. Αυτά θα σας παρέχουν έναν τρόπο υποβολής και εμφάνιση των αποτελεσμάτων στην οθόνη μέσα στην ενότητα "Κριτικές" της σελίδας.

 var submit = document.geteLementidbyid ('υποβολή');
VAR Review = Document.getelementbyid ('κριτικές'). 

20. Υποβάλετε την είσοδο

Τώρα ο κώδικας εδώ θα χειριστεί όταν ο χρήστης κάνει κλικ στο κουμπί Υποβολή, τοποθετήστε το παρακάτω πριν από τον κωδικό κουμπιού "Clear", η οποία θα πρέπει να βρίσκεται γύρω από τη γραμμή 88 στον κώδικα σας. Πρώτον, δημιουργείται μια ετικέτα παραγράφου και στη συνέχεια προστίθεται η είσοδος ομιλίας σε αυτό. Αυτό θα προστεθεί στη συνέχεια στην ενότητα "Ανασκόπηση".

 Υποβολή.AddeventListener ('κλικ', λειτουργία () {
Αφήστε το P = Document.createelement ('P');
var textNode = Document.CreateTextNode
(μεταγραφή.Value);
P.AppendChild (κείμενο);
Review.AppendChild (P);
Αφήστε σήμερα = νέα ημερομηνία ();
Αφήστε το S = Document.Createelement ('Μικρό'); 

21. Τελική υποβολή

Η ημερομηνία προστίθεται έτσι ώστε η αναθεώρηση να είναι χρονομετρημένη στο έγγραφο. Τέλος, ένας οριζόντιος κανόνας προστίθεται για να δείξει πού τελειώνει κάθε αναθεώρηση, τότε το κείμενο καθαρίζεται έτοιμο για νέα είσοδο. Αποθηκεύστε τη σελίδα και δοκιμάστε αυτό. Θα δείτε ότι μπορείτε τώρα να υποβάλετε την ομιλία σας στη σελίδα ως κριτικές. Για επιμονή θα πρέπει να χρησιμοποιήσετε μια βάση δεδομένων για να αποθηκεύσετε αυτά τα αποτελέσματα.

 TextNode = Document.CreateTextNode (σήμερα);
S.AppendChild (κείμενο);
Review.AppendChild (s);
Αφήστε το HR = έγγραφο.
Ανασκόπηση.AppendChild (HR);
transcription.TextContent = '';
}) · 

Αυτό το άρθρο δημοσιεύθηκε αρχικά σε εξέταση 286 δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράστε τεύχος 286 εδώ ή Εγγραφείτε στο Web Designer εδώ .

Σχετικά Άρθρα:

• 14 από τα καλύτερα apis javascript
• Κατασκευάστε ένα ai-powered chatbot
• 5 Αναδυόμενες τάσεις UX το 2019