Lesen Sie Webseiten und markieren Sie Inhalte mit Amazon Polly

In diesem Beitrag demonstrieren wir die Verwendung Amazonas Polly– ein führender Cloud-Dienst, der Text in lebensechte Sprache umwandelt – um den Inhalt einer Webseite zu lesen und den Inhalt hervorzuheben, während er gelesen wird. Das Hinzufügen einer Audiowiedergabe zu einer Webseite verbessert die Zugänglichkeit und das Besuchererlebnis der Seite. Audioverstärkte Inhalte sind wirkungsvoller und einprägsamer, ziehen mehr Besucher auf die Seite und nutzen die Kaufkraft der Besucher. Es verbessert auch die Marke des Unternehmens oder der Organisation, die die Seite veröffentlicht. Die Text-to-Speech-Technologie macht diese Geschäftsvorteile erreichbar. Wir beschleunigen diesen Weg, indem wir zeigen, wie Sie dieses Ziel mit Amazon Polly erreichen können.

Diese Funktion verbessert die Zugänglichkeit für Besucher mit Behinderungen und könnte als Teil der Zugänglichkeitsstrategie Ihrer Organisation übernommen werden. Ebenso wichtig ist, dass es das Seitenerlebnis für Besucher ohne Behinderungen verbessert. Beide Gruppen haben eine beträchtliche Kaufkraft und geben mehr Geld für Seiten aus, die Audioverbesserungen verwenden, um ihre Aufmerksamkeit zu erregen.

Lösungsübersicht

PollyReadsThePage (PRTP) – wie wir die Lösung nennen – ermöglicht es einem Webseiten-Herausgeber, eine Audiosteuerung auf seiner Webseite abzulegen. Wenn der Besucher wählt Play auf dem Steuerelement liest das Steuerelement die Seite und hebt den Inhalt hervor. PRTP verwendet die allgemeine Fähigkeit von Amazon Polly, Sprache aus Text zu synthetisieren. Es ruft Amazon Polly auf, um zwei Artefakte für jede Seite zu generieren:

• Der Audioinhalt in einem vom Browser abspielbaren Format: MP3
• Eine Sprachmarkendatei, die für jeden Textsatz Folgendes angibt:
  • Die Zeit während der Wiedergabe, zu der der Satz gelesen wird
  • Die Stelle auf der Seite, an der der Satz erscheint

Wenn der Besucher wählt Play, spielt der Browser die MP3-Datei ab. Während das Audio gelesen wird, überprüft der Browser die Zeit, findet in der Markierungsdatei, welcher Satz zu diesem Zeitpunkt zu lesen ist, lokalisiert ihn auf der Seite und hebt ihn hervor.

PRTP ermöglicht es dem Besucher, in verschiedenen Stimmen und Sprachen zu lesen. Jede Stimme benötigt ein eigenes Dateipaar. PRTP verwendet neuronale Stimmen. Eine Liste der unterstützten neuronalen Stimmen und Sprachen finden Sie unter Neuronale Stimmen. Eine vollständige Liste der Standard- und neuronalen Stimmen in Amazon Polly finden Sie unter Stimmen in Amazon Polly.

Wir betrachten zwei Arten von Webseiten: statische und dynamische Seiten. In einem statisch Seite, der Inhalt ist in der Seite enthalten und ändert sich nur, wenn eine neue Version der Seite veröffentlicht wird. Das Unternehmen aktualisiert die Seite möglicherweise täglich oder wöchentlich als Teil seines Web-Build-Prozesses. Für diesen Seitentyp ist es möglich, die Audiodateien zur Erstellungszeit vorab zu generieren und sie zur Wiedergabe auf dem Webserver zu platzieren. Wie die folgende Abbildung zeigt, ist das script PRTP Pre-Gen ruft Amazon Polly auf, um das Audio zu generieren. Es verwendet als Eingabe die HTML-Seite selbst und optional eine Konfigurationsdatei, die angibt, welcher Text aus der Seite extrahiert werden soll (Text Extract Config). Wenn die Extraktionskonfiguration weggelassen wird, trifft das Pre-Gen-Skript eine sinnvolle Auswahl an Text, der aus dem Hauptteil der Seite extrahiert werden soll. Amazon Polly gibt die Dateien in einem aus Amazon Simple Storage-Service (Amazon S3) Eimer; das Skript kopiert sie auf Ihren Webserver. Wenn der Besucher das Audio abspielt, lädt der Browser die MP3 direkt vom Webserver herunter. Für Highlights, eine Drop-in-Bibliothek, PRTP.jsverwendet die Markierungsdatei, um den gelesenen Text hervorzuheben.

Der Inhalt von a dynamisch Seitenänderungen als Reaktion auf die Besucherinteraktion, sodass Audio nicht vorab generiert werden kann, sondern dynamisch synthetisiert werden muss. Wie die folgende Abbildung zeigt, verwendet die Seite, wenn der Besucher das Audio abspielt PRTP.js um das Audio in Amazon Polly zu generieren, und es hebt das synthetisierte Audio mit dem gleichen Ansatz wie bei statischen Seiten hervor. Um über den Browser auf AWS-Services zugreifen zu können, benötigt der Besucher eine AWS-Identität. Wir zeigen, wie man eine verwendet Amazon Cognito Identitätspool, um dem Besucher gerade genug Zugriff auf Amazon Polly und den S3-Bucket zu gewähren, um das Audio zu rendern.

Um sowohl MP3-Audio als auch Sprachmarkierungen zu generieren, muss der Polly-Dienst dieselbe Eingabe zweimal synthetisieren. Beziehen Sie sich auf die Amazon Polly-Preisseite Kostenimplikationen zu verstehen. Die Vorgenerierung spart Kosten, da die Synthese zur Erstellungszeit und nicht bei Bedarf für jede Besucherinteraktion durchgeführt wird.

Der Code, der diesen Beitrag begleitet, ist als Open-Source-Repository auf verfügbar GitHub.

Um die Lösung zu erkunden, folgen wir diesen Schritten:

1. Richten Sie die Ressourcen ein, einschließlich des Pre-Gen-Build-Servers, des S3-Buckets, des Webservers und der Amazon Cognito-Identität.
2. Führen Sie den statischen Pre-Gen-Build aus und testen Sie die statischen Seiten.
3. Testen Sie dynamische Seiten.

Voraussetzungen:

Um dieses Beispiel auszuführen, benötigen Sie eine AWS-Konto mit Erlaubnis zur Nutzung von Amazon Polly, Amazon S3, Amazon Cognito und (für Demozwecke) AWS Cloud9.

Ressourcen bereitstellen

Wir teilen uns ein AWS CloudFormation Vorlage, um in Ihrem Konto eine eigenständige Demoumgebung zu erstellen, die Ihnen hilft, dem Beitrag zu folgen. Wenn Sie PRTP lieber in Ihrer eigenen Umgebung einrichten möchten, lesen Sie die Anweisungen in README.md.

Um die Demoumgebung mit CloudFormation bereitzustellen, laden Sie zunächst eine Kopie der CloudFormation-Vorlage. Führen Sie dann die folgenden Schritte aus:

1. Wählen Sie in der AWS CloudFormation-Konsole aus Stapel erstellen.
2. Auswählen Mit neuen Ressourcen (Standard).
3. Auswählen Laden Sie eine Vorlagendatei hoch.
4. Auswählen Datei auswählen , um die lokale Kopie der heruntergeladenen Vorlage hochzuladen. Der Name der Datei ist prtp.yml.
5. Auswählen Weiter.
6. Geben Sie einen Stapelnamen Ihrer Wahl ein. Später tragen Sie dies wieder als Ersatz für ein .
7. Sie können Standardwerte in der beibehalten Parameter .
8. Auswählen Weiter.
9. Fahren Sie mit den verbleibenden Abschnitten fort.
10. Lesen und aktivieren Sie die Kontrollkästchen in der Leistungen .
11. Auswählen Stapel erstellen.
12. Wenn der Stapel vollständig ist, suchen Sie den Wert für BucketName in den Stack-Ausgängen.

Wir empfehlen Ihnen, den Stack mit Ihrem Sicherheitsteam zu überprüfen, bevor Sie ihn in einer Produktionsumgebung verwenden.

Richten Sie den Webserver und den Pre-Gen-Server in einer AWS Cloud9 IDE ein

Suchen Sie als Nächstes in der AWS Cloud9-Konsole die Umgebung PRTPDemoCloud9 vom CloudFormation-Stack erstellt. Wählen IDE öffnen um die AWS Cloud9-Umgebung zu öffnen. Öffnen Sie ein Terminalfenster und führen Sie die folgenden Befehle aus, die den PRTP-Code klonen, Pre-Gen-Abhängigkeiten einrichten und einen Webserver zum Testen starten:

#Obtain PRTP code
cd /home/ec2-user/environment
git clone https://github.com/aws-samples/amazon-polly-reads-the-page.git

# Navigate to that code
cd amazon-polly-reads-the-page/setup

# Install Saxon and html5 Python lib. For pre-gen.
sh ./setup.sh <StackName>

# Run Python simple HTTP server
cd ..
./runwebserver.sh <IngressCIDR> 

Aussichten für verwenden Sie den Namen, den Sie dem CloudFormation-Stack gegeben haben. Zum , geben Sie einen Bereich von IP-Adressen an, die für den Zugriff auf den Webserver zugelassen sind. Um den Zugriff auf den Browser auf Ihrem lokalen Computer einzuschränken, finden Sie Ihre IP-Adresse mit https://whatismyipaddress.com/ und anhängen /32 um den Bereich anzugeben. Zum Beispiel, wenn Ihre IP ist 10.2.3.4, use 10.2.3.4/32. Der Server lauscht auf Port 8080. In der Ausgabe wird die öffentliche IP-Adresse angegeben, auf der der Server lauscht. Zum Beispiel:

Public IP is

3.92.33.223

Testen Sie statische Seiten

Navigieren Sie in Ihrem Browser zu PRTPStaticDefault.html. (Wenn Sie die Demo verwenden, lautet die URL http://<cloud9host>:8080/web/PRTPStaticDefault.html, Wobei ist die öffentliche IP-Adresse, die Sie beim Einrichten der IDE ermittelt haben.) Wählen Sie Play auf der Audiosteuerung oben. Hören Sie sich das Audio an und sehen Sie sich die Highlights an. Erkunden Sie die Steuerung, indem Sie Geschwindigkeiten und Stimmen ändern, pausieren, vor- und zurückspulen. Der folgende Screenshot zeigt die Seite; der Text „Überspringt versteckten Absatz“ ist hervorgehoben, da er gerade gelesen wird.

Versuchen Sie dasselbe für PRTPStaticConfig.html und PRTPStaticCustom.html. Die Ergebnisse sind ähnlich. Alle drei lesen zum Beispiel den Alt-Text zum Foto der Katze („Random picture of a cat“). Alle drei lesen NE, NW, SE und SW als vollständige Wörter („northeast“, „northwest“, „southeast“, „southwest“) und nutzen die Lexika von Amazon Polly.

Beachten Sie die Hauptunterschiede im Audio:

• PRTPStaticDefault.html liest den gesamten Text im Hauptteil der Seite, einschließlich des Zusammenfassungsabschnitts unten mit „Ihre Gedanken in einem Wort“, „Anfrage senden“, „Zuletzt aktualisiert am 1. April 2020“ und „Fragen an das Entwicklerteam“. PRTPStaticConfig.html und PRTPStaticCustom.html Lesen Sie diese nicht, da sie die Nachbearbeitung ausdrücklich von der Sprachsynthese ausschließen.
• PRTPStaticCustom.html liest die QB-Bestseller Tabelle anders als die anderen. Es liest nur die ersten drei Zeilen und liest die Zeilennummer für jede Zeile. Es wiederholt die Spalten für jede Zeile. PRTPStaticCustom.html verwendet eine benutzerdefinierte Transformation, um das Auslesen der Tabelle anzupassen. Die anderen Seiten verwenden das Standard-Tabellen-Rendering.
• PRTPStaticCustom.html liest „Tom Brady“ lauter als der Rest des Textes. Es verwendet die Speech Synthesis Markup Language (SSML) prosody -Tag, um das Lesen von Tom Brady anzupassen. Die anderen Seiten passen sich nicht auf diese Weise an.
• PRTPStaticCustom.html, liest dank einer benutzerdefinierten Transformation die Hauptkacheln in der Reihenfolge NW, SW, NE, SE; Das heißt, es lautet „Heutige Artikel“, „Zitat des Tages“, „Foto des Tages“, „Witze des Tages“. Die anderen Seiten werden in der Reihenfolge gelesen, in der die Kacheln in der natürlichen NW, NE, SW, SO-Reihenfolge erscheinen, in der sie im HTML erscheinen: „Heutige Artikel“, „Foto des Tages“, „Zitat des Tages“, „Witze des Tag."

Sehen wir uns genauer an, wie das Audio generiert wird und wie die Seite den Text hervorhebt.

Statischer Vorgenerator

Unser GitHub-Repo enthält vorgenerierte Audiodateien für die PRPTStatic Seiten, aber wenn Sie sie selbst generieren möchten, führen Sie über die Bash-Shell in der AWS Cloud9 IDE die folgenden Befehle aus:

# navigate to examples
cd /home/ec2-user/environment/amazon-polly-reads-the-page-blog/pregen/examples

# Set env var for my S3 bucket. Example, I called mine prtp-output
S3_BUCKET=prtp-output # Use output BucketName from CloudFormation

#Add lexicon for pronuniciation of NE NW SE NW
#Script invokes aws polly put-lexicon
./addlexicon.sh.

#Gen each variant
./gen_default.sh
./gen_config.sh
./gen_custom.sh

Sehen wir uns nun an, wie diese Skripte funktionieren.

Standardfall

Wir beginnen mit gen_default.sh:

cd ..
python FixHTML.py ../web/PRTPStaticDefault.html  
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html generic.xslt example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticDefault compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticDefault compass

Das Skript beginnt mit der Ausführung des Python-Programms FixHTML.py um die Quell-HTML-Datei zu erstellen PRTPStaticDefault.html wohlgeformt. Es schreibt die wohlgeformte Version der Datei in example/tmp_wff.html. Dieser Schritt ist aus zwei Gründen entscheidend:

• Das meiste Quell-HTML ist nicht wohlgeformt. Dieser Schritt repariert das Quell-HTML, damit es wohlgeformt ist. Beispielsweise werden viele HTML-Seiten nicht geschlossen P Elemente. Dieser Schritt schließt sie.
• Wir verfolgen, wo wir auf der HTML-Seite Text finden. Wir müssen Standorte mithilfe derselben DOM-Struktur (Document Object Model) verfolgen, die der Browser verwendet. Beispielsweise fügt der Browser automatisch eine hinzu TBODY zum TABLE. Das Python-Programm folgt denselben wohlgeformten Reparaturen wie der Browser.

gen_ssml.sh nimmt den wohlgeformten HTML-Code als Eingabe, wendet eine XML-Stylesheet-Transformation (XSLT) darauf an und gibt eine SSML-Datei aus. (SSML ist die Sprache in Amazon Polly, um zu steuern, wie Audio aus Text gerendert wird.) Im aktuellen Beispiel lautet die Eingabe example/tmp_wff.html. Die Ausgabe ist example/tmp.ssml. Die Aufgabe der Transformation besteht darin, zu entscheiden, welcher Text aus dem HTML-Code extrahiert und an Amazon Polly übermittelt werden soll. generic.xslt ist eine sinnvolle Standard-XSLT-Transformation für die meisten Webseiten. Im folgenden Beispiel-Code-Snippet schließt es die Audiosteuerung, den HTML-Header sowie HTML-Elemente wie aus script und form. Es schließt auch Elemente mit dem versteckten Attribut aus. Es enthält Elemente, die normalerweise Text enthalten, wie z P, H1 und SPAN. Für diese wird sowohl eine Markierung, einschließlich des vollständigen XPath-Ausdrucks des Elements, als auch der Wert des Elements gerendert.

<!-- skip the header -->
<xsl:template match="html/head">
</xsl:template>

<!-- skip the audio itself -->
<xsl:template match="html/body/table[@id='prtp-audio']">
</xsl:template>

<!-- For the body, work through it by applying its templates. This is the default. -->
<xsl:template match="html/body">
<speak>
      <xsl:apply-templates />
</speak>
</xsl:template>

<!-- skip these -->
<xsl:template match="audio|option|script|form|input|*[@hidden='']">
</xsl:template>

<!-- include these -->
<xsl:template match="p|h1|h2|h3|h4|li|pre|span|a|th/text()|td/text()">
<xsl:for-each select=".">
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <xsl:value-of select="normalize-space(.)"/>
</p>
</xsl:for-each>
</xsl:template>

Das Folgende ist ein Ausschnitt der gerenderten SSML. Dies wird Amazon Polly als Eingabe zugeführt. Beachten Sie zum Beispiel, dass der Text „Überspringt versteckten Absatz“ im Audio zu lesen ist, und wir verbinden ihn mit einer Markierung, die uns sagt, dass dieser Text an der Stelle auf der Seite vorkommt, die durch den XPath-Ausdruck angegeben ist /html/body[1]/div[2]/ul[1]/li[1].

<speak>
<p><mark name="/html/body[1]/div[1]/h1[1]"/>PollyReadsThePage Normal Test Page</p>
<p><mark name="/html/body[1]/div[2]/p[1]"/>PollyReadsThePage is a test page for audio readout with highlights.</p>
<p><mark name="/html/body[1]/div[2]/p[2]"/>Here are some features:</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[1]"/>Skips hidden paragraph</p>
<p><mark name="/html/body[1]/div[2]/ul[1]/li[2]"/>Speaks but does not highlight collapsed content</p>
…
</speak>

Um Audio in Amazon Polly zu generieren, rufen wir das Skript auf run_polly.sh. Es läuft die AWS-Befehlszeilenschnittstelle (AWS CLI)-Befehl aws polly start-speech-synthesis-task zweimal: einmal zum Generieren von MP3-Audio und erneut zum Generieren der Markierungsdatei. Da die Generierung asynchron ist, fragt das Skript ab, bis es die Ausgabe im angegebenen S3-Bucket findet. Wenn es die Ausgabe findet, lädt es auf den Build-Server herunter und kopiert die Dateien in die web/polly Mappe. Im Folgenden finden Sie eine Auflistung der Webordner:

• PRTPStaticDefault.html
• PRTPStaticConfig.html
• PRTPStaticCustom.html
• PRTP.js
• polly/PRTPStaticDefault/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• polly/PRTPStaticConfig/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks
• polly/PRTPStaticCustom/Joanna.mp3, Joanna.marks, Matthew.mp3, Matthew.marks

Jede Seite hat ihren eigenen Satz sprachspezifischer MP3- und Markierungsdateien. Diese Dateien sind die vorgenerierten Dateien. Die Seite muss Amazon Polly zur Laufzeit nicht aufrufen; Die Dateien sind Teil des Web-Builds.

Konfiggesteuerter Fall

Als nächstes betrachten gen_config.sh:

cd ..
python FixHTML.py ../web/PRTPStaticConfig.html 
  example/tmp_wff.html
python ModGenericXSLT.py example/transform_config.json 
  example/tmp.xslt
./gen_ssml.sh example/tmp_wff.html example/tmp.xslt 
  example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
  ../web/polly/PRTPStaticConfig compass
./run_polly.sh example/tmp.ssml en-US Matthew 
  ../web/polly/PRTPStaticConfig compass

Das Skript ähnelt dem Skript im Standardfall, aber die fettgedruckten Linien zeigen den Hauptunterschied an. Unser Ansatz ist konfigurationsgesteuert. Wir passen den Inhalt an, der aus der Seite extrahiert werden soll, indem wir angeben, was durch Konfiguration extrahiert werden soll, nicht durch Code. Insbesondere verwenden wir die JSON-Datei transform_config.json, die angibt, dass die einzuschließenden Inhalte die Elemente mit IDs sind title, main, maintable und qbtable. Das Element mit ID wrapup sollte ausgeschlossen werden. Siehe folgenden Code:

{
 "inclusions": [ 
 	{"id" : "title"} , 
 	{"id": "main"}, 
 	{"id": "maintable"}, 
 	{"id": "qbtable" }
 ],
 "exclusions": [
 	{"id": "wrapup"}
 ]
}

Wir führen das Python-Programm aus ModGenericXSLT.py ändern generic.xslt, die im Standardfall verwendet wird, um die Einschlüsse und Ausschlüsse zu verwenden, die wir in angeben transform_config.json. Das Programm schreibt die Ergebnisse in eine temporäre Datei (example/tmp.xslt), an die es übergeht gen_ssml.sh als seine XSLT-Transformation.

Dies ist eine Low-Code-Option. Der Web-Publisher muss nicht wissen, wie man XSLT schreibt. Aber sie müssen die Struktur der HTML-Seite und die IDs verstehen, die in ihren wichtigsten Organisationselementen verwendet werden.

Anpassungsfall

Schließlich betrachten gen_custom.sh:

cd ..
python FixHTML.py ../web/PRTPStaticCustom.html 
   example/tmp_wff.html
./gen_ssml.sh example/tmp_wff.html example/custom.xslt  
   example/tmp.ssml
./run_polly.sh example/tmp.ssml en-US Joanna 
   ../web/polly/PRTPStaticCustom compass
./run_polly.sh example/tmp.ssml en-US Matthew 
   ../web/polly/PRTPStaticCustom compass

Dieses Skript ist fast identisch mit dem Standardskript, außer dass es sein eigenes XSLT verwendet –example/custom.xslt– und nicht das generische XSLT. Das Folgende ist ein Ausschnitt des XSLT:

<!-- Use NW, SW, NE, SE order for main tiles! -->
<xsl:template match="*[@id='maintable']">
    <mark>
        <xsl:attribute name="name">
        <xsl:value-of select="stats:getMark(.)"/>
        </xsl:attribute>
    </mark>
    <xsl:variable name="tiles" select="./tbody"/>
    <xsl:variable name="tiles-nw" select="$tiles/tr[1]/td[1]"/>
    <xsl:variable name="tiles-ne" select="$tiles/tr[1]/td[2]"/>
    <xsl:variable name="tiles-sw" select="$tiles/tr[2]/td[1]"/>
    <xsl:variable name="tiles-se" select="$tiles/tr[2]/td[2]"/>
    <xsl:variable name="tiles-seq" select="($tiles-nw,  $tiles-sw, $tiles-ne, $tiles-se)"/>
    <xsl:for-each select="$tiles-seq">
         <xsl:apply-templates />  
    </xsl:for-each>
</xsl:template>   

<!-- Say Tom Brady load! -->
<xsl:template match="span[@style = 'color:blue']" >
<p>
      <mark>
          <xsl:attribute name="name">
          <xsl:value-of select="prtp:getMark(.)"/>
          </xsl:attribute>
      </mark>
      <prosody volume="x-loud">Tom Brady</prosody>
</p>
</xsl:template>

Wenn Sie den Code im Detail studieren möchten, lesen Sie die Skripte und Programme im GitHub-Repo.

Browser-Setup und Highlights

Die statischen Seiten enthalten eine HTML5-Audiosteuerung, die als Audioquelle die von Amazon Polly generierte und auf dem Webserver gespeicherte MP3-Datei verwendet:

<audio id="audio" controls>
  <source src="polly/PRTPStaticDefault/en/Joanna.mp3" type="audio/mpeg">
</audio>

Zur Ladezeit lädt die Seite auch die von Amazon Polly generierte Markierungsdatei. Dies geschieht in der PRTP.js Datei, die die HTML-Seite enthält. Das Folgende ist ein Ausschnitt der Markierungsdatei für PRTPStaticDefault:

{“time”:11747,“type”:“sentence”,“start”:289,“end”:356,“value”:“PollyReadsThePage is a test page for audio readout with highlights.“}
{“time”:15784,“type”:“ssml”,“start”:363,“end”:403,“value”:“/html/body[1]/div[2]/p[2]“}
{“time”:16427,“type”:“sentence”,“start”:403,“end”:426,“value”:“Here are some features:“}
{“time”:17677,“type”:“ssml”,“start”:433,“end”:480,“value”:“/html/body[1]/div[2]/ul[1]/li[1]“}
{“time”:18344,“type”:“sentence”,“start”:480,“end”:502,“value”:“Skips hidden paragraph”}
{“time”:19894,“type”:“ssml”,“start”:509,“end”:556,“value”:“/html/body[1]/div[2]/ul[1]/li[2]“}
{“time”:20537,“type”:“sentence”,“start”:556,“end”:603,“value”:“Speaks but does not highlight collapsed content”}

Während der Audiowiedergabe gibt es einen Audio-Timer-Event-Handler PRTP.js das die aktuelle Zeit des Audios überprüft, den zu markierenden Text findet, seine Position auf der Seite findet und ihn hervorhebt. Der hervorzuhebende Text ist ein Typeintrag sentence in der Markendatei. Der Speicherort ist der XPath-Ausdruck im Namensattribut des Eintrags vom Typ SSML, der dem Satz vorangeht. Wenn die Zeit beispielsweise 18400 ist, lautet der hervorzuhebende Satz laut Markierungsdatei „Überspringt versteckten Absatz“, der bei 18334 beginnt. Die Position ist der SSML-Eintrag zur Zeit 17667: /html/body[1]/div[2]/ul[1]/li[1].

Testen Sie dynamische Seiten

Die Seite PRTPDynamic.html demonstriert dynamisches Audio-Readback mit standardmäßigen, konfigurationsgesteuerten und benutzerdefinierten Ansätzen zur Audioextraktion.

Standardfall

Navigieren Sie in Ihrem Browser zu PRTPDynamic.html. Die Seite hat einen Abfrageparameter, dynOption, die Werte akzeptiert default, config und custom. Es ist standardmäßig default, also können Sie es in diesem Fall weglassen. Die Seite hat zwei Abschnitte mit dynamischen Inhalten:

• Neueste Artikel – Ändert sich im Laufe des Tages häufig
• Griechische Philosophen suchen nach Datum – Ermöglicht dem Besucher die Suche nach griechischen Philosophen nach Datum und zeigt die Ergebnisse in einer Tabelle an

Erstellen Sie einige Inhalte in der Griechischer Philosoph Abschnitt, indem Sie einen Datumsbereich von -800 bis 0 eingeben, wie im Beispiel gezeigt. Dann wähle Finden Sie.

Spielen Sie nun das Audio ab, indem Sie auswählen Play in der Audiosteuerung.

Hinter den Kulissen führt die Seite den folgenden Code aus, um das Audio zu rendern und abzuspielen:

   buildSSMLFromDefault();
   chooseRenderAudio();
   setVoice();

Zuerst ruft es die Funktion auf buildSSMLFromDefault in PRTP.js um den größten Teil des Textes aus dem Text der HTML-Seite zu extrahieren. Diese Funktion durchläuft den DOM-Baum und sucht nach Text in gemeinsamen Elementen wie z p, h1, pre, span und td. Es ignoriert Text in Elementen, die normalerweise keinen vorzulesenden Text enthalten, wie z audio, option und script. Es erstellt SSML-Markup zur Eingabe in Amazon Polly. Das Folgende ist ein Ausschnitt, der die Extraktion der ersten Zeile aus der zeigt philosopher Tabelle:

<speak>
...
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[1]"/>Thales</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[2]"/>-624 to -546</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[3]"/>Miletus</p>
  <p><mark name="/HTML[1]/BODY[1]/DIV[3]/DIV[1]/DIV[1]/TABLE[1]/TBODY[1]/TR[2]/TD[4]"/>presocratic</p>
...
</speak>

Das chooseRenderAudio Funktion in PRTP.js beginnt mit der Initialisierung des AWS SDK für Amazon Cognito, Amazon S3 und Amazon Polly. Diese Initialisierung erfolgt nur einmal. Wenn chooseRenderAudio erneut aufgerufen wird, weil sich der Inhalt der Seite geändert hat, wird die Initialisierung übersprungen. Siehe folgenden Code:

AWS.config.region = env.REGION
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: env.IDP});
audioTracker.sdk.connection = {
   polly: new AWS.Polly({apiVersion: '2016-06-10'}),
   s3: new AWS.S3()
};

Es generiert MP3-Audio von Amazon Polly. Die Generierung ist synchron für kleine SSML-Eingaben und asynchron (wobei die Ausgabe an den S3-Bucket gesendet wird) für große SSML-Eingaben (mehr als 6,000 Zeichen). Im synchronen Fall bitten wir Amazon Polly, die MP3-Datei mit einer vorsignierten URL bereitzustellen. Wenn die synthetisierte Ausgabe fertig ist, setzen wir die src -Attribut des Audiosteuerelements zu dieser URL und laden Sie das Steuerelement. Wir fordern dann die Markendatei an und laden sie auf die gleiche Weise wie im statischen Fall. Siehe folgenden Code:

// create signed URL
const signer = new AWS.Polly.Presigner(pollyAudioInput, audioTracker.sdk.connection.polly);

// call Polly to get MP3 into signed URL
signer.getSynthesizeSpeechUrl(pollyAudioInput, function(error, url) {
  // Audio control uses signed URL
  audioTracker.audioControl.src =
    audioTracker.sdk.audio[audioTracker.voice];
  audioTracker.audioControl.load();

  // call Polly to get marks
  audioTracker.sdk.connection.polly.synthesizeSpeech(
    pollyMarksInput, function(markError, markData) {
    const marksStr = new
      TextDecoder().decode(markData.AudioStream);
    // load marks into page the same as with static
    doLoadMarks(marksStr);
  });
});

Konfiggesteuerter Fall

Navigieren Sie in Ihrem Browser zu PRTPDynamic.html?dynOption=config. Spielen Sie den Ton ab. Die Audiowiedergabe ähnelt dem Standardfall, es gibt jedoch geringfügige Unterschiede. Insbesondere werden einige Inhalte übersprungen.

Hinter den Kulissen, bei der Verwendung von config Option extrahiert die Seite Inhalte anders als im Standardfall. Im Standardfall verwendet die Seite buildSSMLFromDefault. Im konfigurationsgesteuerten Fall gibt die Seite die Abschnitte an, die sie einschließen und ausschließen möchte:

const ssml = buildSSMLFromConfig({
	 "inclusions": [ 
	 	{"id": "title"}, 
	 	{"id": "main"}, 
	 	{"id": "maintable"}, 
	 	{"id": "phil-result"},
	 	{"id": "qbtable"}, 
	 ],
	 "exclusions": [
	 	{"id": "wrapup"}
	 ]
	});

Das buildSSMLFromConfig Funktion, definiert in PRTP.js, durchläuft den DOM-Baum in jedem der Abschnitte, deren ID unter angegeben ist inclusions. Es extrahiert Inhalte aus jedem und kombiniert sie in der angegebenen Reihenfolge zu einem SSML-Dokument. Sie schließt die unter aufgeführten Abschnitte aus exclusions. Es extrahiert Inhalte aus jedem Abschnitt auf die gleiche Weise buildSSMLFromDefault extrahiert Inhalt aus dem Seitentext.

Anpassungsfall

Navigieren Sie in Ihrem Browser zu PRTPDynamic.html?dynOption=custom. Spielen Sie den Ton ab. Es gibt drei auffällige Unterschiede. Notieren wir uns diese und betrachten den benutzerdefinierten Code, der hinter den Kulissen ausgeführt wird:

• Es liest die Hauptkacheln in der Reihenfolge NW, SW, NE, SE. Der benutzerdefinierte Code ruft jeden dieser Zellblöcke ab maintable und fügt sie der SSML in der Reihenfolge NW, SW, NE, SE hinzu:

const nw = getElementByXpath("//*[@id='maintable']//tr[1]/td[1]");
const sw = getElementByXpath("//*[@id='maintable']//tr[2]/td[1]");
const ne = getElementByXpath("//*[@id='maintable']//tr[1]/td[2]");
const se = getElementByXpath("//*[@id='maintable']//tr[2]/td[2]");
[nw, sw, ne, se].forEach(dir => buildSSMLSection(dir, []));

• „Tom Brady“ wird laut ausgesprochen. Der benutzerdefinierte Code fügt „Tom Brady“-Text in eine SSML ein prosody tag:

if (cellText == "Tom Brady") {
   addSSMLMark(getXpathOfNode( node.childNodes[tdi]));
   startSSMLParagraph();
   startSSMLTag("prosody", {"volume": "x-loud"});
   addSSMLText(cellText);
   endSSMLTag();
   endSSMLParagraph();
}

• Es liest nur die ersten drei Zeilen der Quarterback-Tabelle. Es liest die Spaltenüberschriften für jede Zeile. Überprüfen Sie den Code im GitHub-Repo, um herauszufinden, wie dies implementiert wird.

Aufräumen

Löschen Sie den CloudFormation-Stack, um zukünftige Gebühren zu vermeiden.

Zusammenfassung

In diesem Beitrag haben wir eine technische Lösung für ein wichtiges Geschäftsproblem demonstriert: Wie man Amazon Polly verwendet, um den Inhalt einer Webseite zu lesen und den Inhalt hervorzuheben, während er gelesen wird. Wir haben dies anhand statischer und dynamischer Seiten gezeigt. Um Inhalte aus der Seite zu extrahieren, haben wir DOM-Traversal und XSLT verwendet. Um das Hervorheben zu erleichtern, haben wir die Sprachmarkierungsfunktion in Amazon Polly verwendet.

Erfahren Sie mehr über Amazon Polly, indem Sie dessen besuchen Service-Seite.

Stellen Sie gerne Fragen in den Kommentaren.

Über die Autoren

Mike Havey ist ein Lösungsarchitekt für AWS mit über 25 Jahren Erfahrung in der Entwicklung von Unternehmensanwendungen. Mike ist Autor von zwei Büchern und zahlreichen Artikeln. Besuchen Sie seinen Amazonas Autorenseite um mehr zu lesen.

Vineet Kachhawaha ist ein Lösungsarchitekt bei AWS mit Erfahrung im maschinellen Lernen. Er ist dafür verantwortlich, Kunden bei der Entwicklung skalierbarer, sicherer und kostengünstiger Workloads auf AWS zu unterstützen.