Preberite spletne strani in označite vsebino z Amazon Polly

V tej objavi prikazujemo, kako uporabljati Amazon Polly— vodilna storitev v oblaku, ki pretvori besedilo v realen govor — za branje vsebine spletne strani in označevanje vsebine med branjem. Dodajanje predvajanja zvoka spletni strani izboljša dostopnost in izkušnjo obiskovalcev strani. Zvočno izboljšana vsebina je bolj vplivna in nepozabna, pritegne več prometa na stran in izkoristi kupno moč obiskovalcev. Prav tako izboljša blagovno znamko podjetja ali organizacije, ki objavlja stran. S tehnologijo pretvorbe besedila v govor so te poslovne prednosti dosegljive. To pot pospešimo tako, da pokažemo, kako doseči ta cilj z uporabo Amazon Polly.

Ta zmožnost izboljšuje dostopnost za obiskovalce s posebnimi potrebami in bi jo lahko sprejeli kot del strategije dostopnosti vaše organizacije. Prav tako pomembno je, da izboljša izkušnjo strani za obiskovalce brez invalidnosti. Obe skupini imata precejšnjo kupno moč in svobodneje trošita na straneh, ki uporabljajo izboljšavo zvoka, da pritegnejo njihovo pozornost.

Pregled rešitve

PollyReadsThePage (PRTP) – kot mi označujemo rešitev – izdajatelju spletne strani omogoča, da spusti zvočni nadzor na svojo spletno stran. Ko obiskovalec izbere Predvajaj na kontrolniku kontrolnik prebere stran in označi vsebino. PRTP uporablja splošno zmožnost Amazon Polly za sintetiziranje govora iz besedila. Prikliče Amazon Polly, da ustvari dva artefakta za vsako stran:

• Zvočna vsebina v formatu, ki ga predvaja brskalnik: MP3
• Datoteka z govornimi oznakami, ki za vsak stavek besedila označuje:
  • Čas med predvajanjem, ko je stavek prebran
  • Mesto na strani, kjer se pojavi stavek

Ko obiskovalec izbere Predvajaj, brskalnik predvaja datoteko MP3. Med branjem zvoka brskalnik preveri čas, v datoteki z oznakami poišče, kateri stavek naj prebere v tistem trenutku, ga poišče na strani in ga označi.

PRTP omogoča obiskovalcu branje v različnih glasovih in jezikih. Vsak glas zahteva svoj par datotek. PRTP uporablja nevronske glasove. Za seznam podprtih nevronskih glasov in jezikov glejte Nevronski glasovi. Za celoten seznam standardnih in nevronskih glasov v Amazon Polly glejte Glasovi v Amazon Polly.

Upoštevamo dve vrsti spletnih strani: statične in dinamične strani. V statična strani, je vsebina vsebovana znotraj strani in se spremeni šele, ko je objavljena nova različica strani. Podjetje lahko stran posodablja dnevno ali tedensko kot del svojega procesa izdelave spleta. Za to vrsto strani je možno vnaprej ustvariti zvočne datoteke med gradnjo in jih postaviti na spletni strežnik za predvajanje. Kot prikazuje naslednja slika, skript PRTP Pre-Gen prikliče Amazon Polly, da ustvari zvok. Kot vhod vzame samo stran HTML in po želji konfiguracijsko datoteko, ki določa, katero besedilo s strani naj izvleče (Text Extract Config). Če je konfiguracija izvlečka izpuščena, skript pred generiranjem smiselno izbere besedilo za izvleček iz telesa strani. Amazon Polly izpiše datoteke v obliki Preprosta storitev shranjevanja Amazon (Amazon S3) vedro; skript jih kopira na vaš spletni strežnik. Ko obiskovalec predvaja zvok, brskalnik prenese MP3 neposredno s spletnega strežnika. Za poudarke, spustna knjižnica, PRTP.js, uporablja datoteko z oznakami, da označi prebrano besedilo.

Vsebina a dinamično stran se spremeni kot odziv na interakcijo obiskovalca, zato zvoka ni mogoče vnaprej ustvariti, ampak ga je treba sintetizirati dinamično. Kot prikazuje naslednja slika, ko obiskovalec predvaja zvok, stran uporabi PRTP.js za ustvarjanje zvoka v Amazon Polly in poudari sintetiziran zvok z enakim pristopom kot pri statičnih straneh. Za dostop do storitev AWS iz brskalnika obiskovalec potrebuje identiteto AWS. Pokažemo, kako uporabljati an Amazon Cognito identity pool, ki obiskovalcu omogoči dovolj dostopa do Amazon Polly in vedra S3 za upodabljanje zvoka.

Ustvarjanje zvoka MP3 in govornih oznak zahteva, da storitev Polly dvakrat sintetizira isti vnos. Glejte na Stran s cenami Amazon Polly razumeti stroške. Predhodno ustvarjanje prihrani stroške, ker se sinteza izvede v času gradnje in ne na zahtevo za vsako interakcijo obiskovalca.

Koda, ki spremlja to objavo, je na voljo kot odprtokodno skladišče na GitHub.

Za raziskovanje rešitve sledimo tem korakom:

1. Nastavite vire, vključno s strežnikom za gradnjo pred generacijo, vedro S3, spletnim strežnikom in identiteto Amazon Cognito.
2. Zaženite statično gradnjo pred generacijo in preizkusite statične strani.
3. Preizkusite dinamične strani.

Predpogoji

Za zagon tega primera potrebujete AWS račun z dovoljenjem za uporabo Amazon Polly, Amazon S3, Amazon Cognito in (za demo namene) AWS Cloud9.

Sredstva za zagotavljanje

Delimo si Oblikovanje oblaka AWS predlogo, da v svojem računu ustvarite samostojno predstavitveno okolje, ki vam bo pomagalo slediti objavi. Če želite PRTP nastaviti v svojem okolju, glejte navodila v PREBERITE.md.

Če želite omogočiti predstavitveno okolje z uporabo CloudFormation, najprej prenesite kopijo Predloga za oblikovanje v oblaku. Nato izvedite naslednje korake:

1. Na konzoli AWS CloudFormation izberite Ustvari sklad.
2. Izberite Z novimi viri (standardno).
3. Izberite Naložite datoteko predloge.
4. Izberite Izberite datoteko da naložite lokalno kopijo predloge, ki ste jo prenesli. Ime datoteke je prtp.yml.
5. Izberite Naslednji.
6. Vnesite ime sklada po vaši izbiri. Pozneje to znova vnesete kot zamenjavo za <StackName>.
7. Privzete vrednosti lahko obdržite v parametri oddelek.
8. Izberite Naslednji.
9. Nadaljujte skozi preostale razdelke.
10. Preberite in izberite potrditvena polja v Zmogljivosti oddelek.
11. Izberite Ustvari sklad.
12. Ko je sklad končan, poiščite vrednost za BucketName v izhodih sklada.

Svetujemo vam, da sklad pregledate s svojo varnostno ekipo, preden ga uporabite v produkcijskem okolju.

Nastavite spletni strežnik in strežnik pred generacijo v AWS Cloud9 IDE

Nato na konzoli AWS Cloud9 poiščite okolje PRTPDemoCloud9 ustvaril sklad CloudFormation. Izberite Odprite IDE da odprete okolje AWS Cloud9. Odprite terminalsko okno in zaženite naslednje ukaze, ki klonirajo kodo PRTP, nastavijo odvisnosti pred generacijo in zaženejo spletni strežnik za testiranje:

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

za <StackName>, uporabite ime, ki ste ga dali skladu CloudFormation. Za <IngressCIDR>, določite obseg naslovov IP, dovoljenih za dostop do spletnega strežnika. Če želite omejiti dostop do brskalnika na vašem lokalnem računalniku, poiščite svoj naslov IP z uporabo https://whatismyipaddress.com/ in pripni /32 da določite obseg. Na primer, če je vaš IP 10.2.3.4, use 10.2.3.4/32. Strežnik posluša na vratih 8080. Javni naslov IP, na katerem strežnik posluša, je podan v izhodu. Na primer:

Public IP is

3.92.33.223

Preizkusite statične strani

V brskalniku se pomaknite do PRTPStaticDefault.html. (Če uporabljate predstavitev, je URL http://<cloud9host>:8080/web/PRTPStaticDefault.html, Kjer <cloud9host> je javni naslov IP, ki ste ga odkrili pri nastavitvi IDE.) Izberite Predvajaj na upravljalniku zvoka na vrhu. Poslušajte zvok in si oglejte vrhunce. Raziščite upravljanje s spreminjanjem hitrosti, spreminjanjem glasov, premorom, hitrim previjanjem naprej in nazaj. Naslednji posnetek zaslona prikazuje stran; besedilo »Preskoči skriti odstavek« je označeno, ker se trenutno bere.

Poskusite enako za PRTPStaticConfig.html in PRTPStaticCustom.html. Rezultati so podobni. Na primer, vsi trije so prebrali nadomestno besedilo za fotografijo mačke ("Naključna slika mačke"). Vsi trije berejo NE, SZ, JV in JZ kot polne besede (»severovzhod«, »severozahod«, »jugovzhod«, »jugozahod«), pri čemer izkoriščajo leksikone Amazon Polly.

Opazite glavne razlike v zvoku:

• PRTPStaticDefault.html prebere celotno besedilo v telesu strani, vključno z zaključnim delom na dnu z »Vaše misli v eni besedi«, »Pošlji poizvedbo«, »Nazadnje posodobljeno 1. aprila 2020« in »Vprašanja za ekipo razvijalcev«. PRTPStaticConfig.html in PRTPStaticCustom.html ne berite teh, ker izrecno izključujejo zaključek iz sinteze govora.
• PRTPStaticCustom.html bere Najbolje prodajane QB mizo drugačno od ostalih. Prebere samo prve tri vrstice in prebere številko vrstice za vsako vrstico. Ponavlja stolpce za vsako vrstico. PRTPStaticCustom.html uporablja transformacijo po meri za prilagajanje odčitka tabele. Druge strani uporabljajo privzeto upodabljanje tabele.
• PRTPStaticCustom.html bere »Tom Brady« glasneje kot ostalo besedilo. Uporablja označevalni jezik za sintezo govora (SSML) prosody oznako za prilagajanje branja Toma Bradyja. Druge strani niso prilagojene na ta način.
• PRTPStaticCustom.html, zahvaljujoč transformaciji po meri, bere glavne ploščice v SZ, JZ, SV, JV vrstnem redu; to pomeni, da se glasi »Današnji članki«, »Citat dneva«, »Fotografija dneva«, »Šale dneva«. Druge strani se berejo v vrstnem redu, kot so ploščice prikazane v naravnem vrstnem redu SZ, SV, JZ, JV, kot so prikazane v HTML-ju: »Današnji članki«, »Fotografija dneva«, »Citat dneva«, »Šale Dan."

Poglobimo se v to, kako se ustvari zvok in kako stran osvetli besedilo.

Statični predgenerator

Naš repo GitHub vključuje vnaprej ustvarjene zvočne datoteke za PRPTStatic strani, če pa jih želite ustvariti sami, iz lupine bash v AWS Cloud9 IDE zaženite naslednje ukaze:

# 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

Zdaj pa poglejmo, kako ti skripti delujejo.

Privzeta velikost

Začnemo z 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

Skript se začne z zagonom programa Python FixHTML.py za izdelavo izvorne datoteke HTML PRTPStaticDefault.html dobro oblikovana. V datoteko zapiše dobro oblikovano različico example/tmp_wff.html. Ta korak je ključen iz dveh razlogov:

• Večina izvornega HTML-ja ni dobro oblikovana. Ta korak popravi izvorni HTML, da je dobro oblikovan. Na primer, veliko strani HTML se ne zapre P elementi. Ta korak jih zapre.
• Spremljamo, kje na strani HTML najdemo besedilo. Lokacijam moramo slediti z uporabo iste strukture objektnega modela dokumenta (DOM), kot jo uporablja brskalnik. Na primer, brskalnik samodejno doda a TBODY k TABLE. Program Python sledi enakim dobro oblikovanim popravkom kot brskalnik.

gen_ssml.sh kot vhod vzame dobro oblikovan HTML, vanj uporabi transformacijo XML stylesheet (XSLT) in izpiše datoteko SSML. (SSML je jezik v Amazon Polly za nadzor, kako se zvok upodablja iz besedila.) V trenutnem primeru je vnos example/tmp_wff.html. Izhod je example/tmp.ssml. Naloga transformacije je, da se odloči, katero besedilo bo izvlekel iz HTML-ja in posredoval Amazon Polly. generic.xslt je smiselna privzeta transformacija XSLT za večino spletnih strani. V naslednjem primeru delčka kode izključuje zvočni nadzor, glavo HTML in elemente HTML, kot je script in form. Izključuje tudi elemente s skritim atributom. Vključuje elemente, ki običajno vsebujejo besedilo, kot npr P, H1in SPAN. Za te upodobi oznako, vključno s celotnim XPath izrazom elementa, in vrednost elementa.

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

Sledi delček SSML, ki je upodobljen. To se vnese kot vnos v Amazon Polly. Upoštevajte, na primer, da je besedilo »Preskoči skriti odstavek« prebrati v zvoku in ga povežemo z oznako, ki nam pove, da se to besedilo pojavlja na mestu na strani, ki ga določa izraz XPath /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>

Za ustvarjanje zvoka v Amazon Polly pokličemo skript run_polly.sh. Poganja Vmesnik ukazne vrstice AWS (AWS CLI). aws polly start-speech-synthesis-task dvakrat: enkrat za ustvarjanje zvoka MP3 in ponovno za ustvarjanje datoteke z oznakami. Ker je generiranje asinhrono, skript anketira, dokler ne najde izhoda v podanem vedru S3. Ko najde izhod, prenese na gradbeni strežnik in kopira datoteke v web/polly mapo. Sledi seznam spletnih map:

• 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

Vsaka stran ima svoj nabor glasovno specifičnih datotek MP3 in oznak. Te datoteke so vnaprej ustvarjene datoteke. Strani ni treba priklicati Amazon Polly med izvajanjem; datoteke so del spletne zgradbe.

Primer, ki ga poganja konfiguracija

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

Skript je podoben skriptu v privzetem primeru, vendar krepke črte označujejo glavno razliko. Naš pristop temelji na konfiguraciji. Vsebino, ki jo je treba ekstrahirati s strani, prilagodimo tako, da določimo, kaj naj ekstrahiramo s konfiguracijo, ne s kodo. Zlasti uporabljamo datoteko JSON transform_config.json, ki določa, da so vsebine, ki jih je treba vključiti, elementi z ID-ji title, main, maintablein qbtable. Element z ID wrapup je treba izključiti. Oglejte si naslednjo kodo:

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

Poganjamo program Python ModGenericXSLT.py spremeniti generic.xslt, ki se uporablja v privzetem primeru, za uporabo vključitev in izključitev, ki jih določimo v transform_config.json. Program zapiše rezultate v začasno datoteko (example/tmp.xslt), na katero preide gen_ssml.sh kot svojo transformacijo XSLT.

To je možnost nizke kode. Spletnemu izdajatelju ni treba znati napisati XSLT. Vendar pa morajo razumeti strukturo strani HTML in ID-je, uporabljene v njenih glavnih organizacijskih elementih.

Primer za prilagajanje

Na koncu razmislite 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

Ta skript je skoraj enak privzetemu skriptu, le da uporablja lasten XSLT—example/custom.xslt—namesto generičnega XSLT. Sledi delček 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>

Če želite podrobno preučiti kodo, si oglejte skripte in programe v repo GitHub.

Nastavitev brskalnika in poudarki

Statične strani vključujejo zvočni nadzor HTML5, ki kot vir zvoka vzame datoteko MP3, ki jo ustvari Amazon Polly in se nahaja na spletnem strežniku:

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

Ob času nalaganja stran naloži tudi datoteko z oznakami, ki jih je ustvaril Amazon Polly. To se zgodi v PRTP.js datoteko, ki jo vključuje stran HTML. Sledi izrezek datoteke z oznakami za 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”}

Med predvajanjem zvoka je prisoten urejevalnik dogodkov zvočnega časovnika PRTP.js ki preveri trenutni čas zvoka, poišče besedilo, ki ga želite označiti, poišče njegovo lokacijo na strani in ga označi. Besedilo, ki ga želite označiti, je vnos vrste sentence v datoteki z oznakami. Lokacija je izraz XPath v atributu imena vnosa tipa SSML, ki je pred stavkom. Na primer, če je čas 18400, je glede na datoteko z oznakami označen stavek »Preskoči skriti odstavek«, ki se začne pri 18334. Lokacija je vnos SSML ob času 17667: /html/body[1]/div[2]/ul[1]/li[1].

Preizkusite dinamične strani

Stran PRTPDynamic.html prikazuje dinamično branje zvoka z uporabo privzetih, konfiguracijskih in prilagojenih pristopov ekstrakcije zvoka.

Privzeta velikost

V brskalniku se pomaknite do PRTPDynamic.html. Stran ima en parameter poizvedbe, dynOption, ki sprejema vrednosti default, configin custom. Privzeto je nastavljeno na default, zato ga lahko v tem primeru izpustite. Stran ima dva razdelka z dinamično vsebino:

• Najnovejše členov – Čez dan se pogosto spreminja
• Iskanje grških filozofov po datumu – Obiskovalcu omogoča iskanje grških filozofov po datumu in rezultate prikaže v tabeli

Ustvarite nekaj vsebine v grški filozof odsek tako, da vnesete časovno območje od -800 do 0, kot je prikazano v primeru. Potem izberite Najdi.

Zdaj predvajajte zvok tako, da izberete Predvajaj v avdio nadzoru.

V zakulisju stran izvaja naslednjo kodo za upodabljanje in predvajanje zvoka:

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

Najprej pokliče funkcijo buildSSMLFromDefault in PRTP.js da izvlečete večino besedila iz telesa strani HTML. Ta funkcija se sprehaja po drevesu DOM in išče besedilo v običajnih elementih, kot je npr p, h1, pre, spanin td. Ignorira besedilo v elementih, ki običajno ne vsebujejo besedila za branje na glas, kot npr audio, optionin script. Gradi oznako SSML za vnos v Amazon Polly. Sledi izrezek, ki prikazuje ekstrakcijo prve vrstice iz philosopher miza:

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

O chooseRenderAudio deluje v PRTP.js se začne z inicializacijo AWS SDK za Amazon Cognito, Amazon S3 in Amazon Polly. Ta inicializacija se zgodi samo enkrat. če chooseRenderAudio se znova prikliče, ker se je vsebina strani spremenila, inicializacija je preskočena. Oglejte si naslednjo kodo:

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

Ustvari zvok MP3 iz Amazon Polly. Generiranje je sinhrono za majhne vnose SSML in asinhrono (z izhodom, poslanim v vedro S3) za velike vnose SSML (več kot 6,000 znakov). V sinhronem primeru prosimo Amazon Polly, da zagotovi datoteko MP3 z vnaprej podpisanim URL-jem. Ko je sintetiziran izhod pripravljen, nastavimo src atribut zvočnega kontrolnika na ta URL in naložite kontrolnik. Nato zahtevamo datoteko z oznakami in jo naložimo na enak način kot v statičnem primeru. Oglejte si naslednjo kodo:

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

Primer, ki ga poganja konfiguracija

V brskalniku se pomaknite do PRTPDynamic.html?dynOption=config. Predvajaj zvok. Predvajanje zvoka je podobno privzetemu primeru, vendar so manjše razlike. Zlasti nekatere vsebine so preskočene.

V zakulisju, ko uporabljate config stran izvleče vsebino drugače kot v privzetem primeru. V privzetem primeru stran uporablja buildSSMLFromDefault. V primeru, ki ga poganja konfiguracija, stran določa razdelke, ki jih želi vključiti in izključiti:

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

O buildSSMLFromConfig funkcija, opredeljena v PRTP.js, hodi po drevesu DOM v vsakem od razdelkov, katerih ID je naveden pod inclusions. Iz vsakega izvleče vsebino in ju združi skupaj v določenem vrstnem redu, da tvori dokument SSML. Izključuje razdelke, navedene pod exclusions. Izvleče vsebino iz vsakega razdelka na enak način buildSSMLFromDefault izvleče vsebino iz telesa strani.

Primer za prilagajanje

V brskalniku se pomaknite do PRTPDynamic.html?dynOption=custom. Predvajaj zvok. Opazne so tri razlike. Zapomnimo si to in razmislimo o kodi po meri, ki teče v zakulisju:

• Bere glavne ploščice v vrstnem redu SZ, JZ, SV, JV. Koda po meri dobi vsakega od teh celičnih blokov maintable in jih doda v SSML v vrstnem redu SZ, JZ, SV, JV:

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" se izgovori glasno. Koda po meri postavi besedilo »Tom Brady« v SSML prosody oznaka:

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

• Bere le prve tri vrstice tabele branilcev. Prebere naslove stolpcev za vsako vrstico. Preverite kodo v repo GitHub, da ugotovite, kako je to implementirano.

Čiščenje

Da se izognete prihodnjim stroškom, izbrišite sklad CloudFormation.

zaključek

V tej objavi smo prikazali tehnično rešitev za poslovno težavo visoke vrednosti: kako uporabiti Amazon Polly za branje vsebine spletne strani in označevanje vsebine med branjem. To smo pokazali z uporabo statičnih in dinamičnih strani. Za pridobivanje vsebine s strani smo uporabili DOM traversal in XSLT. Za lažje poudarjanje smo uporabili možnost govornih oznak v Amazon Polly.

Izvedite več o Amazon Polly tako, da obiščete servisno stran.

Vas prosimo, da postavite vprašanja v komentarjih.

O avtorjih

Mike Havey je arhitekt rešitev za AWS z več kot 25-letnimi izkušnjami pri gradnji poslovnih aplikacij. Mike je avtor dveh knjig in številnih člankov. Obiščite njegovo Amazonko avtor preberite več.

Vineet Kachhawaha je arhitekt rešitev pri AWS s strokovnim znanjem na področju strojnega učenja. Odgovoren je za pomoč strankam pri načrtovanju razširljivih, varnih in stroškovno učinkovitih delovnih obremenitev na AWS.