Wie Sie Text-zu-Sprache-Funktion auf jeder Webseite hinzufügen

Die Text-zu-Sprache- Funktion bezieht sich auf das gesprochene Erzählen eines Textes, der auf einem Gerät angezeigt wird. Gegenwärtig verfügen Geräte wie Laptops, Tablets und Mobiltelefone bereits über diese Funktion . Jede Anwendung, die auf diesen Geräten ausgeführt wird, z. B. ein Webbrowser, kann sie verwenden und ihre Funktionalität erweitern . Die Erzählfunktion kann eine geeignete Hilfe für eine Anwendung sein, die reichlich Text anzeigt, da sie die Möglichkeit bietet, Website-Besuchern zuzuhören .

Die Web-Sprach-API

Die Web Speech JavaScript-API ist das Gateway für den Zugriff auf die Text-zu-Sprache-Funktion über einen Webbrowser . Wenn Sie also Text-zu-Sprache-Funktionen auf einer textlastigen Webseite einführen und Ihren Lesern erlauben möchten, den Inhalt zu hören, können Sie diese praktische API verwenden, oder, genauer gesagt, die SpeechSynthesis Schnittstelle .

Erster Code & Support-Check

Um zu beginnen, erstellen wir eine Webseite mit Beispieltext, der erzählt werden soll, und drei Schaltflächen .

 Der Hase mit vielen Freunden 
Ein Hase war sehr beliebt bei ...
Aber er lehnte ab und erklärte, dass ...
 Moral der Geschichte... 

Die Schaltflächen sind die Steuerelemente für die Erzählung . Jetzt müssen wir sicherstellen, dass der UA die SpeechSynthesis Schnittstelle unterstützt. Um dies zu tun, überprüfen wir schnell mit JavaScript, ob das window die Eigenschaft 'speechSynthesis' hat oder nicht.

 onload = function () {if ('redeSynthesis' im Fenster) {/ * Sprachsynthese wird unterstützt * /} else {/ * Sprachsynthese wird nicht unterstützt * /}} 

Wenn speechSynthesis verfügbar ist, erstellen wir zuerst eine Referenz für die speechSynthesis, die wir der synth Variablen zuweisen. Wir initiieren auch ein Flag mit dem false Wert (wir sehen seinen Zweck später in der Post), und wir erstellen Referenzen und klicken auf Event-Handler für die drei Schaltflächen (Play, Pause, Stop).

Wenn der Benutzer auf eine der Schaltflächen klickt, wird seine jeweilige Funktion ( onClickPlay(), onClickPause(), onClickStop() ) aufgerufen.

 if ('redeSynthesis' im Fenster) {var synth = redeSynthesis; var flag = false; / * Verweise auf die Schaltflächen * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * Klicke auf Event-Handler für die Buttons * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('klick', onClickStop); Funktion onClickPlay () {} Funktion onClickPause () {} Funktion onClickStop () {}} 

Erstellen Sie die benutzerdefinierten Funktionen

Lassen Sie uns nun die Klick-Funktionen der drei einzelnen Buttons erstellen, die von den Event-Handlern aufgerufen werden.

1. Spielen / Fortsetzen

Wenn der Play-Button angeklickt wird, überprüfen wir zuerst die flag . Wenn es false, setzen wir es auf " true . Wenn also irgendwann auf die Schaltfläche geklickt wird, wird der Code innerhalb der ersten if Bedingung nicht ausgeführt (bis das Flag wieder false ).

Dann erstellen wir eine neue Instanz der SpeechSynthesisUtterance Schnittstelle, die Informationen über die Sprache enthält, wie den zu lesenden Text, die Sprachlautstärke, die gesprochene Sprache, die Geschwindigkeit, die Tonhöhe und die Sprache der Sprache. Wir fügen den Artikeltext als Parameter des Konstruktors hinzu und weisen ihn der Variablen der utterance .

 Funktion onClickPlay () {if (! flag) {flag = true; Äußerung = new SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () {flag = false; }; synth.speak (Äußerung); } if (synth.paused) {/ * narrate aufheben / fortsetzen * / synth.resume (); }} 

Wir verwenden die SpeechSynthesis.getVoices() -Methode, um eine Stimme für die Sprache aus den im Gerät des Benutzers verfügbaren Stimmen zu bestimmen. Da diese Methode ein Array aller verfügbaren Sprachoptionen in einem Gerät zurückgibt, weisen wir die erste verfügbare Gerätestimme mithilfe der utterance.voice = synth.getVoices()[0]; Erklärung.

Die Eigenschaft onend stellt einen Ereignishandler dar, der ausgeführt wird, wenn die Sprache beendet ist . Innerhalb davon ändern wir den Wert der flag Variablen zurück auf "falsch", so dass der Code, der die Sprache startet , ausgeführt werden kann, wenn auf die Schaltfläche erneut geklickt wird .

Dann rufen wir die SpeechSynthesis.speak() -Methode auf, um die Erzählung zu starten . Wir müssen auch prüfen, ob die Erzählung pausiert ist, wofür wir die schreibgeschützte Eigenschaft SpeechSynthesis.paused . Wenn die Erzählung pausiert ist, müssen wir die Erzählung beim Klick auf die Schaltfläche fortsetzen, was mit der SpeechSynthesis.resume() -Methode erreicht werden kann.

2. Pause

Lassen Sie uns nun die onClickPause() -Funktion erstellen, in der wir zuerst überprüfen, ob die Erzählung fortlaufend und nicht pausiert ist . Wir können diese Bedingungen testen, indem wir die Eigenschaften SpeechSynthesis.speaking und SpeechSynthesis.paused verwenden. Wenn beide Bedingungen erfüllt sind, pausiert unsere onClickPause() Funktion die Sprache, indem sie die SpeechSynthesis.pause() -Methode aufruft.

 Funktion onClickPause () {if (synth.speaking &&! synth.paused) {/ * pause narration * / synth.pause (); }} 

3. Stoppen

Die onClickStop() -Funktion ist ähnlich wie onClickPause() . Wenn die Sprache noch läuft, stoppen wir sie, indem wir die SpeechSynthesis.cancel() -Methode aufrufen, die alle Äußerungen entfernt .

 Funktion onClickStop () {if (synth.speaking) {/ * Stop Narration * / / * für Safari * / flag = false; synth.cancel (); }} 

Beachten Sie, dass bei der Annullierung von Sprache das onend Ereignis automatisch ausgelöst wird und wir bereits den Flag-Reset-Code darin eingefügt haben. Es gibt jedoch einen Fehler im Safari-Browser, der verhindert, dass dieses Ereignis ausgelöst wird. Deshalb haben wir das Flag in der onClickStop() -Funktion zurückgesetzt. Sie müssen es nicht tun, wenn Sie Safari nicht unterstützen möchten.

Browserunterstützung

Alle neuesten Versionen moderner Browser unterstützen vollständig oder teilweise die Sprachsynthese-API. Webkit-Browser spielen keine Sprache auf mehreren Registerkarten ab, das Pausieren ist fehlerhaft (funktioniert aber fehlerhaft), und die Sprache wird nicht zurückgesetzt, wenn der Benutzer die Seite in den Webkit-Browsern neu lädt.

Arbeitsdemo

Sehen Sie sich die Live-Demo an oder sehen Sie sich den vollständigen Code auf Github an.

Siehe den Stift ° ... Text Text Text to Speech - JavaScript von HONGKIAT (@hkdc) auf CodePen.

Erstellen Sie Einzelelement-Spinner und -Lader mit CSSPIN

Sie können einige erstaunliche Dinge mit CSS3, von benutzerdefinierten Eingabefeldern zu Dropdown-Menüs und sogar Vektorgrafiken erstellen . Diese Techniken überholen JavaScript schnell und erleichtern es Entwicklern, bessere Benutzererfahrungen zu erstellen.Eines der schwierigsten Dinge zu bauen ist eine Lade Spinner Animation, aber moderne CSS-Animation macht das sogar ziemlich einfach.Um

(Tech- und Design-Tipps)

6 Wege, wie das Internet unsere Gedanken langsam transformiert

Mit dem Internet, das alle Facetten unseres Arbeits- und Privatlebens durchdringt, kämpfen unsere Köpfe darum, mit der Entwicklung Schritt zu halten. Viele von uns haben sich daran gewöhnt, 24/7 rund um die Uhr online zu bleiben, wenn wir beim Trennen Probleme haben. Wir müssen ständigen Zugang zu unseren Boten, sozialen Netzwerken und Apps aller Art haben, um uns als Teil der vernetzten Welt zu fühlen.Es is

(Tech- und Design-Tipps)