Lugege veebilehti ja tõstke sisu esile Amazon Polly abil

Selles postituses näitame, kuidas seda kasutada Amazon Polly– juhtiv pilveteenus, mis teisendab teksti elutruuks kõneks – et lugeda veebilehe sisu ja tõsta sisu lugemise ajal esile. Heli taasesituse lisamine veebilehele parandab lehe juurdepääsetavust ja külastajakogemust. Heliga täiustatud sisu on mõjuvam ja meeldejäävam, tõmbab lehele rohkem liiklust ja mõjutab külastajate ostujõudu. See parandab ka lehte avaldava ettevõtte või organisatsiooni kaubamärki. Kõnesünteesi tehnoloogia muudab need ettevõtte eelised saavutatavaks. Me kiirendame seda teekonda, näidates, kuidas seda eesmärki Amazon Polly abil saavutada.

See võimalus parandab puuetega külastajate juurdepääsetavust ja seda võiks kasutada teie organisatsiooni juurdepääsetavuse strateegia osana. Sama oluline on see, et see parandab puudeta külastajate lehekogemust. Mõlemal rühmal on märkimisväärne kulujõud ja nad kulutavad vabamalt lehtedelt, mis kasutavad nende tähelepanu köitmiseks heliparandusi.

Ülevaade lahendusest

PollyReadsThePage (PRTP) – nagu me lahendusele viitame – võimaldab veebilehe väljaandjal oma veebilehele helijuhtelemendi maha jätta. Kui külastaja valib mängima juhtnupul loeb juhtnupp lehte ja tõstab sisu esile. PRTP kasutab tekstist kõne sünteesimiseks Amazon Polly üldist võimalust. See kutsub Amazon Pollyt genereerima iga lehe jaoks kaks artefakti:

• Heli sisu brauseris esitatavas vormingus: MP3
• Kõnemärkide fail, mis näitab iga tekstilause kohta:
  • Lause lugemise aeg taasesituse ajal
  • Lause asukoht lehel kuvatakse

Kui külastaja valib mängima, esitab brauser MP3-faili. Heli lugemisel kontrollib brauser kellaaega, leiab märgiste failist, millist lauset sel ajal lugeda, otsib selle lehel üles ja tõstab selle esile.

PRTP võimaldab külastajal lugeda erinevates häältes ja keeltes. Iga hääl nõuab oma failipaari. PRTP kasutab närvihääli. Toetatud närvihäälte ja keelte loendi leiate artiklist Neuraalsed hääled. Amazon Polly standard- ja närvihäälte täieliku loendi leiate siit Hääled Amazon Pollys.

Käsitleme kahte tüüpi veebilehti: staatilisi ja dünaamilisi lehti. Sees staatiline lehel sisaldub sisu lehel ja see muutub ainult siis, kui avaldatakse lehe uus versioon. Ettevõte võib oma veebiehitusprotsessi osana lehte värskendada iga päev või kord nädalas. Seda tüüpi lehtede puhul on võimalik helifailid koostamisajal eelgenereerida ja taasesitamiseks veebiserverisse paigutada. Nagu järgmine joonis näitab, skript PRTP Pre-Gen kutsub heli genereerimiseks välja Amazon Polly. See võtab sisendiks HTML-lehe enda ja valikuliselt konfiguratsioonifaili, mis määrab, millist teksti lehelt ekstraktida (Text Extract Config). Kui ekstrakti konfiguratsioon jäetakse välja, teeb genereerimiseelne skript mõistliku tekstivaliku, mida lehe põhiosast eraldada. Amazon Polly väljastab failid an Amazoni lihtne salvestusteenus (Amazon S3) kopp; skript kopeerib need teie veebiserverisse. Kui külastaja esitab heli, laadib brauser MP3 otse veebiserverist alla. Esiletõstetud teegi, PRTP.js, kasutab loetava teksti esiletõstmiseks märgifaili.

Sisu a dünaamiline leht muutub vastavalt külastaja suhtlusele, nii et heli ei saa eelnevalt genereerida, vaid see tuleb dünaamiliselt sünteesida. Nagu järgmine joonis näitab, kui külastaja esitab heli, kasutab leht PRTP.js heli genereerimiseks Amazon Pollys ja tõstab sünteesitud heli esile, kasutades sama lähenemisviisi nagu staatiliste lehtede puhul. AWS-i teenustele brauserist juurdepääsemiseks vajab külastaja AWS-i identiteeti. Näitame, kuidas kasutada a Amazon Cognito identiteedikogum, et võimaldada külastajal heli esitamiseks piisavalt juurdepääsu Amazon Pollyle ja S3 ämbrile.

Nii MP3-heli- kui ka kõnemärkide genereerimiseks peab teenus Polly sünteesima sama sisendi kaks korda. Vaadake Amazon Polly hinnakujundusleht et mõista kulumõjusid. Eelgenereerimine säästab kulusid, sest süntees tehakse pigem ehituse ajal kui iga külastaja interaktsiooni nõudmisel.

Selle postitusega kaasnev kood on saadaval avatud lähtekoodiga hoidlana aadressil GitHub.

Lahenduse uurimiseks toimime järgmiselt.

1. Seadistage ressursid, sealhulgas genereerimiseelne ehitusserver, S3 ämber, veebiserver ja Amazon Cognito identiteet.
2. Käivitage staatiline genereerimiseelne ehitus ja testige staatilisi lehti.
3. Testige dünaamilisi lehti.

Eeldused

Selle näite käivitamiseks vajate AWS-i konto loaga kasutada Amazon Polly, Amazon S3, Amazon Cognito ja (demoeesmärkidel) AWSi pilv.

Varustage ressursse

Jagame an AWS CloudFormation malli, et luua oma kontole iseseisev demokeskkond, mis aitab teil postitust jälgida. Kui eelistate seadistada PRTP-d oma keskkonnas, vaadake juhiseid README.md.

Demokeskkonna loomiseks CloudFormationi abil laadige esmalt alla selle koopia CloudFormationi mall. Seejärel tehke järgmised sammud.

1. Valige AWS CloudFormationi konsoolil Loo virn.
2. Vali Uute ressurssidega (standardne).
3. valima Laadige üles mallifail.
4. Vali Vali fail allalaaditud malli kohaliku koopia üleslaadimiseks. Faili nimi on prtp.yml.
5. Vali järgmine.
6. Sisestage enda valitud virna nimi. Hiljem sisestate selle uuesti asendamiseks .
7. Võite säilitada vaikeväärtused parameetrid sektsiooni.
8. Vali järgmine.
9. Jätkake ülejäänud jaotistega.
10. Lugege läbi ja valige märkeruudud Võimed sektsiooni.
11. Vali Loo virn.
12. Kui virn on valmis, leidke väärtus BucketName pinu väljundites.

Soovitame teil enne selle tootmiskeskkonnas kasutamist virna oma turvameeskonnaga üle vaadata.

Seadistage veebiserver ja genereerimiseelne server AWS Cloud9 IDE-s

Järgmisena leidke AWS Cloud9 konsoolil keskkond PRTPDemoCloud9 loodud CloudFormationi virna poolt. Vali Avage IDE AWS Cloud9 keskkonna avamiseks. Avage terminaliaken ja käivitage järgmised käsud, mis kloonivad PRTP-koodi, seadistavad genereerimiseelsed sõltuvused ja käivitavad testimiseks veebiserveri:

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

eest , kasutage nime, mille andsite CloudFormationi virnale. Sest , määrake IP-aadresside vahemik, millel on juurdepääs veebiserverile. Oma kohaliku masina brauserile juurdepääsu piiramiseks leidke oma IP-aadress kasutades https://whatismyipaddress.com/ ja lisada /32 vahemiku täpsustamiseks. Näiteks kui teie IP on 10.2.3.4, use 10.2.3.4/32. Server kuulab pordil 8080. Väljundis antakse avalik IP-aadress, mida server kuulab. Näiteks:

Public IP is

3.92.33.223

Testige staatilisi lehti

Liikuge brauseris aadressile PRTPStaticDefault.html. (Kui kasutate demo, on URL http://<cloud9host>:8080/web/PRTPStaticDefault.html, Kus on avalik IP-aadress, mille avastasite IDE seadistamisel.) Valige mängima ülaosas olevas helijuhtimisnupul. Kuulake heli ja vaadake tipphetki. Avastage juhtelemente, muutes kiirust, muutes hääli, peatades, edasi- ja tagasikerimise teel. Järgmine ekraanipilt näitab lehte; tekst "Jätab peidetud lõigu vahele" on esile tõstetud, kuna seda praegu loetakse.

Proovige sama jaoks PRTPStaticConfig.html ja PRTPStaticCustom.html. Tulemused on sarnased. Näiteks lugesid kõik kolm kassi foto alternatiivteksti (“Juhuslik kassipilt”). Kõik kolm loevad NE, NW, SE ja SW täissõnadena ("kirde", "loode", "kagu", "edela"), kasutades ära Amazon Polly leksikonid.

Pange tähele heli põhilisi erinevusi:

• PRTPStaticDefault.html loeb kogu lehe põhiteksti, sealhulgas allosas oleva kokkuvõtva osa sõnadega „Teie mõtted ühe sõnaga”, „Esita päring”, „Viimati värskendatud 1. aprill 2020” ja „Küsimused arendusmeeskonnale”. PRTPStaticConfig.html ja PRTPStaticCustom.html ärge lugege neid, sest need välistavad sõnaselgelt rehkenduse kõnesünteesist.
• PRTPStaticCustom.html loeb QB enimmüüdud laud teistest erinevalt. See loeb ainult kolme esimest rida ja loeb iga rea ​​rea ​​numbrit. See kordab iga rea ​​veerge. PRTPStaticCustom.html kasutab tabeli lugemise kohandamiseks kohandatud teisendust. Teised lehed kasutavad tabeli vaikerenderdust.
• PRTPStaticCustom.html loeb “Tom Bradyt” valjemini kui ülejäänud tekst. See kasutab kõnesünteesi märgistuskeelt (SSML) prosody sildi Tom Brady lugemise kohandamiseks. Teised lehed ei ole sellisel viisil kohandatud.
• PRTPStaticCustom.htmltänu kohandatud teisendusele loeb põhipaanid NW, SW, NE, SE järjekorras; see tähendab, et seal on kirjas "Tänased artiklid", "Päeva tsitaat", "Päeva foto", "Päeva naljad". Teised lehed loetakse paanide loomulikus NW, NE, SW, SE järjekorras, nagu need on HTML-is: "Tänased artiklid", "Päeva foto", "Päeva tsitaat", "Päeva naljad". Päev."

Uurime sügavamalt, kuidas heli genereeritakse ja kuidas leht teksti esile tõstab.

Staatiline eelgeneraator

Meie GitHubi repo sisaldab eelgenereeritud helifaile PRPTStatic lehekülgi, kuid kui soovite need ise luua, käivitage AWS Cloud9 IDE bash-shellist järgmised käsud:

# 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

Nüüd vaatame, kuidas need skriptid töötavad.

Vaikimisi juhtum

Alustame sellega 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 algab Pythoni programmi käivitamisega FixHTML.py lähtekoodi HTML-faili loomiseks PRTPStaticDefault.html hästi vormitud. See kirjutab faili hästi vormindatud versiooni example/tmp_wff.html. See samm on ülioluline kahel põhjusel:

• Enamik lähte-HTML-i pole hästi vormitud. See samm parandab lähtekoodi HTML-i vorminguks. Näiteks paljud HTML-lehed ei sulgu P elemendid. See samm sulgeb need.
• Jälgime, kust HTML-lehelt teksti leiame. Peame jälgima asukohti, kasutades sama dokumendiobjekti mudeli (DOM) struktuuri, mida brauser kasutab. Näiteks lisab brauser automaatselt a TBODY kuni TABLE. Pythoni programm järgib samu hästi vormindatud parandusi nagu brauser.

gen_ssml.sh võtab sisendiks hästi vormindatud HTML-i, rakendab sellele XML-laaditabeli teisenduse (XSLT) ja väljastab SSML-faili. (SSML on Amazon Polly keel, mille abil saab juhtida, kuidas tekstist heli renderdatakse.) Praeguses näites on sisend example/tmp_wff.html. Väljund on example/tmp.ssml. Teisenduse ülesanne on otsustada, milline tekst HTML-ist ekstraheerida ja Amazon Pollysse edastada. generic.xslt on mõistlik XSLT vaiketeisendus enamiku veebilehtede jaoks. Järgmises koodilõigu näites välistab see helijuhtelemendi, HTML-i päise ja HTML-i elemendid, nagu script ja form. Samuti välistab see peidetud atribuudiga elemendid. See sisaldab elemente, mis tavaliselt sisaldavad teksti, nt P, H1ja SPAN. Nende jaoks renderdab see nii märgi, sealhulgas elemendi täieliku XPath-avaldise, kui ka elemendi väärtuse.

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

Järgmine on renderdatava SSML-i fragment. See edastatakse sisendina Amazon Pollyle. Pange tähele, et näiteks teksti "Jätab vahele peidetud lõigu" tuleb lugeda helis ja me seostame selle märgiga, mis ütleb meile, et see tekst esineb XPathi avaldisega antud kohas lehel. /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>

Amazon Polly heli loomiseks kutsume skripti run_polly.sh. See juhib AWS-i käsurea liides (AWS CLI) käsk aws polly start-speech-synthesis-task kaks korda: üks kord MP3-heli genereerimiseks ja teine ​​​​märgifaili genereerimiseks. Kuna genereerimine on asünkroonne, küsitleb skript seni, kuni see leiab määratud S3 ämbrist väljundi. Kui see väljundi leiab, laadib see alla ehitusserverisse ja kopeerib failid serverisse web/polly kausta. Järgmine on veebikaustade loend:

• 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

Igal lehel on oma häälespetsiifiliste MP3- ja märgifailide komplekt. Need failid on eelnevalt loodud failid. Leht ei pea käivitamise ajal Amazon Pollyt kutsuma; failid on osa veebiehitusest.

Konfiguratsioonipõhine ümbris

Järgmisena kaaluge 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 sarnaneb vaikejuhtumi skriptiga, kuid rasvased read näitavad peamist erinevust. Meie lähenemisviis on konfiguratsioonipõhine. Kohandame lehelt eraldatava sisu, määrates, mida ekstraktida konfiguratsiooni, mitte koodi kaudu. Eelkõige kasutame JSON-faili transform_config.json, mis määrab, et kaasatav sisu on ID-ga elemendid title, main, maintableja qbtable. ID-ga element wrapup tuleks välistada. Vaadake järgmist koodi:

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

Käitame Pythoni programmi ModGenericXSLT.py modifitseerima generic.xslt, mida kasutatakse vaikejuhtumil, et kasutada meie poolt määratud kaasamisi ja välistusi transform_config.json. Programm kirjutab tulemused ajutisse faili (example/tmp.xslt), millele see edasi läheb gen_ssml.sh selle XSLT teisendusena.

See on madala koodiga valik. Veebiväljaandja ei pea teadma, kuidas XSLT-d kirjutada. Kuid nad peavad mõistma HTML-lehe struktuuri ja selle peamistes korralduselementides kasutatavaid ID-sid.

Kohandamise juhtum

Lõpuks kaaluge 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

See skript on peaaegu identne vaikeskriptiga, välja arvatud see, et see kasutab oma XSLT-d.example/custom.xslt— mitte üldine XSLT. Järgmine on XSLT väljavõte:

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

Kui soovite koodi üksikasjalikult uurida, vaadake GitHubi repos olevaid skripte ja programme.

Brauseri seadistamine ja esiletõstmised

Staatilised lehed sisaldavad HTML5 helijuhti, mille heliallikaks on Amazon Polly loodud MP3-fail, mis asub veebiserveris:

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

Laadimise ajal laadib leht ka Amazon Polly loodud märgifaili. See esineb PRTP.js faili, mida HTML-leht sisaldab. Järgmine on väljavõte märkide failist 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”}

Heli taasesituse ajal on sees helitaimeri sündmuste käitleja PRTP.js mis kontrollib heli praegust aega, leiab esiletõstmiseks vajaliku teksti, leiab selle asukoha lehel ja tõstab selle esile. Esiletõstetav tekst on tüüpi kirje sentence märkide failis. Asukoht on lausele eelneva SSML-tüüpi kirje nimeatribuudis XPathi avaldis. Näiteks kui kellaaeg on 18400, siis vastavalt punktide failile tuleb esile tõsta lause "Jätab vahele peidetud lõigu", mis algab 18334-st. Asukoht on SSML-kirje ajal 17667: /html/body[1]/div[2]/ul[1]/li[1].

Testige dünaamilisi lehti

Lehekülg PRTPDynamic.html demonstreerib dünaamilist heli lugemist, kasutades vaikimisi, konfiguratsioonipõhist ja kohandatud heli eraldamise lähenemisviise.

Vaikimisi juhtum

Liikuge brauseris aadressile PRTPDynamic.html. Lehel on üks päringu parameeter, dynOption, mis aktsepteerib väärtusi default, configja custom. Vaikimisi on see default, nii et võite selle sel juhul ära jätta. Lehel on kaks dünaamilise sisuga jaotist:

• Viimased artiklid - Muutub sageli kogu päeva jooksul
• Kreeka filosoofid otsivad kuupäeva järgi – Võimaldab külastajal otsida Kreeka filosoofe kuupäeva järgi ja kuvab tulemused tabelis

Loo sisu Kreeka filosoof sisestades kuupäevavahemiku -800 kuni 0, nagu on näidatud näites. Seejärel vali leidma.

Nüüd esitage heli, valides mängima helijuhtimispuldis.

Kulisside taga käitab leht heli renderdamiseks ja esitamiseks järgmist koodi:

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

Esiteks kutsub see funktsiooni välja buildSSMLFromDefault in PRTP.js et eraldada suurem osa tekstist HTML-lehe kehast. See funktsioon liigub mööda DOM-puud, otsides teksti ühistes elementides, näiteks p, h1, pre, spanja td. See ignoreerib teksti elementides, mis tavaliselt ei sisalda ettelugetavat teksti, näiteks audio, optionja script. See loob SSML-i märgistuse, mis sisestatakse Amazon Pollysse. Järgmine on väljavõte, mis näitab esimese rea ekstraheerimist philosopher tabelis:

<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 funktsiooni sisse PRTP.js algab AWS SDK initsialiseerimisega Amazon Cognito, Amazon S3 ja Amazon Polly jaoks. See lähtestamine toimub ainult üks kord. Kui chooseRenderAudio kutsutakse uuesti välja, kuna lehe sisu on muutunud, initsialiseerimine jäetakse vahele. Vaadake järgmist koodi:

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

See genereerib Amazon Polly MP3-heli. Genereerimine on sünkroonne väikeste SSML-sisendite jaoks ja asünkroonne (väljundiga, mis saadetakse S3 ämbrisse) suurte SSML-sisendite jaoks (üle 6,000 tähemärgi). Sünkroonsel juhul palume Amazon Pollyl esitada MP3-fail, kasutades eelnevalt allkirjastatud URL-i. Kui sünteesitud väljund on valmis, määrame src helijuhtelemendi atribuut sellele URL-ile ja laadige juhtelement. Seejärel taotleme märgifaili ja laadime selle samamoodi nagu staatilisel juhul. Vaadake järgmist koodi:

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

Konfiguratsioonipõhine ümbris

Liikuge brauseris aadressile PRTPDynamic.html?dynOption=config. Esitage heli. Heli taasesitus sarnaneb vaikejuhtumiga, kuid esineb väiksemaid erinevusi. Eelkõige jäetakse mõni sisu vahele.

Kulisside taga, kui kasutate config suvandi korral eraldab leht sisu teisiti kui vaikejuhtumi korral. Vaikimisi kasutab leht buildSSMLFromDefault. Konfiguratsioonipõhisel juhul määrab leht jaotised, mida ta soovib kaasata ja välistada:

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

. buildSSMLFromConfig funktsioon, määratletud PRTP.js, kõnnib DOM-i puu igas jaotises, mille ID on esitatud inclusions. See eraldab igaühest sisu ja kombineerib need määratud järjekorras kokku, et moodustada SSML-dokument. See ei hõlma all nimetatud jaotisi exclusions. See eraldab sisu igast jaotisest samal viisil buildSSMLFromDefault eraldab sisu lehe kehast.

Kohandamise juhtum

Liikuge brauseris aadressile PRTPDynamic.html?dynOption=custom. Esitage heli. On kolm märgatavat erinevust. Pangem need tähele ja kaaluge kulisside taga töötavat kohandatud koodi:

• See loeb põhiplaate NW, SW, NE, SE järjekorras. Kohandatud kood hangib kõik need lahtriplokid aadressilt maintable ja lisab need SSML-i NW, SW, NE, SE järjekorras:

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" räägitakse valjult. Kohandatud kood lisab SSML-i teksti "Tom Brady". prosody silt:

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

• See loeb ainult tagamängija tabeli kolme esimest rida. See loeb iga rea ​​veerupäised. Kontrollige GitHubi repos olevat koodi, et teada saada, kuidas seda rakendatakse.

Koristage

Tulevaste tasude vältimiseks kustutage CloudFormationi virn.

Järeldus

Selles postituses demonstreerisime tehnilist lahendust suure väärtusega äriprobleemile: kuidas kasutada Amazon Pollyt veebilehe sisu lugemiseks ja lugemise ajal sisu esiletõstmiseks. Näitasime seda nii staatiliste kui ka dünaamiliste lehtede abil. Lehelt sisu eraldamiseks kasutasime DOM-i läbimist ja XSLT-d. Esiletõstmise hõlbustamiseks kasutasime Amazon Polly kõnemärkide võimalust.

Lisateavet Amazon Polly kohta leiate selle veebisaidilt teenuse leht.

Küsige julgelt küsimusi kommentaarides.

Autoritest

Mike Havey on AWS-i lahenduste arhitekt, kellel on üle 25-aastane kogemus ettevõtete rakenduste loomisel. Mike on kahe raamatu ja paljude artiklite autor. Külastage tema Amazoni autori leht lugema rohkem.

Vineet Kachhawaha on AWS-i lahenduste arhitekt, kellel on masinõppe alased teadmised. Ta vastutab selle eest, et aidata klientidel luua AWS-is skaleeritavaid, turvalisi ja kulutõhusaid töökoormusi.