Lue verkkosivuja ja korosta sisältöä Amazon Pollylla

Tässä viestissä esittelemme, miten sitä käytetään Amazon Polly– johtava pilvipalvelu, joka muuntaa tekstin todenmukaiseksi puheeksi. Voit lukea verkkosivun sisällön ja korostaa sisältöä sitä luettaessa. Äänentoiston lisääminen verkkosivulle parantaa sivun käytettävyyttä ja vierailijakokemusta. Äänitehostettu sisältö on vaikuttavampi ja mieleenpainuvampi, houkuttelee enemmän liikennettä sivulle ja hyödyntää vierailijoiden ostovoimaa. Se myös parantaa sivua julkaisevan yrityksen tai organisaation brändiä. Tekstistä puheeksi -teknologian ansiosta nämä liiketoimintaedut ovat saavutettavissa. Nopeutamme tätä matkaa osoittamalla, kuinka tämä tavoite saavutetaan Amazon Pollyn avulla.

Tämä ominaisuus parantaa vammaisten vierailijoiden saavutettavuutta, ja se voitaisiin ottaa käyttöön osana organisaatiosi esteettömyysstrategiaa. Yhtä tärkeää on, että se parantaa sivukokemusta vierailijoille, joilla ei ole vammoja. Molemmilla ryhmillä on huomattava ostovoima, ja ne käyttävät vapaammin sivuilta, jotka käyttävät äänen parannusta kiinnittääkseen heidän huomionsa.

Katsaus ratkaisuun

PollyReadsThePage (PRTP) – kuten me viittaamme ratkaisuun – sallii verkkosivun julkaisijan pudottaa ääniohjaimen verkkosivulleen. Kun vierailija valitsee Pelaa säätimessä säädin lukee sivun ja korostaa sisällön. PRTP käyttää Amazon Pollyn yleistä kykyä syntetisoida puhetta tekstistä. Se kutsuu Amazon Pollyn luomaan kaksi artefaktia kullekin sivulle:

• Äänisisältö selaimen toistavassa muodossa: MP3
• Puhemerkkitiedosto, joka ilmoittaa jokaiselle tekstin virkkeelle:
  • Aika toiston aikana, jolloin lause luetaan
  • Virkkeen sijainti sivulla näkyy

Kun vierailija valitsee Pelaa, selain toistaa MP3-tiedoston. Kun ääntä luetaan, selain tarkistaa kellonajan, etsii merkintätiedostosta, mikä lause sillä hetkellä luetaan, paikantaa sen sivulta ja korostaa sen.

PRTP:n avulla vierailija voi lukea eri äänillä ja kielillä. Jokainen ääni vaatii oman tiedostoparinsa. PRTP käyttää hermoääniä. Katso luettelo tuetuista hermoäänistä ja kielistä Neuraaliset äänet. Katso täydellinen luettelo Amazon Pollyn vakio- ja hermoäänistä Ääni Amazon Pollyssä.

Käsittelemme kahdenlaisia ​​verkkosivuja: staattisia ja dynaamisia sivuja. Jonkin sisällä staattinen sivulla, sisältö sisältyy sivulle ja muuttuu vain, kun sivusta julkaistaan ​​uusi versio. Yritys saattaa päivittää sivua päivittäin tai viikoittain osana web-rakennusprosessiaan. Tämän tyyppisille sivuille on mahdollista luoda äänitiedostot valmiiksi rakennusvaiheessa ja sijoittaa ne verkkopalvelimelle toistoa varten. Kuten seuraava kuva osoittaa, käsikirjoitus PRTP Pre-Gen kutsuu Amazon Pollyn luomaan äänen. Se ottaa syötteeksi itse HTML-sivun ja valinnaisesti asetustiedoston, joka määrittää, mikä teksti sivulta puretaan (Text Extract Config). Jos purkamismääritys jätetään pois, esiversiota edeltävä skripti valitsee järkevästi tekstin, joka poimitaan sivun rungosta. Amazon Polly tulostaa tiedostot muodossa Amazonin yksinkertainen tallennuspalvelu (Amazon S3) ämpäri; komentosarja kopioi ne web-palvelimellesi. Kun vierailija toistaa ääntä, selain lataa MP3:n suoraan verkkopalvelimelta. Kohokohtia varten avattava kirjasto, PRTP.js, käyttää merkintätiedostoa korostaakseen luettavan tekstin.

Sisältö a dynaaminen sivu muuttuu vastauksena vierailijan vuorovaikutukseen, joten ääntä ei voida luoda etukäteen, vaan se on syntetisoitava dynaamisesti. Kuten seuraava kuva osoittaa, kun vierailija toistaa äänen, sivu käyttää PRTP.js luoda äänen Amazon Pollyssa, ja se korostaa syntetisoitua ääntä samalla tavalla kuin staattisilla sivuilla. Vierailija tarvitsee AWS-identiteetin päästäkseen AWS-palveluihin selaimesta. Näytämme, kuinka käyttää a Amazon Cognito identiteettivarasto, jotta vierailija pääsee vain tarpeeksi Amazon Pollyyn ja S3-sämpöön äänen toistoon.

Sekä Mp3-ääni- että puhemerkkien luominen edellyttää, että Polly-palvelu syntetisoi saman tulon kahdesti. Viittaavat Amazon Polly -hinnoittelusivu ymmärtääkseen kustannusvaikutukset. Esisukupolvi säästää kustannuksia, koska synteesi suoritetaan rakennusvaiheessa eikä jokaisen vierailijan vuorovaikutuksen pyynnöstä.

Tämän viestin mukana oleva koodi on saatavana avoimen lähdekoodin arkistona osoitteessa GitHub.

Ratkaisun tutkimiseksi noudatamme näitä vaiheita:

1. Määritä resurssit, mukaan lukien sukupolvea edeltävä palvelin, S3-säilö, verkkopalvelin ja Amazon Cognito -identiteetti.
2. Suorita staattinen esiversio ja testaa staattisia sivuja.
3. Testaa dynaamisia sivuja.

Edellytykset

Tämän esimerkin suorittamiseksi tarvitset AWS-tili luvalla käyttää Amazon Pollya, Amazon S3:a, Amazon Cognitoa ja (demotarkoituksiin) AWS-pilvi9.

Tarjoa resursseja

Jaamme an AWS-pilven muodostuminen malli, jolla voit luoda tilillesi itsenäisen esittelyympäristön, joka auttaa sinua seuraamaan julkaisua. Jos haluat määrittää PRTP:n mieluummin omassa ympäristössäsi, katso ohjeita kohdassa README.md.

Jos haluat käyttää esittelyympäristöä CloudFormationin avulla, lataa ensin kopio CloudFormation -malli. Suorita sitten seuraavat vaiheet:

1. Valitse AWS CloudFormation -konsolista Luo pino.
2. Valita Uusilla resursseilla (vakio).
3. valita Lataa mallitiedosto.
4. Valita Valitse tiedosto ladataksesi lataamasi mallin paikallisen kopion. Tiedoston nimi on prtp.yml.
5. Valita seuraava.
6. Kirjoita valitsemasi pinon nimi. Kirjoitat tämän myöhemmin uudelleen tilalle .
7. Voit säilyttää oletusarvot parametrit osiossa.
8. Valita seuraava.
9. Jatka jäljellä olevien osien läpi.
10. Lue ja valitse valintaruudut Kyvyt osiossa.
11. Valita Luo pino.
12. Kun pino on valmis, etsi arvo kohteelle BucketName pinon lähdöissä.

Suosittelemme, että tarkistat pinon tietoturvatiimisi kanssa ennen kuin käytät sitä tuotantoympäristössä.

Määritä verkkopalvelin ja esisukupalvelin AWS Cloud9 IDE:ssä

Paikanna seuraavaksi ympäristö AWS Cloud9 -konsolissa PRTPDemoCloud9 CloudFormation-pinon luoma. Valita Avaa IDE avataksesi AWS Cloud9 -ympäristön. Avaa pääteikkuna ja suorita seuraavat komennot, jotka kloonaavat PRTP-koodin, määrittävät sukupolvea edeltävät riippuvuudet ja käynnistävät verkkopalvelimen testattavaksi:

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

varten , käytä nimeä, jonka annoit CloudFormation-pinolle. varten , määritä IP-osoitteita, joilla on pääsy verkkopalvelimeen. Voit rajoittaa paikallisen koneen selaimen käyttöä etsimällä IP-osoitteesi käyttämällä https://whatismyipaddress.com/ ja liittää /32 määrittääksesi alueen. Esimerkiksi jos IP-osoitteesi on 10.2.3.4, use 10.2.3.4/32. Palvelin kuuntelee porttia 8080. Julkinen IP-osoite, jota palvelin kuuntelee, annetaan ulostulossa. Esimerkiksi:

Public IP is

3.92.33.223

Testaa staattisia sivuja

Siirry selaimessasi kohtaan PRTPStaticDefault.html. (Jos käytät demoa, URL-osoite on http://<cloud9host>:8080/web/PRTPStaticDefault.html, Jossa on julkinen IP-osoite, jonka löysit IDE:tä määrittäessäsi.) Valitse Pelaa yläreunassa olevasta ääniohjaimesta. Kuuntele ääni ja katso kohokohdat. Tutustu ohjaukseen muuttamalla nopeuksia, ääniä, keskeyttämällä, kelaamalla eteenpäin ja taaksepäin. Seuraava kuvakaappaus näyttää sivun; teksti "Ohittaa piilotetun kappaleen" on korostettu, koska sitä luetaan parhaillaan.

Kokeile samaa PRTPStaticConfig.html ja PRTPStaticCustom.html. Tulokset ovat samanlaisia. Esimerkiksi kaikki kolme lukivat kissakuvan vaihtoehtoisen tekstin ("Satunnainen kuva kissasta"). Kaikki kolme lukevat NE, NW, SE ja SW täydellisinä sanoina ("koilliseen", "luoteeseen", "kaakkoon", "lounaiseen") hyödyntäen Amazon Polly -sanakirjoja.

Huomaa äänen tärkeimmät erot:

• PRTPStaticDefault.html lukee kaiken sivun tekstin, mukaan lukien alareunassa olevan pääteosan, jossa lukee "Ajatuksesi yhdellä sanalla", "Lähetä kysely", "Päivitetty viimeksi 1. huhtikuuta 2020" ja "Kysymyksiä kehitystiimille". PRTPStaticConfig.html ja PRTPStaticCustom.html älä lue näitä, koska ne nimenomaisesti sulkevat pois päätteen puhesynteesistä.
• PRTPStaticCustom.html lukee QB Parhaat myyjät pöytä eri tavalla kuin muut. Se lukee vain kolme ensimmäistä riviä ja lukee kunkin rivin rivinumeron. Se toistaa jokaisen rivin sarakkeet. PRTPStaticCustom.html käyttää mukautettua muunnosa räätälöidäkseen taulukon lukemaa. Muut sivut käyttävät oletusarvoista taulukon renderöintiä.
• PRTPStaticCustom.html lukee "Tom Brady" kovemmalla äänenvoimakkuudella kuin muu teksti. Se käyttää puhesynteesin merkintäkieltä (SSML) prosody -tunniste mukauttaaksesi Tom Bradyn lukeman. Muut sivut eivät ole räätälöityjä tällä tavalla.
• PRTPStaticCustom.htmlmukautetun muunnoksen ansiosta lukee pääruudut NW, SW, NE, SE järjestyksessä; toisin sanoen siinä lukee "Tänpäivän artikkelit", "Päivän lainaus", "Päivän valokuva", "Päivän vitsit". Muut sivut luetaan siinä järjestyksessä, jossa laatat näkyvät luonnollisessa NW, NE, SW, SE järjestyksessä ne näkyvät HTML:ssä: "Tämän päivän artikkelit", "Päivän valokuva", "Päivän lainaus", "Vitsit Päivä."

Katsotaanpa tarkemmin, miten ääni luodaan ja miten sivu korostaa tekstiä.

Staattinen esigeneraattori

GitHub-varastomme sisältää valmiiksi luotuja äänitiedostoja PRPTStatic sivuja, mutta jos haluat luoda ne itse, suorita seuraavat komennot AWS Cloud9 IDE:n bash-kuoresta:

# 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

Katsotaanpa nyt, kuinka nuo skriptit toimivat.

Oletustapaus

Aloitamme 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

Skripti alkaa suorittamalla Python-ohjelma FixHTML.py HTML-lähdetiedoston tekemiseen PRTPStaticDefault.html hyvin muotoiltu. Se kirjoittaa tiedoston hyvin muotoillun version example/tmp_wff.html. Tämä vaihe on tärkeä kahdesta syystä:

• Suurin osa HTML-lähdekoodista ei ole hyvin muotoiltu. Tämä vaihe korjaa lähde-HTML-koodin olevan hyvin muotoiltu. Esimerkiksi monet HTML-sivut eivät sulkeudu P elementtejä. Tämä vaihe sulkee ne.
• Seuraamme, mistä HTML-sivulta löydämme tekstiä. Meidän on seurattava sijainteja käyttämällä samaa dokumenttiobjektimallin (DOM) rakennetta, jota selain käyttää. Esimerkiksi selain lisää automaattisesti a TBODY joka TABLE. Python-ohjelma noudattaa samoja hyvin muotoiltuja korjauksia kuin selain.

gen_ssml.sh ottaa syötteeksi hyvin muodostetun HTML:n, käyttää siihen XML-tyylisivumuunnoksen (XSLT) -muunnoksen ja tulostaa SSML-tiedoston. (SSML on Amazon Pollyn kieli, jolla ohjataan äänen toistoa tekstistä.) Nykyisessä esimerkissä syöttö on example/tmp_wff.html. Lähtö on example/tmp.ssml. Muutoksen tehtävänä on päättää, mitä tekstiä HTML-koodista poimitaan ja syötetään Amazon Pollyyn. generic.xslt on järkevä XSLT-oletusmuunnos useimmille verkkosivuille. Seuraavassa esimerkkikoodinpätkässä se ei sisällä ääniohjausta, HTML-otsikkoa sekä HTML-elementtejä, kuten script ja form. Se myös sulkee pois elementit, joilla on piilotettu attribuutti. Se sisältää elementtejä, jotka sisältävät tyypillisesti tekstiä, kuten P, H1ja SPAN. Näille se tuottaa sekä merkin, joka sisältää elementin täydellisen XPath-lausekkeen, että elementin arvon.

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

Seuraavassa on katkelma hahmonnetusta SSML:stä. Tämä syötetään syötteenä Amazon Pollylle. Huomaa, että esimerkiksi teksti "Ohittaa piilotetun kappaleen" on luettava äänessä ja yhdistämme sen merkillä, joka kertoo, että tämä teksti esiintyy XPath-lausekkeen antamassa paikassa sivulla. /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>

Äänen luomiseksi Amazon Pollyssa kutsumme käsikirjoitusta run_polly.sh. Se ajaa AWS-komentoriviliitäntä (AWS CLI) -komento aws polly start-speech-synthesis-task kahdesti: kerran MP3-äänen luomiseen ja toisen merkkitiedoston luomiseen. Koska sukupolvi on asynkroninen, komentosarja kyselyä, kunnes se löytää lähdön määritetystä S3-säilystä. Kun se löytää tulosteen, se lataa koontipalvelimelle ja kopioi tiedostot palvelimelle web/polly kansio. Seuraavassa on luettelo verkkokansioista:

• 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

Jokaisella sivulla on omat äänikohtaiset MP3- ja merkkitiedostot. Nämä tiedostot ovat valmiiksi luotuja tiedostoja. Sivun ei tarvitse kutsua Amazon Pollya ajon aikana; tiedostot ovat osa verkkorakennetta.

Asetuspohjainen kotelo

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

Komentosarja on samanlainen kuin oletustapauksessa oleva komentosarja, mutta lihavoitut viivat osoittavat suurimman eron. Lähestymistapamme on konfiguraatiolähtöinen. Räätälöimme sivulta poimittavan sisällön määrittämällä, mitä poimitaan määrittämällä koodin sijaan. Käytämme erityisesti JSON-tiedostoa transform_config.json, joka määrittää, että sisällytettävä sisältö ovat elementtejä, joilla on tunnus title, main, maintableja qbtable. Elementti, jolla on tunnus wrapup pitäisi sulkea pois. Katso seuraava koodi:

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

Suoritamme Python-ohjelman ModGenericXSLT.py muokata generic.xslt, jota käytetään oletustapauksessa, jotta voit käyttää määrittämiämme sisällytyksiä ja poissulkemisia transform_config.json. Ohjelma kirjoittaa tulokset väliaikaiseen tiedostoon (example/tmp.xslt), jolle se siirtyy gen_ssml.sh sen XSLT-muunnoksena.

Tämä on matalakoodivaihtoehto. Verkkojulkaisijan ei tarvitse osata kirjoittaa XSLT:tä. Mutta heidän on ymmärrettävä HTML-sivun rakenne ja sen tärkeimmissä organisointielementeissä käytetyt tunnukset.

Räätälöintitapaus

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

Tämä skripti on lähes identtinen oletusskriptin kanssa, paitsi että se käyttää omaa XSLT-example/custom.xslt– yleisen XSLT:n sijaan. Seuraava on katkelma XSLT:stä:

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

Jos haluat tutkia koodia yksityiskohtaisesti, katso GitHub-repon komentosarjoja ja ohjelmia.

Selaimen asetukset ja kohokohdat

Staattisilla sivuilla on HTML5-ääniohjaus, joka käyttää äänilähteenä Amazon Pollyn luomaa ja verkkopalvelimella sijaitsevaa MP3-tiedostoa:

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

Latausaikana sivu lataa myös Amazon Pollyn luoman merkkitiedoston. Tämä tapahtuu PRTP.js tiedosto, jonka HTML-sivu sisältää. Seuraavassa on katkelma merkintätiedostosta 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”}

Äänentoiston aikana sisään on kytketty ääniajastimen tapahtumakäsittelijä PRTP.js joka tarkistaa äänen kellonajan, löytää korostettavan tekstin, löytää sen sijainnin sivulla ja korostaa sen. Korostettava teksti on tyyppiä sentence merkkitiedostossa. Sijainti on XPath-lauseke lausetta edeltävän SSML-tyypin merkinnän name-attribuutissa. Esimerkiksi, jos aika on 18400, arvosanatiedoston mukaan korostettava lause on "Ohittaa piilotetun kappaleen", joka alkaa numerosta 18334. Sijainti on SSML-merkintä hetkellä 17667: /html/body[1]/div[2]/ul[1]/li[1].

Testaa dynaamisia sivuja

Sivu PRTPDynamic.html esittelee dynaamista äänentoistoa käyttämällä oletusarvoisia, konfiguraatiopohjaisia ​​ja mukautettuja äänen erotusmenetelmiä.

Oletustapaus

Siirry selaimessasi kohtaan PRTPDynamic.html. Sivulla on yksi kyselyparametri, dynOption, joka hyväksyy arvot default, configja custom. Se on oletuksena default, joten voit jättää sen tässä tapauksessa pois. Sivulla on kaksi dynaamisen sisällön osiota:

• Viimeisimmät artikkelit – Vaihtuu usein pitkin päivää
• Kreikkalaiset filosofit etsivät päivämäärän mukaan – Antaa vierailijalle mahdollisuuden etsiä kreikkalaisia ​​filosofeja päivämäärän mukaan ja näyttää tulokset taulukossa

Luo sisältöä Kreikan filosofi -osio syöttämällä ajanjakson -800 - 0, kuten esimerkissä näkyy. Valitse sitten Löytää.

Toista nyt ääni valitsemalla Pelaa äänen ohjauksessa.

Kulissien takana sivu suorittaa seuraavan koodin äänen renderöimiseksi ja toistamiseksi:

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

Ensin se kutsuu funktiota buildSSMLFromDefault in PRTP.js poimimaan suurimman osan tekstistä HTML-sivun rungosta. Tämä toiminto kävelee DOM-puussa ja etsii tekstiä yleisistä elementeistä, kuten p, h1, pre, spanja td. Se jättää huomioimatta tekstin elementeissä, jotka eivät yleensä sisällä ääneen luettavaa tekstiä, kuten audio, optionja script. Se rakentaa SSML-merkinnät syötettäväksi Amazon Pollyyn. Seuraavassa on katkelma, joka näyttää ensimmäisen rivin poimimisen philosopher taulukossa:

<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 toiminto PRTP.js alkaa alustamalla Amazon Cogniton, Amazon S3:n ja Amazon Pollyn AWS SDK:n. Tämä alustus tapahtuu vain kerran. Jos chooseRenderAudio kutsutaan uudelleen, koska sivun sisältö on muuttunut, alustus ohitetaan. Katso seuraava 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()
};

Se tuottaa MP3-ääntä Amazon Pollysta. Sukupolvi on synkroninen pienille SSML-tuloille ja asynkroninen (lähtö lähetetään S3-säilölle) suurille SSML-tuloille (yli 6,000 3 merkkiä). Synkronisessa tapauksessa pyydämme Amazon Pollya toimittamaan MPXNUMX-tiedoston ennalta allekirjoitetun URL-osoitteen avulla. Kun syntetisoitu tulos on valmis, asetamme src Ääniohjaimen attribuutti kyseiseen URL-osoitteeseen ja lataa ohjausobjekti. Pyydämme sitten merkintätiedoston ja lataamme sen samalla tavalla kuin staattisessa tapauksessa. Katso seuraava 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);
  });
});

Asetuspohjainen kotelo

Siirry selaimessasi kohtaan PRTPDynamic.html?dynOption=config. Toista ääni. Äänentoisto on samanlainen kuin oletustapauksessa, mutta siinä on pieniä eroja. Erityisesti osa sisällöstä ohitetaan.

Kulissien takana, kun käytät config -vaihtoehto, sivu poimii sisällön eri tavalla kuin oletustapauksessa. Oletustapauksessa sivu käyttää buildSSMLFromDefault. Määritysperusteisessa tapauksessa sivu määrittää osat, jotka se haluaa sisällyttää ja jättää pois:

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

- buildSSMLFromConfig funktio, määritelty kohdassa PRTP.js, kulkee DOM-puuta jokaisessa osiossa, jonka tunnus on annettu inclusions. Se poimii sisällön jokaisesta ja yhdistää ne määritetyssä järjestyksessä SSML-dokumentiksi. Se ei sisällä kohdassa määriteltyjä osia exclusions. Se poimii sisällön jokaisesta osiosta samalla tavalla buildSSMLFromDefault poimii sisällön sivun rungosta.

Räätälöintitapaus

Siirry selaimessasi kohtaan PRTPDynamic.html?dynOption=custom. Toista ääni. Huomattavia eroja on kolme. Huomioi nämä ja harkitse kulissien takana toimivaa mukautettua koodia:

• Se lukee päälaatat NW, SW, NE, SE järjestyksessä. Mukautettu koodi saa jokaisen näistä solulohkoista maintable ja lisää ne SSML:ään NW, SW, NE, SE järjestyksessä:

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" puhutaan äänekkäästi. Mukautettu koodi sijoittaa "Tom Brady" -tekstin SSML:n sisään prosody tunnisteet:

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

• Se lukee vain pelinrakentajataulukon kolme ensimmäistä riviä. Se lukee jokaisen rivin sarakeotsikot. Tarkista GitHub-repon koodista, kuinka tämä on toteutettu.

Puhdistaa

Vältä tulevia maksuja poistamalla CloudFormation-pino.

Yhteenveto

Tässä viestissä osoitimme teknisen ratkaisun arvokkaaseen yritysongelmaan: kuinka Amazon Pollya käytetään verkkosivun sisällön lukemiseen ja sisällön korostukseen sitä luettaessa. Näitimme tämän käyttämällä sekä staattisia että dynaamisia sivuja. Sisällön poimimiseen sivulta käytimme DOM-läpikulkua ja XSLT:tä. Korostamisen helpottamiseksi käytimme Amazon Pollyn puhemerkkiominaisuutta.

Saat lisätietoja Amazon Pollysta käymällä sen sivulla palvelusivu.

Kysy rohkeasti kommenteissa.

Tietoja kirjoittajista

Mike Havey on AWS:n ratkaisuarkkitehti, jolla on yli 25 vuoden kokemus yrityssovellusten rakentamisesta. Mike on kirjoittanut kaksi kirjaa ja lukuisia artikkeleita. Vieraile hänen Amazonissaan tekijän sivu lue lisää.

Vineet Kachhawaha on AWS:n ratkaisuarkkitehti, jolla on asiantuntemusta koneoppimisesta. Hänen vastuullaan on auttaa asiakkaita suunnittelemaan skaalautuvia, turvallisia ja kustannustehokkaita AWS-työkuormia.