Les nettsider og fremhev innhold ved hjelp av Amazon Polly

I dette innlegget viser vi hvordan du bruker Amazon Polly– en ledende skytjeneste som konverterer tekst til naturtro tale – for å lese innholdet på en nettside og fremheve innholdet mens det leses. Å legge til lydavspilling på en nettside forbedrer tilgjengeligheten og besøkendes opplevelse av siden. Lydforbedret innhold er mer effektfullt og minneverdig, trekker mer trafikk til siden og utnytter forbrukskraften til besøkende. Det forbedrer også merkevaren til selskapet eller organisasjonen som publiserer siden. Tekst-til-tale-teknologi gjør disse forretningsfordelene oppnåelige. Vi akselererer denne reisen ved å demonstrere hvordan vi kan nå dette målet ved å bruke Amazon Polly.

Denne funksjonen forbedrer tilgjengeligheten for besøkende med funksjonshemninger, og kan tas i bruk som en del av organisasjonens tilgjengelighetsstrategi. Like viktig er det at det forbedrer sideopplevelsen for besøkende uten funksjonshemminger. Begge gruppene har betydelig kjøpekraft og bruker mer fritt fra sider som bruker lydforbedring for å fange oppmerksomheten deres.

Oversikt over løsning

PollyReadsThePage (PRTP) – som vi refererer til løsningen – lar en nettsideutgiver slippe en lydkontroll på nettsiden sin. Når den besøkende velger Spille på kontrollen leser kontrollen siden og fremhever innholdet. PRTP bruker den generelle muligheten til Amazon Polly til å syntetisere tale fra tekst. Den påkaller Amazon Polly for å generere to artefakter for hver side:

• Lydinnholdet i et format som kan spilles av i nettleseren: MP3
• En talemerkingsfil som indikerer for hver setning med tekst:
  • Tiden under avspilling da setningen leses
  • Plasseringen på siden setningen vises

Når den besøkende velger Spille, spiller nettleseren MP3-filen. Når lyden leses, sjekker nettleseren klokkeslettet, finner i marks-filen hvilken setning som skal leses på det tidspunktet, finner den på siden og fremhever den.

PRTP lar besøkende lese på forskjellige stemmer og språk. Hver stemme krever sitt eget par med filer. PRTP bruker nevrale stemmer. For en liste over støttede nevrale stemmer og språk, se Nevrale stemmer. For en fullstendig liste over standard- og nevrale stemmer i Amazon Polly, se Stemmer i Amazon Polly.

Vi vurderer to typer nettsider: statiske og dynamiske sider. I en statisk siden, er innholdet på siden og endres kun når en ny versjon av siden publiseres. Selskapet kan oppdatere siden daglig eller ukentlig som en del av nettbyggingsprosessen. For denne typen side er det mulig å forhåndsgenerere lydfilene på byggetidspunktet og plassere dem på webserveren for avspilling. Som følgende figur viser, skriptet PRTP Pre-Gen påkaller Amazon Polly for å generere lyden. Den tar som input selve HTML-siden og eventuelt en konfigurasjonsfil som spesifiserer hvilken tekst fra siden som skal trekkes ut (Text Extract Config). Hvis uttrekkskonfigurasjonen utelates, gjør pre-gen-skriptet et fornuftig valg av tekst som skal trekkes ut fra brødteksten på siden. Amazon Polly sender ut filene i en Amazon enkel lagringstjeneste (Amazon S3) bøtte; skriptet kopierer dem til webserveren din. Når den besøkende spiller av lyden, laster nettleseren ned MP3-en direkte fra webserveren. For høydepunkter, et drop-in-bibliotek, PRTP.js, bruker marks-filen til å markere teksten som leses.

Innholdet i en dynamisk siden endres som svar på den besøkendes interaksjon, så lyd kan ikke forhåndsgenereres, men må syntetiseres dynamisk. Som følgende figur viser, når den besøkende spiller av lyden, bruker siden PRTP.js å generere lyden i Amazon Polly, og den fremhever den syntetiserte lyden ved å bruke samme tilnærming som med statiske sider. For å få tilgang til AWS-tjenester fra nettleseren, krever den besøkende en AWS-identitet. Vi viser hvordan du bruker en Amazon Cognito identitetspool for å gi den besøkende akkurat nok tilgang til Amazon Polly og S3-bøtta til å gjengi lyden.

Generering av både MP3-lyd- og talemerker krever at Polly-tjenesten syntetiserer den samme inngangen to ganger. Referere til Prisside for Amazon Polly for å forstå kostnadsimplikasjoner. Pre-generering sparer kostnader fordi syntese utføres på byggetidspunktet i stedet for på forespørsel for hver besøkende interaksjon.

Koden som følger med dette innlegget er tilgjengelig som et åpen kildekodedepot på GitHub.

For å utforske løsningen følger vi disse trinnene:

1. Sett opp ressursene, inkludert pre-gen build-serveren, S3-bøtten, webserveren og Amazon Cognito-identiteten.
2. Kjør den statiske pre-gen build og test statiske sider.
3. Test dynamiske sider.

Forutsetninger

For å kjøre dette eksemplet trenger du en AWS-konto med tillatelse til å bruke Amazon Polly, Amazon S3, Amazon Cognito og (for demoformål) AWS Cloud9.

Tilførselsressurser

Vi deler en AWS skyformasjon mal for å lage et selvstendig demomiljø på kontoen din for å hjelpe deg med å følge innlegget. Hvis du foretrekker å sette opp PRTP i ditt eget miljø, se instruksjonene i README.md.

For å klargjøre demomiljøet ved hjelp av CloudFormation, last først ned en kopi av CloudFormation-mal. Fullfør deretter følgende trinn:

1. Velg på AWS CloudFormation-konsollen Lag stabel.
2. Velg Med nye ressurser (standard).
3. Plukke ut Last opp en malfil.
4. Velg Velg Fil for å laste opp den lokale kopien av malen du lastet ned. Navnet på filen er prtp.yml.
5. Velg neste.
6. Skriv inn et stabelnavn du velger. Senere legger du inn denne igjen som erstatning for <StackName>.
7. Du kan beholde standardverdier i parametere seksjon.
8. Velg neste.
9. Fortsett gjennom de resterende delene.
10. Les og merk av i avmerkingsboksene i Ekspertiser seksjon.
11. Velg Lag stabel.
12. Når stabelen er fullført, finn verdien for BucketName i stabelutgangene.

Vi oppfordrer deg til å gjennomgå stabelen med sikkerhetsteamet ditt før du bruker den i et produksjonsmiljø.

Sett opp webserveren og pre-gen serveren i en AWS Cloud9 IDE

Deretter, på AWS Cloud9-konsollen, finn miljøet PRTPDemoCloud9 opprettet av CloudFormation-stakken. Velge Åpne IDE for å åpne AWS Cloud9-miljøet. Åpne et terminalvindu og kjør følgende kommandoer, som kloner PRTP-koden, setter opp pre-gen-avhengigheter og starter en webserver å 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>, bruk navnet du ga CloudFormation-stakken. Til <IngressCIDR>, spesifiser en rekke IP-adresser som har tilgang til webserveren. For å begrense tilgangen til nettleseren på din lokale maskin, finn din IP-adresse ved å bruke https://whatismyipaddress.com/ og legg til /32 for å spesifisere 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-adressen som serveren lytter til, er gitt i utgangen. For eksempel:

Public IP is

3.92.33.223

Test statiske sider

Naviger til i nettleseren din PRTPStaticDefault.html. (Hvis du bruker demoen, er nettadressen http://<cloud9host>:8080/web/PRTPStaticDefault.html, Hvor <cloud9host> er den offentlige IP-adressen du oppdaget da du satte opp IDE.) Velg Spille på lydkontrollen øverst. Lytt til lyden og se høydepunktene. Utforsk kontrollen ved å endre hastigheter, endre stemmer, pause, spole fremover og tilbake. Følgende skjermbilde viser siden; teksten "Hopper over skjult avsnitt" er uthevet fordi den leses.

Prøv det samme for PRTPStaticConfig.html og PRTPStaticCustom.html. Resultatene er like. For eksempel leste alle tre alt-teksten til bildet av katten ("Tilfeldig bilde av en katt"). Alle tre leser NE, NW, SE og SW som fullstendige ord ("nordøst", "nordvest", "sørøst", "sørvest"), og utnytter Amazon Polly-leksikonene.

Legg merke til hovedforskjellene i lyd:

• PRTPStaticDefault.html leser all teksten i brødteksten på siden, inkludert avslutningsdelen nederst med «Dine tanker i ett ord», «Send inn forespørsel», «Sist oppdatert 1. april 2020» og «Spørsmål til utviklerteamet». PRTPStaticConfig.html og PRTPStaticCustom.html ikke les disse fordi de eksplisitt ekskluderer avslutningen fra talesyntese.
• PRTPStaticCustom.html leser QB bestselgere bord annerledes enn de andre. Den leser kun de tre første radene, og leser radnummeret for hver rad. Den gjentar kolonnene for hver rad. PRTPStaticCustom.html bruker en tilpasset transformasjon for å skreddersy avlesningen av tabellen. De andre sidene bruker standard tabellgjengivelse.
• PRTPStaticCustom.html leser «Tom Brady» med et høyere volum enn resten av teksten. Den bruker SSML (Speech Synthesis Markup Language) prosody tag for å skreddersy lesningen av Tom Brady. De andre sidene skreddersys ikke på denne måten.
• PRTPStaticCustom.html, takket være en tilpasset transformasjon, leser hovedflisene i NW, SW, NE, SE rekkefølge; det vil si at det står «Dagens artikler», «Dagens sitat», «Dagens bilde», «Dagens vitser». De andre sidene leses i den rekkefølgen flisene vises i den naturlige NW, NE, SW, SE-rekkefølgen de vises i HTML: «Dagens artikler», «Dagens bilde», «Dagens sitat», «Jokes of the Dag."

La oss grave dypere inn i hvordan lyden genereres, og hvordan siden fremhever teksten.

Statisk pre-generator

GitHub-repoen vår inkluderer forhåndsgenererte lydfiler for PRPTStatic sider, men hvis du vil generere dem selv, fra bash-skallet i AWS Cloud9 IDE, kjør 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

La oss nå se på hvordan disse skriptene fungerer.

Standard sak

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

Skriptet begynner med å kjøre Python-programmet FixHTML.py for å lage HTML-kildefilen PRTPStaticDefault.html velformet. Den skriver den velutformede versjonen av filen til example/tmp_wff.html. Dette trinnet er avgjørende av to grunner:

• De fleste kilde-HTML er ikke godt utformet. Dette trinnet reparerer kilde-HTML for å være godt utformet. Mange HTML-sider lukkes for eksempel ikke P elementer. Dette trinnet lukker dem.
• Vi holder styr på hvor på HTML-siden vi finner tekst. Vi må spore plasseringer ved å bruke samme dokumentobjektmodell (DOM) struktur som nettleseren bruker. For eksempel legger nettleseren automatisk til en TBODY til en TABLE. Python-programmet følger de samme velformede reparasjonene som nettleseren.

gen_ssml.sh tar den velformede HTML-en som input, bruker en XML-stilarktransformasjon (XSLT)-transformasjon på den, og sender ut en SSML-fil. (SSML er språket i Amazon Polly for å kontrollere hvordan lyd gjengis fra tekst.) I det gjeldende eksemplet er inngangen example/tmp_wff.html. Utgangen er example/tmp.ssml. Transformasjonens jobb er å bestemme hvilken tekst som skal trekkes ut fra HTML-en og sendes til Amazon Polly. generic.xslt er en fornuftig standard XSLT-transformasjon for de fleste nettsider. I den følgende eksempelkodebiten ekskluderer den lydkontrollen, HTML-overskriften, samt HTML-elementer som script og form. Den ekskluderer også elementer med det skjulte attributtet. Den inkluderer elementer som vanligvis inneholder tekst, som f.eks P, H1og SPAN. For disse gjengir den både et merke, inkludert hele XPath-uttrykket for elementet, og verdien av 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>

Følgende er et utdrag av SSML som gjengis. Dette mates som input til Amazon Polly. Legg for eksempel merke til at teksten "Hopper over skjult avsnitt" skal leses i lyden, og vi forbinder den med et merke som forteller oss at denne teksten forekommer på stedet på siden gitt av XPath-uttrykket /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 å generere lyd i Amazon Polly kaller vi scriptet run_polly.sh. Den kjører AWS kommandolinjegrensesnitt (AWS CLI) kommando aws polly start-speech-synthesis-task to ganger: én gang for å generere MP3-lyd, og igjen for å generere merkefilen. Fordi generasjonen er asynkron, spør skriptet til det finner utdata i den angitte S3-bøtten. Når den finner utdataene, laster den ned til byggeserveren og kopierer filene til web/polly mappe. Følgende er en liste over nettmappene:

• 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 sitt eget sett med stemmespesifikke MP3 og merker filer. Disse filene er de forhåndsgenererte filene. Siden trenger ikke å påkalle Amazon Polly under kjøring; filene er en del av nettbyggingen.

Konfigurasjonsdrevet etui

Neste, vurder 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

Skriptet ligner på skriptet i standard tilfelle, men de uthevede linjene indikerer hovedforskjellen. Vår tilnærming er konfigurasjonsdrevet. Vi skreddersyr innholdet som skal trekkes ut fra siden ved å spesifisere hva som skal trekkes ut gjennom konfigurasjon, ikke kode. Spesielt bruker vi JSON-filen transform_config.json, som spesifiserer at innholdet som skal inkluderes er elementene med IDer title, main, maintableog qbtable. Elementet med ID wrapup bør utelukkes. Se følgende kode:

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

Vi kjører Python-programmet ModGenericXSLT.py å modifisere generic.xslt, brukt i standardtilfellet, for å bruke inkluderingene og ekskluderingene som vi spesifiserer i transform_config.json. Programmet skriver resultatene til en midlertidig fil (example/tmp.xslt), som den går over til gen_ssml.sh som sin XSLT-transformasjon.

Dette er et alternativ med lav kode. Nettutgiveren trenger ikke å vite hvordan man skriver XSLT. Men de trenger å forstå strukturen til HTML-siden og ID-ene som brukes i hovedorganiseringselementene.

Tilpasningssak

Til slutt, vurder 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 skriptet er nesten identisk med standardskriptet, bortsett fra at det bruker sin egen XSLT—example/custom.xslt– i stedet for den generiske XSLT. Følgende er et utdrag av 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 vil studere koden i detalj, se skriptene og programmene i GitHub-repoen.

Nettleseroppsett og høydepunkter

De statiske sidene inkluderer en HTML5-lydkontroll, som tar som lydkilde MP3-filen generert av Amazon Polly og ligger på webserveren:

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

Ved innlastingstid laster siden også den Amazon Polly-genererte merkefilen. Dette skjer i PRTP.js fil, som HTML-siden inkluderer. Følgende er et utdrag av merkefilen 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 lydavspilling er det en lydtimer hendelsesbehandler i PRTP.js som sjekker lydens gjeldende tid, finner teksten som skal utheves, finner plasseringen på siden og fremhever den. Teksten som skal utheves er en type oppføring sentence i merkefilen. Plasseringen er XPath-uttrykket i navneattributtet til oppføringen av typen SSML som kommer foran setningen. For eksempel, hvis klokken er 18400, i henhold til marks-filen, er setningen som skal utheves "Hopper over skjult avsnitt", som starter på 18334. Plasseringen er SSML-oppføringen på tidspunktet 17667: /html/body[1]/div[2]/ul[1]/li[1].

Test dynamiske sider

Siden PRTPDynamic.html demonstrerer dynamisk lydavlesning ved å bruke standard, konfigurasjonsdrevne og tilpassede lydutvinningsmetoder.

Standard sak

Naviger til i nettleseren din PRTPDynamic.html. Siden har én søkeparameter, dynOption, som aksepterer verdier default, configog custom. Den er standard til default, så du kan utelate det i dette tilfellet. Siden har to deler med dynamisk innhold:

• Siste artikler – Skifter ofte i løpet av dagen
• Greske filosofer Søk etter dato – Lar besøkende søke etter greske filosofer etter dato og viser resultatene i en tabell

Lag noe innhold i gresk filosof seksjonen ved å angi et datoområde på -800 til 0, som vist i eksempelet. Velg deretter Finn.

Spill nå av lyden ved å velge Spille i lydkontrollen.

Bak kulissene kjører siden følgende kode for å gjengi og spille av lyden:

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

Først kaller den funksjonen buildSSMLFromDefault in PRTP.js for å trekke ut mesteparten av teksten fra HTML-sideteksten. Denne funksjonen går gjennom DOM-treet og leter etter tekst i vanlige elementer som p, h1, pre, spanog td. Den ignorerer tekst i elementer som vanligvis ikke inneholder tekst som skal leses opp, som f.eks audio, optionog script. Den bygger SSML-markering for å være input til Amazon Polly. Følgende er et utdrag som viser uttrekk av den første raden fra philosopher tabell:

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

De chooseRenderAudio fungere i PRTP.js begynner med å initialisere AWS SDK for Amazon Cognito, Amazon S3 og Amazon Polly. Denne initialiseringen skjer bare én gang. Hvis chooseRenderAudio påkalles igjen fordi innholdet på siden har endret seg, blir initialiseringen hoppet 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()
};

Den genererer MP3-lyd fra Amazon Polly. Genereringen er synkron for små SSML-innganger og asynkron (med utgang sendt til S3-bøtten) for store SSML-innganger (mer enn 6,000 tegn). I det synkrone tilfellet ber vi Amazon Polly om å gi MP3-filen ved å bruke en forhåndsdefinert URL. Når den syntetiserte utgangen er klar, setter vi inn src attributtet til lydkontrollen til den URL-en og last inn kontrollen. Vi ber så om merkefilen og laster den på samme måte som i det statiske tilfellet. 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);
  });
});

Konfigurasjonsdrevet etui

Naviger til i nettleseren din PRTPDynamic.html?dynOption=config. Spill av lyden. Lydavspillingen ligner på standardsaken, men det er mindre forskjeller. Spesielt er noe innhold hoppet over.

Bak kulissene, når du bruker config alternativet trekker siden ut innhold annerledes enn i standardtilfellet. I standardtilfellet bruker siden buildSSMLFromDefault. I det konfigurasjonsdrevne tilfellet spesifiserer siden delene den vil inkludere og ekskludere:

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

De buildSSMLFromConfig funksjon, definert i PRTP.js, går gjennom DOM-treet i hver av seksjonene som har ID-en til under inclusions. Den trekker ut innhold fra hver og kombinerer dem sammen, i den angitte rekkefølgen, for å danne et SSML-dokument. Den ekskluderer seksjonene spesifisert under exclusions. Den trekker ut innhold fra hver seksjon på samme måte buildSSMLFromDefault trekker ut innhold fra sideteksten.

Tilpasningssak

Naviger til i nettleseren din PRTPDynamic.html?dynOption=custom. Spill av lyden. Det er tre merkbare forskjeller. La oss legge merke til disse og vurdere den tilpassede koden som kjører bak kulissene:

• Den leser hovedflisene i NW, SW, NE, SE rekkefølge. Den tilpassede koden henter hver av disse celleblokkene fra maintable og legger dem til SSML i NW, SW, NE, SE rekkefø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» blir sagt høyt. Den tilpassede koden plasserer "Tom Brady"-tekst i en SSML prosody stikkord:

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

• Den leser bare de tre første radene i quarterback-tabellen. Den leser kolonneoverskriftene for hver rad. Sjekk koden i GitHub-repoen for å finne ut hvordan dette implementeres.

Rydd opp

For å unngå fremtidige kostnader, slett CloudFormation-stabelen.

konklusjonen

I dette innlegget demonstrerte vi en teknisk løsning på et forretningsproblem med høy verdi: hvordan bruke Amazon Polly til å lese innholdet på en nettside og fremheve innholdet mens det leses. Vi viste dette ved hjelp av både statiske og dynamiske sider. For å trekke ut innhold fra siden brukte vi DOM-traversal og XSLT. For å lette fremheving brukte vi talemerkefunksjonen i Amazon Polly.

Lær mer om Amazon Polly ved å besøke dens tjenesteside.

Still gjerne spørsmål i kommentarfeltet.

Om forfatterne

Mike Havey er en løsningsarkitekt for AWS med over 25 års erfaring med å bygge bedriftsapplikasjoner. Mike er forfatter av to bøker og en rekke artikler. Besøk hans Amazon forfatterside å lese mer.

Vineet Kachhawaha er løsningsarkitekt hos AWS med ekspertise innen maskinlæring. Han er ansvarlig for å hjelpe kundene med å utforme skalerbare, sikre og kostnadseffektive arbeidsbelastninger på AWS.