Wenig bekannte HTML5-Sprachsynthesefunktion

Wenn Sie es anhören, werden Sie feststellen, dass es sich bei dem abgespielten Ton nicht um zuvor aufgenommenes Audiomaterial handelt, sondern um eine durch Texterkennung synthetisierte Sprache.

Bitte setzen Sie zuerst Ihre Kopfhörer auf und kopieren Sie dann den folgenden Code in die Chrome-Konsole, um es zu erleben ~

 let msg = new SpeechSynthesisUtterance(Willkommen zum Lesen meines Blogs);window.speechSynthesis.speak(msg);

Schauen Sie, es ist nicht schwierig, die Sprachsynthese im Frontend zu implementieren

Aus dem obigen Beispiel können wir die Funktionen der beiden oben aufgerufenen Methoden erraten.

 SpeechSyntehesisUtterancwindow.speechSynthesis.speak

Natürlich umfasst die Sprachsynthese nicht nur diese beiden APIs, aber beginnen wir mit diesen beiden Punkten.

Referenz: Developer.mozilla.org/en-US/docs/… Das SpeechSyntehesisUtteranc-Objekt enthält den vom Sprachdienst zu lesenden Inhalt und einige Parameter wie Sprache, Tonhöhe und Lautstärke

 SpeechSyntehesisUtteranc()SpeechSynthesisUtterance.langSpeechSynthesisUtterance.pitchSpeechSynthesisUtterance.rateSpeechSynthesisUtterance.voiceSpeechSynthesisUtterance.volume

Hinweis: Die oben genannten Eigenschaften sind alle lesbar und beschreibbar! Sie können den Code unten kopieren und ausprobieren. Anweisungen finden Sie in den Kommentaren.

 let msg = new SpeechSynthesisUtterance();msg.text = how are you // Zu synthetisierender Text msg.lang = en-US // Amerikanische englische Aussprache (standardmäßig automatisch ausgewählt) msg.rate = 2 // Doppelte Geschwindigkeit (Standard). ist 1, Bereich 0,1~10) msg.pitch = 2 // Hohe Tonhöhe (je größer die Zahl, desto schärfer, der Standardwert ist 1, Bereich 0~2) msg.volume = 0,5 // Lautstärke 0,5-fach (Standard ist 1, Bereich 0–1) window.speechSynthesis.speak(msg);

Gleichzeitig kann dieses Objekt auch auf eine Reihe von Ereignissen reagieren, die verwendet werden können:

• Start
• Ende
• Grenze
• Pause
• wieder aufnehmen

Mithilfe dieser Ereignisse können wir einige einfache Funktionen ausführen, beispielsweise das Zählen der Wörter in englischen Sätzen:

 let count = 0; // Anzahl der Wörter let msg = new SpeechSynthesisUtterance();let synth = window.speechSynthesis;msg.addEventListener('start',()=>{ // Beginnen Sie mit dem Lesen von console.log(`Textinhalt: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // Ende des Lesens console.log(end); console.log(`Anzahl der Textwörter (Wörter): ${count}`);msg.addEventListener('boundary',()=>{ // Wörter zählen count++;});

Da Chinesisch nach dem Ausprobieren keine Leerzeichen zur Trennung der einzelnen Wörter verwendet, werden die Wörter „Willkommen bei den Lesern“ automatisch als zwei Wörter erkannt: „Willkommen“ und „Leser“.

Referenz: Developer.mozilla.org/en-US/docs/…

Nachdem wir über SpeechSyntehesisUtteranc gesprochen haben, werfen wir einen Blick auf SpeechSynthesis

Die Hauptfunktion von SpeechSynthesis besteht darin, eine Reihe von Sprachsteuerungen durchzuführen, beispielsweise das Starten oder Anhalten.

Es verfügt über drei schreibgeschützte Eigenschaften, die den Status der Stimme anzeigen:

 SpeechSynthesis.pausedSpeechSynthesis.pending

Es gibt auch eine Reihe von Methoden zur Manipulation von Sprache:

•SpeechSynthesis.speak() beginnt mit dem Vorlesen von Sprache und löst gleichzeitig das Startereignis aus

•SpeechSynthesis.pause() pausiert und löst das Pause-Ereignis aus

•SpeechSynthesis.resume() wird fortgesetzt und löst gleichzeitig das Resume-Ereignis aus

•SpeechSynthesis.cancel() bricht den Lesevorgang ab und löst gleichzeitig das Endereignis aus

Basierend auf diesen Betriebsmethoden können wir unseren Textleser weiter verbessern:

Kehren wir zum ursprünglichen Ausgangspunkt zurück. Anhand des obigen Inhalts können wir erraten, wie das automatische Lesen von Artikeln auf einigen Websites implementiert ist.

Wenn das Frontend dieser Website das MVVM-Framework verwendet (nehmen Sie Vue als Beispiel), kann der Artikelinhalt in Daten gespeichert werden, die zum Aufbau der von uns benötigten Sprachsynthese verwendet werden können

Natürlich ist es auch möglich, den Artikel über eine Ajax-Anfrage abzurufen, die angeforderten Daten zu analysieren und das Sprachsyntheseobjekt zu erstellen.

Wenn der Artikel direkt in HTML geschrieben ist, muss das DOM zu diesem Zeitpunkt analysiert werden. Nach dem Testen ist sogar die folgende chaotische Struktur vorhanden

 <div id=test> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <table> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

Lesen Sie den Text direkt über innerText und erstellen Sie dann ein Sprachsyntheseobjekt. Sie können ihn auch in der gewünschten Reihenfolge lesen (Bilder werden ignoriert).

Wenn wir einige spezielle Strukturen wie Tabellen ignorieren möchten, können wir natürlich etwas Energie in das Parsen investieren und die Daten oder DOM-Elemente herausfiltern, die wir nicht möchten.

Egal was passiert, wir finden eine passende Lösung~

Diese Funktion befindet sich noch im Entwurf und wird nicht allgemein unterstützt.

Auch diese API kann noch nicht auf Produktionsumgebungen angewendet werden.

Der derzeit gängigere Ansatz besteht darin, eine API (vielleicht eine API eines Drittanbieters) zu erstellen, die Text im Backend in eine Sprachdatei synthetisiert und ihn dann als Medium im Frontend wiedergibt.

Als ich einmal verwirrt war, las ich einige Artikel von Experten und einige hochrangige Gedanken zur Front-End-Entwicklung. Eines hat mich tief beeindruckt:

Das Frontend ist dem Nutzer am nächsten. Auch die Barrierefreiheit ist ein wichtiges Thema. Obwohl die Vorteile einer solchen Funktion weitaus geringer sind als bei anderen Unternehmen, lohnt es sich, mehr Arbeit zu investieren, um das Produkt besser bedienen zu können. Dies ist auch ein Geist der Front-End-Entwicklung.

Das Obige ist die vom Herausgeber eingeführte, wenig bekannte HTML5-Sprachsynthesefunktion. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.