Læs websider og fremhæv indhold ved hjælp af Amazon Polly

I dette indlæg viser vi, hvordan du bruger Amazon Polly— en førende cloud-tjeneste, der konverterer tekst til naturtro tale — for at læse indholdet af en webside og fremhæve indholdet, mens det bliver læst. Tilføjelse af lydafspilning til en webside forbedrer sidens tilgængelighed og besøgendes oplevelse. Lydforbedret indhold er mere virkningsfuldt og mindeværdigt, trækker mere trafik til siden og udnytter de besøgendes forbrugskraft. Det forbedrer også brandet for den virksomhed eller organisation, der udgiver siden. Tekst-til-tale-teknologi gør disse forretningsmæssige fordele opnåelige. Vi fremskynder denne rejse ved at demonstrere, hvordan man opnår dette mål ved hjælp af Amazon Polly.

Denne funktion forbedrer tilgængeligheden for besøgende med handicap og kan anvendes som en del af din organisations tilgængelighedsstrategi. Lige så vigtigt er det, at det forbedrer sideoplevelsen for besøgende uden handicap. Begge grupper har betydelig købekraft og bruger mere frit fra sider, der bruger lydforbedring til at fange deres opmærksomhed.

Oversigt over løsning

PollyReadsThePage (PRTP) – som vi henviser til løsningen – giver en websideudgiver mulighed for at slippe en lydkontrol på deres webside. Når den besøgende vælger Leg på kontrolelementet læser kontrolelementet siden og fremhæver indholdet. PRTP bruger Amazon Pollys generelle kapacitet til at syntetisere tale fra tekst. Det påberåber Amazon Polly at generere to artefakter for hver side:

• Lydindholdet i et format, der kan afspilles af browseren: MP3
• En talemarkeringsfil, der for hver tekstsætning angiver:
  • Det tidspunkt under afspilning, hvor sætningen læses
  • Placeringen på siden, hvor sætningen vises

Når den besøgende vælger Leg, browseren afspiller MP3-filen. Når lyden læses, tjekker browseren klokkeslættet, finder i markeringsfilen, hvilken sætning der skal læses på det tidspunkt, lokaliserer den på siden og fremhæver den.

PRTP giver den besøgende mulighed for at læse på forskellige stemmer og sprog. Hver stemme kræver sit eget par filer. PRTP bruger neurale stemmer. For en liste over understøttede neurale stemmer og sprog, se Neurale stemmer. For en komplet liste over standard- og neurale stemmer i Amazon Polly, se Stemmer i Amazon Polly.

Vi overvejer to typer websider: statiske og dynamiske sider. I en statisk siden, er indholdet indeholdt på siden og ændres kun, når en ny version af siden udgives. Virksomheden opdaterer muligvis siden dagligt eller ugentligt som en del af sin webbyggeproces. For denne type side er det muligt at forudgenerere lydfilerne på byggetidspunktet og placere dem på webserveren til afspilning. Som den følgende figur viser, er scriptet PRTP Pre-Gen kalder Amazon Polly til at generere lyden. Det tager som input selve HTML-siden og eventuelt en konfigurationsfil, der specificerer, hvilken tekst fra siden der skal udpakkes (Text Extract Config). Hvis udtrækskonfigurationen udelades, foretager pre-gen-scriptet et fornuftigt valg af tekst, der skal udtrækkes fra brødteksten på siden. Amazon Polly udsender filerne i en Amazon Simple Storage Service (Amazon S3) spand; scriptet kopierer dem til din webserver. Når den besøgende afspiller lyden, downloader browseren MP3'en direkte fra webserveren. For højdepunkter, et drop-in bibliotek, PRTP.js, bruger mærkefilen til at fremhæve den tekst, der læses.

Indholdet af en dynamisk sideændringer som reaktion på den besøgendes interaktion, så lyd kan ikke forudgenereres, men skal syntetiseres dynamisk. Som den følgende figur viser, når den besøgende afspiller lyden, bruger siden PRTP.js at generere lyden i Amazon Polly, og den fremhæver den syntetiserede lyd ved at bruge samme tilgang som med statiske sider. For at få adgang til AWS-tjenester fra browseren kræver den besøgende en AWS-identitet. Vi viser hvordan man bruger en Amazon Cognito identitetspulje for at give den besøgende lige nok adgang til Amazon Polly og S3-bøtten til at gengive lyden.

Generering af både MP3-lyd- og talemærker kræver, at Polly-tjenesten syntetiserer det samme input to gange. Der henvises til Amazon Polly-prisside at forstå omkostningerne. Pre-generation sparer omkostninger, fordi syntese udføres på byggetidspunktet i stedet for on-demand for hver besøgende interaktion.

Koden, der følger med dette indlæg, er tilgængelig som et open source-lager på GitHub.

For at udforske løsningen følger vi disse trin:

1. Konfigurer ressourcerne, inklusive pre-gen build-serveren, S3-bøtten, webserveren og Amazon Cognito-identiteten.
2. Kør den statiske pre-gen build og test statiske sider.
3. Test dynamiske sider.

Forudsætninger

For at køre dette eksempel skal du bruge en AWS-konto med tilladelse til at bruge Amazon Polly, Amazon S3, Amazon Cognito og (til demoformål) AWS Cloud9.

Tilvejebringelse af ressourcer

Vi deler en AWS CloudFormation skabelon til at oprette et selvstændigt demomiljø på din konto for at hjælpe dig med at følge opslaget. Hvis du foretrækker at opsætte PRTP i dit eget miljø, se instruktionerne i README.md.

For at klargøre demomiljøet ved hjælp af CloudFormation skal du først downloade en kopi af CloudFormation skabelon. Udfør derefter følgende trin:

1. På AWS CloudFormation-konsollen skal du vælge Opret stak.
2. Vælg Med nye ressourcer (standard).
3. Type Upload en skabelonfil.
4. Vælg Vælg fil for at uploade den lokale kopi af skabelonen, som du downloadede. Navnet på filen er prtp.yml.
5. Vælg Næste.
6. Indtast et staknavn efter eget valg. Senere indtaster du dette igen som erstatning for <StackName>.
7. Du kan beholde standardværdier i parametre sektion.
8. Vælg Næste.
9. Fortsæt gennem de resterende sektioner.
10. Læs og marker afkrydsningsfelterne i Capabilities sektion.
11. Vælg Opret stak.
12. Når stakken er færdig, skal du finde værdien for BucketName i stakudgangene.

Vi opfordrer dig til at gennemgå stakken med dit sikkerhedsteam, før du bruger den i et produktionsmiljø.

Konfigurer webserveren og pre-gen-serveren i en AWS Cloud9 IDE

Find derefter miljøet på AWS Cloud9-konsollen PRTPDemoCloud9 oprettet af CloudFormation-stakken. Vælge Åbn IDE for at åbne AWS Cloud9-miljøet. Åbn et terminalvindue og kør følgende kommandoer, som kloner PRTP-koden, opsætter præ-gen-afhængigheder og starter en webserver til at teste med:

#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> 

Til <StackName>, brug det navn, du gav CloudFormation-stakken. Til <IngressCIDR>, angiv en række IP-adresser, der har tilladelse til at få adgang til webserveren. For at begrænse adgangen til browseren på din lokale maskine skal du finde din IP-adresse vha https://whatismyipaddress.com/ og tilføj /32 for at angive området. For eksempel, hvis din IP er 10.2.3.4, use 10.2.3.4/32. Serveren lytter på port 8080. Den offentlige IP-adresse, som serveren lytter til, er angivet i outputtet. For eksempel:

Public IP is

3.92.33.223

Test statiske sider

Naviger til i din browser PRTPStaticDefault.html. (Hvis du bruger demoen, er URL'en http://<cloud9host>:8080/web/PRTPStaticDefault.htmlHvor <cloud9host> er den offentlige IP-adresse, som du opdagede ved opsætning af IDE.) Vælg Leg på lydkontrollen øverst. Lyt til lyden og se højdepunkterne. Udforsk kontrollen ved at ændre hastigheder, ændre stemmer, sætte på pause, spole frem og tilbage. Følgende skærmbillede viser siden; teksten "Spor over skjult afsnit" er fremhævet, fordi den er ved at blive læst.

Prøv det samme for PRTPStaticConfig.html , PRTPStaticCustom.html. Resultaterne er ens. For eksempel læste alle tre alt-teksten til billedet af katten ("Tilfældigt billede af en kat"). Alle tre læser NE, NW, SE og SW som fulde ord ("nordøst", "nordvest", "sydøst", "sydvest"), idet de udnytter Amazon Polly-leksikonerne.

Bemærk de vigtigste forskelle i lyd:

• PRTPStaticDefault.html læser hele teksten i brødteksten på siden, inklusive afslutningsdelen nederst med "Dine tanker i ét ord", "Send forespørgsel", "Sidst opdateret 1. april 2020" og "Spørgsmål til udviklerteamet". PRTPStaticConfig.html , PRTPStaticCustom.html læs ikke disse, fordi de eksplicit udelukker wrapup fra talesyntese.
• PRTPStaticCustom.html læser QB Bestsellere bord anderledes end de andre. Den læser kun de første tre rækker og læser rækkenummeret for hver række. Det gentager kolonnerne for hver række. PRTPStaticCustom.html bruger en tilpasset transformation til at skræddersy udlæsningen af ​​tabellen. De andre sider bruger standard tabelgengivelse.
• PRTPStaticCustom.html læser "Tom Brady" med en højere lydstyrke end resten af ​​teksten. Den bruger talesyntese-markeringssproget (SSML) prosody tag for at skræddersy læsningen af ​​Tom Brady. De andre sider skræddersyes ikke på denne måde.
• PRTPStaticCustom.html, takket være en tilpasset transformation, læser de vigtigste fliser i NW, SW, NE, SE rækkefølge; det vil sige, at der står "Dagens artikler", "Dagens citat", "Dagens foto", "Dagens vittigheder." De andre sider læses i den rækkefølge, fliserne vises i den naturlige NW, NE, SW, SE rækkefølge, de vises i HTML: "Dagens artikler", "Dagens foto", "Dagens citat", "Jokes of the Dag."

Lad os grave dybere ned i, hvordan lyden genereres, og hvordan siden fremhæver teksten.

Statisk forgenerator

Vores GitHub-repo inkluderer præ-genererede lydfiler til PRPTStatic sider, men hvis du vil generere dem selv, fra bash-skallen i AWS Cloud9 IDE, skal du køre følgende kommandoer:

# 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

Lad os nu se på, hvordan disse scripts fungerer.

Standard sag

Vi begynder med 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

Scriptet starter med at køre Python-programmet FixHTML.py for at lave HTML-kildefilen PRTPStaticDefault.html velformet. Den skriver den velformede version af filen til example/tmp_wff.html. Dette trin er afgørende af to grunde:

• Det meste af kilde-HTML er ikke veludformet. Dette trin reparerer kilde-HTML til at være velformet. For eksempel lukker mange HTML-sider ikke P elementer. Dette trin lukker dem.
• Vi holder styr på, hvor på HTML-siden vi finder tekst. Vi skal spore placeringer ved hjælp af den samme dokumentobjektmodel (DOM) struktur, som browseren bruger. For eksempel tilføjer browseren automatisk en TBODY til en TABLE. Python-programmet følger de samme velformede reparationer som browseren.

gen_ssml.sh tager den velformede HTML som input, anvender en XML-stylesheet-transformation (XSLT)-transformation til den og udsender en SSML-fil. (SSML er sproget i Amazon Polly til at kontrollere, hvordan lyd gengives fra tekst.) I det aktuelle eksempel er inputtet example/tmp_wff.html. Udgangen er example/tmp.ssml. Transformationens opgave er at beslutte, hvilken tekst der skal udtrækkes fra HTML og feed til Amazon Polly. generic.xslt er en fornuftig standard XSLT-transformation for de fleste websider. I det følgende eksempelkodestykke ekskluderer det lydstyringen, HTML-headeren samt HTML-elementer som f.eks. script , form. Det udelukker også elementer med den skjulte attribut. Det omfatter elementer, der typisk indeholder tekst, som f.eks P, H1og SPAN. For disse gengiver det både et mærke, inklusive det fulde XPath-udtryk for elementet, og værdien af ​​elementet.

<!-- 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>

Det følgende er et uddrag af den SSML, der gengives. Dette føres som input til Amazon Polly. Bemærk f.eks., at teksten "Springer skjult afsnit over" skal læses i lyden, og vi forbinder den med et mærke, som fortæller os, at denne tekst forekommer på det sted på siden givet af XPath-udtrykket /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>

For at generere lyd i Amazon Polly kalder vi scriptet run_polly.sh. Den kører AWS kommandolinjegrænseflade (AWS CLI) kommando aws polly start-speech-synthesis-task to gange: én gang for at generere MP3-lyd og igen for at generere mærkefilen. Fordi generationen er asynkron, poller scriptet, indtil det finder output i den angivne S3-bøtte. Når den finder outputtet, downloader den til build-serveren og kopierer filerne til web/polly folder. Følgende er en liste over webmapperne:

• 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

Hver side har sit eget sæt stemmespecifikke MP3 og markerer filer. Disse filer er de forudgenererede filer. Siden behøver ikke at kalde Amazon Polly under kørsel; filerne er en del af web buildet.

Konfigurationsdrevet etui

Dernæst overveje 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

Scriptet ligner scriptet i standardcase, men de fed linjer angiver hovedforskellen. Vores tilgang er konfigurationsdrevet. Vi skræddersyer det indhold, der skal udtrækkes fra siden, ved at specificere, hvad der skal udtrækkes gennem konfiguration, ikke kode. Vi bruger især JSON-filen transform_config.json, som specificerer, at indholdet, der skal inkluderes, er elementerne med ID'er title, main, maintableog qbtable. Elementet med ID wrapup bør udelukkes. Se følgende kode:

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

Vi kører Python-programmet ModGenericXSLT.py at ændre generic.xslt, brugt i standardtilfældet, for at bruge de inkluderinger og ekskluderinger, som vi angiver i transform_config.json. Programmet skriver resultaterne til en midlertidig fil (example/tmp.xslt), som den går videre til gen_ssml.sh som sin XSLT-transformation.

Dette er en lav kode mulighed. Webudgiveren behøver ikke at vide, hvordan man skriver XSLT. Men de har brug for at forstå strukturen af ​​HTML-siden og de id'er, der bruges i dens vigtigste organiserende elementer.

Tilpasningsetui

Overvej til sidst 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

Dette script er næsten identisk med standardscriptet, bortset fra at det bruger sit eget XSLT—example/custom.xslt— i stedet for den generiske XSLT. Følgende er et uddrag af 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>

Hvis du ønsker at studere koden i detaljer, se scripts og programmer i GitHub-repoen.

Browseropsætning og højdepunkter

De statiske sider inkluderer en HTML5-lydkontrol, som tager den MP3-fil, der er genereret af Amazon Polly og findes på webserveren som sin lydkilde:

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

Ved indlæsningstidspunktet indlæser siden også den Amazon Polly-genererede marks-fil. Dette sker i PRTP.js fil, som HTML-siden indeholder. Det følgende er et uddrag af mærkefilen for 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”}

Under lydafspilning er der en lydtimerhændelseshandler i PRTP.js der tjekker lydens aktuelle tid, finder teksten, der skal fremhæves, finder dens placering på siden og fremhæver den. Den tekst, der skal fremhæves, er en indtastning af typen sentence i mærkefilen. Placeringen er XPath-udtrykket i navneattributten for indgangen af ​​typen SSML, der går forud for sætningen. For eksempel, hvis klokken er 18400, ifølge marks-filen, er sætningen, der skal fremhæves, "Springer skjult afsnit over", som starter ved 18334. Placeringen er SSML-indgangen til tidspunktet 17667: /html/body[1]/div[2]/ul[1]/li[1].

Test dynamiske sider

Siden PRTPDynamic.html demonstrerer dynamisk lydgenlæsning ved hjælp af standard, konfigurationsdrevne og brugerdefinerede lydekstraktionsmetoder.

Standard sag

Naviger til i din browser PRTPDynamic.html. Siden har én forespørgselsparameter, dynOption, som accepterer værdier default, configog custom. Det er standard til default, så du kan udelade det i dette tilfælde. Siden har to sektioner med dynamisk indhold:

• Seneste Artikler – Skifter ofte i løbet af dagen
• Græske filosoffer søger efter dato – Giver den besøgende mulighed for at søge efter græske filosoffer efter dato og viser resultaterne i en tabel

Opret noget indhold i Græsk filosof sektion ved at indtaste et datointerval på -800 til 0, som vist i eksemplet. Vælg derefter Finde.

Afspil nu lyden ved at vælge Leg i lydstyringen.

Bag kulisserne kører siden følgende kode for at gengive og afspille lyden:

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

Først kalder den funktionen buildSSMLFromDefault in PRTP.js at udtrække det meste af teksten fra HTML-sideteksten. Den funktion går rundt i DOM-træet og leder efter tekst i almindelige elementer som f.eks p, h1, pre, spanog td. Den ignorerer tekst i elementer, der normalt ikke indeholder tekst, der skal læses op, som f.eks audio, optionog script. Det bygger SSML-markup til at blive input til Amazon Polly. Det følgende er et uddrag, der viser udtrækning af den første række fra philosopher bord:

<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>

chooseRenderAudio funktion i PRTP.js begynder med at initialisere AWS SDK til Amazon Cognito, Amazon S3 og Amazon Polly. Denne initialisering sker kun én gang. Hvis chooseRenderAudio aktiveres igen, fordi indholdet på siden er ændret, springes initialiseringen over. Se følgende kode:

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()
};

Det genererer MP3-lyd fra Amazon Polly. Genereringen er synkron for små SSML-input og asynkron (med output sendt til S3-bøtten) for store SSML-input (mere end 6,000 tegn). I det synkrone tilfælde beder vi Amazon Polly om at levere MP3-filen ved hjælp af en foruddefineret URL. Når det syntetiserede output er klar, indstiller vi src lydkontrollens attribut til den URL og indlæs kontrolelementet. Vi anmoder derefter om mærkefilen og indlæser den på samme måde som i det statiske tilfælde. Se følgende kode:

// 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);
  });
});

Konfigurationsdrevet etui

Naviger til i din browser PRTPDynamic.html?dynOption=config. Afspil lyden. Lydafspilningen ligner standardsagen, men der er mindre forskelle. Især noget indhold springes over.

Bag kulisserne, når du bruger config mulighed, udtrækker siden indhold anderledes end i standardtilfældet. I standardtilfældet bruger siden buildSSMLFromDefault. I det konfigurationsdrevne tilfælde angiver siden de sektioner, den ønsker at inkludere og ekskludere:

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

buildSSMLFromConfig funktion, defineret i PRTP.js, går i DOM-træet i hver af de sektioner, hvis ID er angivet under inclusions. Den udtrækker indhold fra hver og kombinerer dem i den specificerede rækkefølge for at danne et SSML-dokument. Det udelukker de afsnit, der er angivet under exclusions. Det udtrækker indhold fra hver sektion på samme måde buildSSMLFromDefault udtrækker indhold fra sideteksten.

Tilpasningsetui

Naviger til i din browser PRTPDynamic.html?dynOption=custom. Afspil lyden. Der er tre mærkbare forskelle. Lad os notere disse og overveje den brugerdefinerede kode, der kører bag kulisserne:

• Den aflæser hovedfelterne i NW, SW, NE, SE rækkefølge. Den brugerdefinerede kode henter hver af disse celleblokke fra maintable og tilføjer dem til SSML i NW, SW, NE, SE rækkefølge:

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" bliver sagt højt. Den brugerdefinerede kode placerer "Tom Brady"-tekst i en SSML prosody tag:

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

• Den læser kun de første tre rækker af quarterback-tabellen. Den læser kolonneoverskrifterne for hver række. Tjek koden i GitHub-reposen for at finde ud af, hvordan dette implementeres.

Ryd op

Slet CloudFormation-stakken for at undgå fremtidige gebyrer.

Konklusion

I dette indlæg demonstrerede vi en teknisk løsning på et forretningsproblem af høj værdi: hvordan man bruger Amazon Polly til at læse indholdet af en webside og fremhæve indholdet, mens det bliver læst. Vi viste dette ved hjælp af både statiske og dynamiske sider. For at udtrække indhold fra siden brugte vi DOM-traversal og XSLT. For at lette fremhævelsen brugte vi talemærkefunktionen i Amazon Polly.

Lær mere om Amazon Polly ved at besøge dens service side.

Stil gerne spørgsmål i kommentarerne.

Om forfatterne

Mike Havey er en løsningsarkitekt for AWS med over 25 års erfaring med at bygge virksomhedsapplikationer. Mike er forfatter til to bøger og adskillige artikler. Besøg hans Amazon forfatter side at læse mere.

Vineet Kachhawaha er Solutions Architect hos AWS med ekspertise i machine learning. Han er ansvarlig for at hjælpe kunder med at udforme skalerbare, sikre og omkostningseffektive arbejdsbelastninger på AWS.