de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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.

Sie können jetzt Geld mit Google Mail senden und empfangen

Sie können jetzt Geld mit Google Mail senden und empfangen

Android: Im Jahr 2013 führte Google eine Funktion ein, mit der Nutzer von Google Wallet über die Webversion von Gmail Geld senden und empfangen können . Dieses Feature macht den Sprung in den mobilen Bereich schnell, da Google Mail für Android jetzt mit der Google Wallet-Integration ausgeliefert wird .Wen

(Tech- und Design-Tipps)

6 Wege Social Media hat Weihnachten verändert

6 Wege Social Media hat Weihnachten verändert

Deck die Hallen mit Zweigen der Stechpalme als #Weihnachten ist hier! Offensichtlich hat sich viel in der Art und Weise geändert, wie wir die Feiertage feiern, mit dem ständigen Aufstieg von Smartphones, Social Media und Selfies - versuchen Sie einfach , Ihr Weihnachtsessen auf Instagram zu zeigen.

(Tech- und Design-Tipps)