Erstellen Sie eine sprachgesteuerte Benutzeroberfläche

Wir haben gesehen, dass viele neue APIs in den letzten Jahren in das Web hinzugefügt wurden, die den Webinhalt wirklich aktiviert haben, um dieselbe Art von Funktionalität zu haben, da viele Apps seit einiger Zeit hatten. Eine relativ neue API ist die Spracherkennungs-API, die, wie Sie wahrscheinlich erraten können, Sie Ihren Text als Eingabe auf der Seite verwenden können. Es erfordert einen Klick, um den Dienst zu starten, und wieder aufhören.

Ein großer Fall ist möglicherweise darin, den Zugang zu Ihren Benutzern zu ermöglichen, wodurch die Spracheingabe als Alternative zum Anklicken ergibt. Wenn Ihre Analytik zeigt, dass Sie viel mobiler Browsing haben, denken Sie darüber nach, wie viel einfacher es ist, in Ihrem Telefon zu sprechen, als die Tastatur zu verwenden.

Es wurden Vorhersagen gegeben, auf denen screenbasierte Schnittstellen innerhalb von zehn Jahren verschwinden könnten. Zunächst könnte dies wie Science-Fiction klingen, aber da die Benutzer mit Rede mehr mit einer Rede, wenn sie durch die Likes von Alexa und SIRI komfortabler werden, behauptet es jedoch, dass dies als Eingabemethode durchdringen wird. Das Tutorial hier bringt Sie auf der Speech-Input auf dem neuesten Stand und verwenden Sie dann das, um Produktbewertungen auf einem zu hinterlassen ECommerce-Site. .

Laden Sie die Dateien herunter für dieses Tutorial.

• 8 Tipps zum Entwerfen von Sprachschnittstellen

01. Starten Sie das Projekt

Öffnen Sie im Ordner Projektdateien den Ordner "Start" in Ihrem Code IDE und öffnen Sie die Datei 'Speech.html', um zu bearbeiten. Alle CSS für das Projekt werden so geschrieben, da dies nicht der Fokus der Sprach-API ist, also fügen Sie den hier angezeigten Link hinzu, um die Noto-Serif-Schrift zu erhalten und die CSS-Datei zu verknüpfen.

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

02. Fügen Sie den Inhalt hinzu

Die ersten Elemente davon werden einen Wrapper haben, in dem Sie alle unseren Bildschirminhalten halten können. Das erste Element hier ist eine versteckte Nachricht, die dem Benutzer anwendet, wenn die Sprach-API im Browser unterstützt wird. Dies wird nur gesehen, wenn es nicht ist. Dann teilt eine Überschrift dem Benutzer an, dass die folgenden Formularelemente für ihre Nachricht verwendet werden.

 & lt; div id = "wrapper" & gt;
& lt; span id = "nicht unterstützt" Klasse = "Unterstützung versteckt" & gt; Sprach-API nicht unterstützt & lt; / span & gt;
& lt; H2 & GT; Ihre Nachricht: & lt; / h2 & gt; 

03. Wählen Sie die Ergebnisse aus

Bei Verwendung der Sprach-API gibt es zwei Möglichkeiten, den Inhalt anzuzeigen. In einem, der Textanzeige, wenn der Benutzer nicht mehr gesprochen hat, und die Schaltfläche "Hören" wird angeklickt. Der andere zeigt Wörter auf dem Bildschirm, wie gesprochen. Dieser erste Funkknopf ermöglicht, dass das abschließende Sprachergebnis angezeigt wird.

 & lt; div id = "typefinput" & gt;
& lt; span & gt; Ergebnisse: & lt; / span & gt;
& lt; label & gt;
& lt; Eingangstyp = Funkname = Erkennungsart Wert = Final & GT; Endrede & lt; / label & gt; 

04. Radio zwei.

Das zweite Optionsfeld wird hier hinzugefügt und der Benutzer ermöglicht dem Benutzer, den zuzeigenden Text auszuwählen, der beim Sprechen angezeigt werden soll. Diese Optionsschaltflächen werden vom JavaScript später vom JavaScript abgeholt und zur Steuerung des Spracheintrags verwendet, dadurch kann jedoch der Benutzer über eine Schnittstelle zur Steuerung verfügen.

 & lt; label & gt;
& lt; Eingabetyp = Funkname = Erkennungs-Typ-Wert = Interim geprüft & gt; Wie Sie sprechen & lt; / label & gt;
& lt; / div & gt; 

05. Zeigt den Text an

Der Text, den der Benutzer in der Seite spricht, muss auf dem Bildschirm angezeigt werden. Hier wird der Textbereich hinzugefügt, der die ID von 'Transkription' hat - dies wird angerufen, so dass die Sprache des Benutzers hier endet. Es gibt auch eine klare Taste, um den Text zu entfernen.

 & lt; TextArea ID = "Transkription" ReadOnly & GT;
& lt; / textarea & gt;
& lt; br / & gt;
& lt; Button-ID = "Clear-All" class = "Button" & GT; Clear Text & LT; / Button & GT; 

06. Die letzte Schnittstelle

Die endgültigen Schnittstellenelemente werden jetzt dem Bildschirm hinzugefügt. Die Sprechknopf aktiviert und deaktiviert die Sprache, sodass er angeklickt werden muss, bevor er spricht. Wenn Sie auf Wieder klicken, stoppt es erneut. Da dies eine relativ neue Interaktion ist, informiert das Protokoll darunter den Benutzern, was zu tun ist.

 & lt; div class = "button-wrapper" & gt;
    & lt; div id = "SpeechButton" Klasse = "Start" & GT; & lt; / div & gt;
  & lt; / div & gt;
  & lt; div id = "log" & gt; Klicken Sie hier, um mit dem Sprechen zu beginnen, und lt; / div & gt;
& lt; / div & gt; 

07. Javascript hinzufügen.

Fügen Sie nun die Skript-Tags vor dem Schließkörper-Tag hinzu. Hier geht das gesamte JavaScript. Die ersten beiden Zeilen ergreifen die Seitenelemente mit der passenden ID und speichern sie in einer Variablen. Die Transkription ist das Textergebnis der Rede. Das Protokoll aktualisiert den Benutzer mit der Verwendung.

 & lt; script & gt;
VAR-Transkription = document.getelementByID ('Transkription');
var log = document.getelementById ('log');
& lt; / script & gt; 

08. Variable Ergebnisse.

Mit den nächsten Variablen werden mehr Schnittstellenelemente in sie zwischengespeichert. Die Sprechknopf wird zu einem Toggle, sodass Benutzer die Sprache ein- und ausschalten lassen., Überwachung von einer booleschen, true / false-Variablen. Die CLEAR-All-Taste löscht unbefriedigende Sprachergebnisse.

 var start = document.getelementbyId ('SpeechButton');
var klar = dokument.getelementbyId ('clear-all');
var sprechend = falsch; 

09. Ist es unterstützt?

Das erste, was unser Code ausführt, ist herauszufinden, ob diese Sprachfunktion vom Browser des Benutzers unterstützt wird. Wenn dieses Ergebnis als NULL zurückkommt, wird die IF-Anweisung die ausgeblendete Nachricht aufgeweitet, während gleichzeitig die Starttaste von der Schnittstelle wegnimmt, um den Spracheingang zu stoppen.

 fenster.speechRecognition = fenster.speechRecognition ||
fenster.webkitsspeechrecognition ||
Null;
if (window.speechrecognition === null) {
document.getElementById ('nicht unterstützt'). Klassenliste.Remove ('versteckt');
Start.CLASSLIST.ADD ('Hidden');
} else {

10. Beginnen Sie die Anerkennung

Die Spracherkennung wird als 'else' für die Spracherkennung gestartet. Der kontinuierliche Eingang wird so gestartet, dass der Standardeinstellung auf den Optionsfeldern ist. Die Funktion 'OnResult' behandelt die Ergebnisse der Spracheingabe. Dies wird in das Textfeld der Transkription hinzugefügt.

 VAR-Erkenner = neues Fenster.
Spracherkennung();
Erkenner.Kontinuierlich = wahr;
Erkenner.onresult = Funktion (Ereignis) {
transkription.textcontent = '';
für (var i = Event.ResultIndex; I & lt; Ereignis.
Ergebnisse.Länge; i ++) {

11. Final oder Interim?

Die IF-Anweisung prüft jetzt, ob der Benutzer den Text anzeigen möchte, da sie (Zwischenzeit) oder erst nach dem Ende des Sprechens (Final) sprechen möchten. Sie werden feststellen, dass, wenn es Interim ist, jedes Wort mit dem Text mit der '+ =' zum Text hinzugefügt wird, während das Finale den gesamten Text nur darin legt.

 if (Event.Results [i] .isfinal) {
transkription.textcontent = Event.Results [I] 
 .Transcript;
} else {
transkription.textcontent + = Event.Results [I] 
 .Tragskript;
}
}
}; 

12. Handhabungsfehler

Wie bei den meisten JavaScript-APIs gibt es einen Fehlerbehandler, mit dem Sie entscheiden können, was mit allen möglichen Problemen zu tun ist. Diese werden in das 'Protokoll' div geworfen, um dem Benutzer Feedback zu geben, da es wichtig ist, dass sie sich dessen bewusst sind, was mit der Benutzeroberfläche los ist.

 erkizierer.onError = Funktion (Ereignis) {
log.innerhtml = 'Erkennungsfehler:' +
Event.Message + '& lt; br / & gt;' + log.innerhtml;
}; 

13. Beginnen Sie mit dem Sprechen!

Der Ereignislistener hier wird gestartet, wenn der Benutzer auf die Schaltfläche klickt, um zu sprechen. Wenn der Benutzer nicht spricht, ändert sich die Schaltfläche Farbe, um das Sprechen zu zeigen

 Start.AdDeventListener ('Klicken Sie auf', Funktion () {
wenn (! spricht) {
sprechen = wahr;
Start.CLASSLIST.Toggle ('STOP' ');
Erkenner.Interimresults = Dokument.
QuerySelector ('Input [Name = "Erkenntnis
On-Typ "] [Value =" Interim "] '). Überprüft; 

14. Nehmen Sie den Eingang

Die Anweisung "TRYING und Catch" beginnt jetzt mit der Spracherkennung und übermittelt dem Benutzer, dass sie mit dem Sprechen beginnen sollen, und das, wenn sie fertig sind, klicken Sie erneut, um zu stoppen ". Der Fang holt den Fehler auf und werfen Sie das in das "Protokoll" -DIV, damit der Benutzer verstehen kann, was falsch sein könnte.

 Versuchen Sie {
anerkennung.start ();
log.innerHtml = 'Jetzt sprechen
& lt; BR / & GT; Klicken Sie hier, um zu stoppen ";
} fang (ex) {
log.innerhtml = 'Erkennungsfehler:
& lt; br / & gt; ' + ex.message;
} 

15. Klicken Sie, um zu stoppen

Wenn der Benutzer nun klickt, um das Gespräch aufzuhören, wird die Spracherkennung angehalten. Der Knopf wird während des Gesprächs von rot auf grün geändert. Die Benutzeroberfläche wird aktualisiert, sodass der Benutzer informiert ist, dass der Dienst angehalten ist. Die Sprechvariable ist auf FALSE gesetzt, um den Benutzer erneut zu sprechen.

} else {
anerkennung.stop ();
Start.CLASSLIST.Toggle ('STOP' ');
log.innerhtml = 'Anerkennung angehalten
& lt; br / & gt; Klicken Sie hier, um zu sprechen ";
sprechen = falsch;
}
}); 

16. Löschen Sie den Text

Der endgültige Code für diesen Abschnitt ist nur eine klare Taste, um den Spracheingabetext zu entfernen, falls es falsch interpretiert wird. Speichern Sie die Datei und testen Sie dies in Ihrem Browser. Sie können auf die Schaltfläche klicken, um in den Computer zu sprechen und die Ergebnisse zu sehen.

 CLEAR.ADDEVENTLISTENER ('Klicken Sie auf, Funktion () {transkription.textcontent =' ';
});
} 

17. Absicht hinzufügen.

Nun, wenn Sie ein Arbeitsbeispiel haben, muss es für die Benutzeroberfläche gewünscht werden, also machen wir das so, dass Benutzer Bewertungen eingeben können. Speichern Sie die Seite und wählen Sie dann Speichern unter, mit dem neuen Namen "Reviews.html". Fügen Sie die folgenden HTML-Elemente kurz nach dem & lt; div id = "wrapper" & gt; Linie.

 & lt; H1 & GT; Produktbewertungen & LT; / h1 & gt;
& lt; div id = "Bewertungen" & gt; & lt; / div & gt; 

18. Gesamteinsendung.

Der vorherige Code wird die Bewertungen abgehalten. Der Benutzer muss ihren Spracheingang einreichen, also fügen Sie die Schaltfläche "Submit" nach der Schaltfläche "Clear Text" direkt hinzu, die in Ihrem Code in der Linie 28 liegt. Dann können Sie zum nächsten Schritt zum JavaScript zurückkehren.

 & lt; Button ID = "Senden" class = "Button" & GT; Übermitteln Sie den Überprüfen und lt; / button & gt; 

19. Neue Schnittstellenelemente

Fügen Sie oben in Ihrem JavaScript die neuen Variablen hinzu, um die Verweise auf die neuen Schnittstellenelemente zu halten, die gerade hinzugefügt wurden. Diese stellen Ihnen eine Möglichkeit zur Verfügung, die Ergebnisse auf dem Bildschirm innerhalb des Abschnitts "Bewertungen" der Seite einzureichen und anzuzeigen.

 var Senden = document.getElementbyId ('Senden');
VAR Review = document.getElementbyid ("Bewertungen"); 

20. Senden Sie den Eintrag

Jetzt wird der Code hierher damit umgehen, wenn der Benutzer auf die Schaltfläche Senden klickt, diese rechts vor dem Knopfcode "klaren" aufgeben, der in Ihrem Code um die Linie 88 liegen sollte. Zunächst wird ein Absatz-Tag erstellt und der Spracheingang wird anschließend in dieses hinzugefügt. Dies wird dann in den Abschnitt "Review" hinzugefügt.

 Senden.ADDEVENTLISTENER ('Klicken Sie auf, Funktion () {
Sei p = document.CreateeSelement ('p');
var nextNode = document.createTextNode
(Transkription.Value);
p.appendchild (TextNode);
review.appendchild (p);
Lassen Sie sich heute = neues Datum ();
Sei s = document.CreateeSelement ('klein'); 

21. endgültige Einreichung.

Das Datum wird hinzugefügt, damit die Überprüfung in das Dokument aktuell ist. Schließlich wird eine horizontale Regel hinzugefügt, um zu zeigen, wo jede Überprüfung endet, dann wird der Text bereit für den neuen Eingang gelöscht. Speichern Sie die Seite und testen Sie diese. Sie werden sehen, dass Sie jetzt Ihre Rede auf der Seite als Bewertungen einreichen können. Für Persistenz müssen Sie eine Datenbank verwenden, um diese Ergebnisse zu speichern.

 TextNode = document.createtextNode (heute);
S.AppendChild (TextNode);
review.appendchild (s);
Lassen Sie HR = document.CreateeSelement ('HR');
review.appendchild (hr);
transkription.textcontent = '';
}); 

Dieser Artikel wurde ursprünglich in Ausgabe 286 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Kaufen Sie das Thema 286 hier oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

• 14 der besten JavaScript-APIs
• Erstellen Sie ein AI-Powered-Chatbot
• 5 EIC UX-Trends im Jahr 2019