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.

15 Beispiele für Scrolling Richtig in Website-Designs

Bei der Verwendung vieler Aspekte des Webdesigns bevorzugen einige Designer den gleichen Stil oder die gleiche Technik, während andere ihr Website-Design so umgestalten, dass sie dem neuesten Trend entsprechen. Manchmal verwendet ein Website-Design eine Technik, die genau richtig ist; Keine andere Methode könnte zu ähnlichen oder besseren Ergebnissen oder Auswirkungen führen.Wir

(Tech- und Design-Tipps)

5 Aberglaube im Design, an die Kunden glauben

Menschen sind erstaunlich selbstbetrügerisch. Wir erlauben uns, viele Dinge zu glauben, die nicht wahr sind, einfach weil sie uns ein besseres Gefühl geben oder ein Bedürfnis erfüllen, das wir haben. Und viele andere Menschen lieben es, diese Tatsache zu nutzen. Von Werbetreibenden über Arbeitgeber bis hin zu Politikern gibt es einen nie endenden Strom von Menschen, die uns genau sagen, was wir hören wollen .Dies

(Tech- und Design-Tipps)