So fügen Sie eine Text-zu-Sprache-Funktion auf einer Webseite hinzu

Das Text zu Sprache Feature bezieht sich auf die gesprochene Erzählung eines Textes auf einem Gerät angezeigt. Derzeit sind Geräte wie Laptops, Tablets und Mobiltelefone habe bereits diese Funktion. Jede Anwendung, die auf diesen Geräten ausgeführt wird, wie z. B. ein Webbrowser, kann dies davon Gebrauch machen, und erweitern Sie die Funktionalität. Das Erzählmerkmal kann eine geeignete Hilfe für eine Anwendung sein zeigt reichlich Text an, als es bietet die Möglichkeit zu hören für Website-Besucher.

Die Web-Sprach-API

Das Web Speech JavaScript API ist das Tor zu Zugriff auf die Text-to-Speech-Funktion über einen Webbrowser. Wenn Sie also eine Text-to-Speech-Funktion auf einer textlastigen Webseite einführen möchten und Ihren Lesern ermöglichen sollen, den Inhalt anzuhören, können Sie diese praktische API oder, genauer gesagt, deren API verwenden Sprachsynthese Schnittstelle.

Anfänglicher Code & Support-Check

Um zu beginnen, erstellen wir eine Webseite mit mir Beispieltext zum Erzählen, und drei Tasten.

     
  Der Hase mit vielen Freunden
  Ein Hase war sehr beliebt bei… 
 Aber er lehnte ab und sagte, dass… 
  Moral der Geschichte…

Die Tasten sind die Steuerelemente für die Erzählung. Jetzt müssen wir sicherstellen, dass die UA unterstützt die Sprachsynthese Schnittstelle. Dazu prüfen wir schnell mit JavaScript, ob die Fenster Objekt hat die 'Sprachsynthese' Eigentum, oder nicht.

 onload = function () if ('speechSynthesis' in window) / * Sprachsynthese wird unterstützt * / else / * Sprachsynthese wird nicht unterstützt * /

Ob Sprachsynthese ist verfügbar, zuerst wir Erstellen Sie eine Referenz für Sprachsynthese das wir dem zuordnen Synth Variable. Wir ... auch eine Flagge einleiten mit dem falsch Wert (wir werden den Zweck später in der Post sehen) und wir Erstellen Sie Referenzen und klicken Sie auf Event-Handler für die drei Tasten (Play, Pause, Stop).

Wenn der Benutzer auf eine der Schaltflächen klickt, wird die entsprechende Funktion (onClickPlay (), onClickPause (), onClickStop ()) wird angerufen werden.

 if ('speechSynthesis' im Fenster) var synth = speechSynthesis; var flag = falsch; / * Verweise auf die Schaltflächen * / var playEle = document.querySelector ('# play'); var pauseEle = document.querySelector ('# pause'); var stopEle = document.querySelector ('# stop'); / * click Ereignishandler für die Schaltflächen * / playEle.addEventListener ('click', onClickPlay); pauseEle.addEventListener ('click', onClickPause); stopEle.addEventListener ('click', onClickStop); Funktion onClickPlay ()  Funktion onClickPause ()  Funktion onClickStop ()

Erstellen Sie die benutzerdefinierten Funktionen

Jetzt lass uns baue die Klickfunktionen auf der drei einzelnen Schaltflächen, die von den Ereignishandlern aufgerufen werden.

1. Abspielen / Fortsetzen

Wenn der Play-Button angeklickt wird, zuerst Überprüf den Flagge. Wenn es falsch, Wir setzen es auf wahr, Wenn also später auf die Schaltfläche geklickt wird, wird der Code innerhalb von angezeigt zuerst ob Bedingung wird nicht ausgeführt (nicht bis die Fahne ist falsch nochmal).

Dann wir Erstellen Sie eine neue Instanz von SpeechSynthesisUtterance Schnittstelle, die Informationen über die Sprache enthält, z. B. den zu lesenden Text, die Sprachlautstärke, die gesprochene Stimme, die Geschwindigkeit, die Tonhöhe und die Sprache der Sprache. Wir fügen den Artikeltext hinzu als Parameter des Konstruktors, und ordnen Sie es dem zu Äußerung Variable.

 Funktion onClickPlay () if (! flag) flag = true; Äußerung = neue SpeechSynthesisUtterance (document.querySelector ('article'). textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (Äußerung);  if (synth.paused) / * unpause / Erzählung fortsetzen * / synth.resume ();

Wir nehmen das SpeechSynthesis.getVoices () Methode zu benennen Sie eine Stimme für die Rede von den Stimmen, die auf dem Gerät des Benutzers verfügbar sind. Da diese Methode ein Array aller verfügbaren Sprachoptionen in einem Gerät zurückgibt, werden wir Weisen Sie die erste verfügbare Gerätestimme zu mit der utterance.voice = synth.getVoices () [0]; Aussage.

Das am Ende Diese Eigenschaft stellt einen Ereignishandler dar Wird ausgeführt, wenn die Rede beendet ist. Innerhalb von ändern wir den Wert von Flagge Variable zurück zu falsch damit der Code, der die Rede beginnt kann ausgeführt werden wenn der Knopf ist erneut geklickt.

Dann rufen wir die an SpeechSynthesis.speak () Methode, um Starten Sie die Erzählung. Wir müssen auch überprüfen wenn die Erzählung pausiert ist, wofür wir das Nur-Lesen verwenden SpeechSynthesis.paused Eigentum. Wenn die Erzählung unterbrochen wird, müssen wir das tun die Erzählung fortsetzen Klicken Sie auf den Button, den Sie mit der Taste erreichen können SpeechSynthesis.resume () Methode.

2. Pause

Lass uns jetzt die erstellen onClickPause () Funktion, in der wir zuerst prüfen wenn die Erzählung andauert und nicht pausiert ist. Wir können diese Bedingungen testen, indem wir das verwenden SpeechSynthesis.speaking und das SpeechSynthesis.paused Eigenschaften. Wenn beide Bedingungen zutreffen, unsere onClickPause () Funktion hält die Rede an durch den Aufruf der SpeechSynthesis.pause () Methode.

 Funktion onClickPause () if (synth.speaking &&! synth.paused) / * Pausennotation * / synth.pause ();

3. Stoppen Sie

Das onClickStop () Funktion ist ähnlich aufgebaut wie onClickPause (). Wenn die Rede andauert, wir Hör auf durch den Aufruf der SpeechSynthesis.cancel () Methode das entfernt alle Äußerungen.

 Funktion onClickStop () if (synth.speaking) / * Kommentar stoppen * / / * für Safari * / Flag = false; synth.cancel ();

Beachten Sie, dass bei der Absage der Sprache die am Ende Ereignis wird automatisch ausgelöst, und wir hatten bereits den Flag-Reset-Code hinzugefügt. jedoch, Es gibt einen Fehler im Safari-Browser Das verhindert, dass dieses Ereignis ausgelöst wird. Deshalb haben wir die Flagge im zurückgesetzt onClickStop () Funktion. Sie müssen es nicht tun, wenn Sie Safari nicht unterstützen möchten.

Browser-Unterstützung

Alle aktuellen Versionen moderner Browser vollständige oder teilweise Unterstützung haben für die Sprachsynthese-API. Webkit-Browser spielen keine Sprache auf mehreren Registerkarten ab. Das Pausieren ist fehlerhaft (funktioniert, aber fehlerhaft). Die Sprache wird nicht zurückgesetzt, wenn der Benutzer die Seite in Webkit-Browsern neu lädt.

Arbeitsdemo

Schauen Sie sich die Live-Demo unten an oder schauen Sie sich den vollständigen Code auf Github an.

Sehen Sie den Stift von Ã… Â¸EIN¢Text to Speech - JavaScript von HONGKIAT (@hkdc) auf CodePen.