Leggi le pagine web ed evidenzia i contenuti utilizzando Amazon Polly

In questo post, dimostriamo come utilizzare Amazon Polly—un servizio cloud leader che converte il testo in un discorso realistico—per leggere il contenuto di una pagina web ed evidenziare il contenuto mentre viene letto. L'aggiunta della riproduzione audio a una pagina Web migliora l'accessibilità e l'esperienza dei visitatori della pagina. I contenuti audio ottimizzati sono più efficaci e memorabili, attirano più traffico sulla pagina e sfruttano il potere di spesa dei visitatori. Migliora anche il marchio dell'azienda o dell'organizzazione che pubblica la pagina. La tecnologia di sintesi vocale consente di ottenere questi vantaggi aziendali. Acceleriamo questo viaggio dimostrando come raggiungere questo obiettivo utilizzando Amazon Polly.

Questa funzionalità migliora l'accessibilità per i visitatori con disabilità e potrebbe essere adottata come parte della strategia di accessibilità dell'organizzazione. Altrettanto importante, migliora l'esperienza della pagina per i visitatori senza disabilità. Entrambi i gruppi hanno un potere di spesa significativo e spendono più liberamente dalle pagine che utilizzano il miglioramento dell'audio per attirare la loro attenzione.

Panoramica della soluzione

PollyReadsThePage (PRTP), come ci riferiamo alla soluzione, consente a un editore di pagine Web di rilasciare un controllo audio sulla propria pagina Web. Quando il visitatore sceglie Giocare sul controllo, il controllo legge la pagina ed evidenzia il contenuto. PRTP utilizza la capacità generale di Amazon Polly per sintetizzare il parlato dal testo. Richiama Amazon Polly per generare due artefatti per ogni pagina:

• Il contenuto audio in un formato riproducibile dal browser: MP3
• Un file di segni vocali che indica per ogni frase di testo:
  • Il tempo durante la riproduzione in cui viene letta la frase
  • La posizione sulla pagina in cui appare la frase

Quando il visitatore sceglie Giocare, il browser riproduce il file MP3. Mentre l'audio viene letto, il browser controlla l'ora, trova nel file dei segni quale frase leggere in quel momento, la individua nella pagina e la evidenzia.

PRTP permette al visitatore di leggere in diverse voci e lingue. Ogni voce richiede la propria coppia di file. PRTP utilizza le voci neurali. Per un elenco delle voci neurali e delle lingue supportate, vedere Voci neurali. Per un elenco completo delle voci standard e neurali in Amazon Polly, consulta Voci in Amazon Polly.

Consideriamo due tipi di pagine web: pagine statiche e pagine dinamiche. In un statico pagina, il contenuto è contenuto all'interno della pagina e cambia solo quando viene pubblicata una nuova versione della pagina. L'azienda potrebbe aggiornare la pagina giornalmente o settimanalmente come parte del processo di creazione web. Per questo tipo di pagina è possibile pre-generare i file audio in fase di compilazione e inserirli sul server web per la riproduzione. Come mostra la figura seguente, lo script PRTP Pre-Gen richiama Amazon Polly per generare l'audio. Prende come input la pagina HTML stessa e, opzionalmente, un file di configurazione che specifica quale testo dalla pagina estrarre (Text Extract Config). Se la configurazione dell'estrazione viene omessa, lo script pre-gen fa una scelta ragionevole del testo da estrarre dal corpo della pagina. Amazon Polly emette i file in un Servizio di archiviazione semplice Amazon secchio (Amazon S3); lo script li copia sul tuo server web. Quando il visitatore riproduce l'audio, il browser scarica l'MP3 direttamente dal server web. Per i punti salienti, una libreria drop-in, PRTP.js, utilizza il file dei segni per evidenziare il testo letto.

Il contenuto di a dinamico la pagina cambia in risposta all'interazione del visitatore, quindi l'audio non può essere pre-generato ma deve essere sintetizzato dinamicamente. Come mostra la figura seguente, quando il visitatore riproduce l'audio, la pagina utilizza PRTP.js per generare l'audio in Amazon Polly ed evidenzia l'audio sintetizzato utilizzando lo stesso approccio delle pagine statiche. Per accedere ai servizi AWS dal browser, il visitatore richiede un'identità AWS. Mostriamo come usare un Amazzonia Cognito pool di identità per consentire al visitatore un accesso sufficiente ad Amazon Polly e al bucket S3 per eseguire il rendering dell'audio.

La generazione di entrambi i segni audio e vocali Mp3 richiede che il servizio Polly sintetizzi lo stesso input due volte. Fare riferimento al Pagina dei prezzi di Amazon Polly per comprendere le implicazioni di costo. La pre-generazione consente di risparmiare sui costi perché la sintesi viene eseguita in fase di creazione anziché su richiesta per ogni interazione del visitatore.

Il codice che accompagna questo post è disponibile come repository open source su GitHub.

Per esplorare la soluzione, seguiamo questi passaggi:

1. Configura le risorse, inclusi il server di build pre-gen, il bucket S3, il server Web e l'identità Amazon Cognito.
2. Esegui la build pre-gen statica e verifica le pagine statiche.
3. Testare le pagine dinamiche.

Prerequisiti

Per eseguire questo esempio, è necessario un Account AWS con l'autorizzazione a utilizzare Amazon Polly, Amazon S3, Amazon Cognito e (a scopo dimostrativo) AWS Cloud9.

Fornire risorse

Condividiamo un AWS CloudFormazione modello per creare nel tuo account un ambiente demo autonomo per aiutarti a seguire il post. Se si preferisce configurare PRTP nel proprio ambiente, fare riferimento alle istruzioni in README.md.

Per eseguire il provisioning dell'ambiente demo utilizzando CloudFormation, scarica prima una copia del file Modello CloudFormation. Quindi completare i seguenti passaggi:

1. Nella console AWS CloudFormation, scegli Crea stack.
2. Scegli Con nuove risorse (standard).
3. Seleziona Carica un file modello.
4. Scegli Scegli il file per caricare la copia locale del modello che hai scaricato. Il nome del file è prtp.yml.
5. Scegli Avanti.
6. Inserisci un nome stack a tua scelta. Successivamente lo inserisci di nuovo in sostituzione di .
7. È possibile mantenere i valori predefiniti in parametri .
8. Scegli Avanti.
9. Continua attraverso le restanti sezioni.
10. Leggere e selezionare le caselle di controllo in Capabilities .
11. Scegli Crea stack.
12. Quando lo stack è completo, trova il valore per BucketName negli output dello stack.

Ti invitiamo a rivedere lo stack con il tuo team di sicurezza prima di utilizzarlo in un ambiente di produzione.

Configura il server Web e il server pre-gen in un IDE AWS Cloud9

Successivamente, sulla console AWS Cloud9, individua l'ambiente PRTPDemoCloud9 creato dallo stack CloudFormation. Scegliere Apri IDE per aprire l'ambiente AWS Cloud9. Apri una finestra di terminale ed esegui i seguenti comandi, che clona il codice PRTP, imposta le dipendenze pre-gen e avvia un server Web con cui testare:

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

Nel , utilizza il nome che hai assegnato allo stack CloudFormation. Per , specificare un intervallo di indirizzi IP autorizzati ad accedere al server web. Per limitare l'accesso al browser sul tuo computer locale, trova il tuo indirizzo IP utilizzando https://whatismyipaddress.com/ e aggiungere /32 per specificare l'intervallo. Ad esempio, se il tuo IP è 10.2.3.4, use 10.2.3.4/32. Il server è in ascolto sulla porta 8080. L'indirizzo IP pubblico su cui il server è in ascolto viene fornito nell'output. Per esempio:

Public IP is

3.92.33.223

Testare le pagine statiche

Nel tuo browser, vai a PRTPStaticDefault.html. (Se stai usando la demo, l'URL è http://<cloud9host>:8080/web/PRTPStaticDefault.html, Dove è l'indirizzo IP pubblico scoperto durante la configurazione dell'IDE.) Scegli Giocare sul controllo audio in alto. Ascolta l'audio e guarda i momenti salienti. Esplora il controllo modificando le velocità, modificando le voci, mettendo in pausa, avanzando velocemente e riavvolgendo. Lo screenshot seguente mostra la pagina; il testo “Salta il paragrafo nascosto” è evidenziato perché in corso di lettura.

Prova lo stesso per PRTPStaticConfig.html ed PRTPStaticCustom.html. I risultati sono simili. Ad esempio, tutti e tre leggono il testo alternativo per la foto del gatto ("Foto casuale di un gatto"). Tutti e tre leggono NE, NW, SE e SW come parole complete ("nordest", "nordovest", "sudest", "sudovest"), sfruttando i lessici di Amazon Polly.

Nota le principali differenze nell'audio:

• PRTPStaticDefault.html legge tutto il testo nel corpo della pagina, inclusa la parte di riepilogo in fondo con "I tuoi pensieri in una parola", "Invia query", "Ultimo aggiornamento 1 aprile 2020" e "Domande per il team di sviluppo". PRTPStaticConfig.html ed PRTPStaticCustom.html non leggerli perché escludono esplicitamente il riepilogo dalla sintesi vocale.
• PRTPStaticCustom.html legge il I più venduti QB tavola in modo diverso dagli altri. Legge solo le prime tre righe e legge il numero di riga per ciascuna riga. Ripete le colonne per ogni riga. PRTPStaticCustom.html utilizza una trasformazione personalizzata per personalizzare la lettura della tabella. Le altre pagine utilizzano il rendering della tabella di default.
• PRTPStaticCustom.html legge "Tom Brady" a un volume più alto rispetto al resto del testo. Utilizza il linguaggio di marcatura della sintesi vocale (SSML) prosody tag per personalizzare la lettura di Tom Brady. Le altre pagine non si adattano in questo modo.
• PRTPStaticCustom.html, grazie ad una trasformazione personalizzata, legge le tessere principali in ordine NW, SW, NE, SE; cioè, si legge "Articoli di oggi", "Citazione del giorno", "Foto del giorno", "Barzellette del giorno". Le altre pagine si leggono nell'ordine in cui le tessere appaiono nell'ordine naturale NW, NE, SW, SE in cui appaiono nell'HTML: "Articoli di oggi", "Foto del giorno", "Citazione del giorno", "Barzellette del Giorno."

Analizziamo più a fondo come viene generato l'audio e come la pagina evidenzia il testo.

Pregeneratore statico

Il nostro repository GitHub include file audio pregenerati per il PRPTStatic pagine, ma se vuoi generarle tu stesso, dalla shell bash nell'IDE di AWS Cloud9, esegui i seguenti comandi:

# 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

Ora diamo un'occhiata a come funzionano questi script.

Caso predefinito

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

Lo script inizia eseguendo il programma Python FixHTML.py per creare il file HTML di origine PRTPStaticDefault.html ben formato. Scrive la versione corretta del file in example/tmp_wff.html. Questo passaggio è fondamentale per due motivi:

• La maggior parte dell'HTML sorgente non è ben formato. Questo passaggio ripara l'HTML di origine in modo che sia ben formato. Ad esempio, molte pagine HTML non si chiudono P elementi. Questo passaggio li chiude.
• Teniamo traccia di dove nella pagina HTML troviamo il testo. Dobbiamo tenere traccia delle posizioni utilizzando la stessa struttura del modello a oggetti del documento (DOM) utilizzata dal browser. Ad esempio, il browser aggiunge automaticamente a TBODY ad un TABLE. Il programma Python segue le stesse riparazioni ben formate del browser.

gen_ssml.sh prende l'HTML ben formato come input, applica una trasformazione XML stylesheet transformation (XSLT) e genera un file SSML. (SSML è la lingua in Amazon Polly per controllare la modalità di rendering dell'audio dal testo.) Nell'esempio corrente, l'input è example/tmp_wff.html. L'uscita è example/tmp.ssml. Il compito della trasformazione è decidere quale testo estrarre dall'HTML e inviarlo ad Amazon Polly. generic.xslt è una trasformazione XSLT predefinita ragionevole per la maggior parte delle pagine Web. Nel seguente frammento di codice di esempio, esclude il controllo audio, l'intestazione HTML, nonché elementi HTML come script ed form. Esclude anche gli elementi con l'attributo nascosto. Include elementi che in genere contengono testo, come P, H1e SPAN. Per questi, rende sia un segno, inclusa l'espressione XPath completa dell'elemento, sia il valore dell'elemento.

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

Quello che segue è un frammento di SSML di cui viene eseguito il rendering. Questo viene alimentato come input per Amazon Polly. Si noti, ad esempio, che il testo "Salta il paragrafo nascosto" deve essere letto nell'audio e lo associamo a un segno, che ci dice che questo testo si trova nella posizione della pagina data dall'espressione 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>

Per generare audio in Amazon Polly, chiamiamo lo script run_polly.sh. Esegue il Interfaccia della riga di comando di AWS (AWS CLI). aws polly start-speech-synthesis-task due volte: una per generare l'audio MP3 e di nuovo per generare il file dei segni. Poiché la generazione è asincrona, lo script esegue il polling finché non trova l'output nel bucket S3 specificato. Quando trova l'output, lo scarica sul server di build e copia i file in web/polly cartella. Di seguito è riportato un elenco delle cartelle Web:

• 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

Ogni pagina ha il proprio set di file MP3 specifici per la voce e contrassegna i file. Questi file sono i file pregenerati. Non è necessario che la pagina richiami Amazon Polly in fase di esecuzione; i file fanno parte della build web.

Caso guidato dalla configurazione

Quindi, considera 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

Lo script è simile allo script nel caso predefinito, ma le linee in grassetto indicano la differenza principale. Il nostro approccio è basato sulla configurazione. Personalizziamo il contenuto da estrarre dalla pagina specificando cosa estrarre attraverso la configurazione, non il codice. In particolare, utilizziamo il file JSON transform_config.json, che specifica che il contenuto da includere sono gli elementi con ID title, main, maintablee qbtable. L'elemento con ID wrapup dovrebbe essere escluso. Vedere il codice seguente:

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

Eseguiamo il programma Python ModGenericXSLT.py modificare generic.xslt, utilizzato nel caso predefinito, per utilizzare le inclusioni e le esclusioni specificate in transform_config.json. Il programma scrive i risultati in un file temporaneo (example/tmp.xslt), a cui passa gen_ssml.sh come sua trasformata XSLT.

Questa è un'opzione a basso codice. L'editore web non ha bisogno di sapere come scrivere XSLT. Ma hanno bisogno di comprendere la struttura della pagina HTML e gli ID utilizzati nei suoi principali elementi organizzativi.

Caso di personalizzazione

Infine, considera 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

Questo script è quasi identico allo script predefinito, tranne per il fatto che utilizza il proprio XSLT—example/custom.xslt—piuttosto che il generico XSLT. Quello che segue è un frammento di 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>

Se vuoi studiare il codice in dettaglio, fai riferimento agli script e ai programmi nel repository GitHub.

Configurazione e evidenziazioni del browser

Le pagine statiche includono un controllo audio HTML5, che prende come sorgente audio il file MP3 generato da Amazon Polly e residente sul server web:

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

Al momento del caricamento, la pagina carica anche il file dei contrassegni generato da Amazon Polly. Ciò si verifica nel PRTP.js file, che include la pagina HTML. Quello che segue è uno snippet del file mark per 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”}

Durante la riproduzione audio, è presente un gestore di eventi del timer audio PRTP.js che controlla l'ora corrente dell'audio, trova il testo da evidenziare, trova la sua posizione sulla pagina e lo evidenzia. Il testo da evidenziare è una voce di tipo sentence nel dossier dei voti. La posizione è l'espressione XPath nell'attributo name della voce di tipo SSML che precede la frase. Ad esempio, se l'ora è 18400, secondo il file dei segni, la frase da evidenziare è "Salta il paragrafo nascosto", che inizia con 18334. La posizione è la voce SSML all'ora 17667: /html/body[1]/div[2]/ul[1]/li[1].

Testare le pagine dinamiche

La pagina PRTPDynamic.html dimostra la lettura dinamica dell'audio utilizzando approcci di estrazione dell'audio predefiniti, basati sulla configurazione e personalizzati.

Caso predefinito

Nel tuo browser, vai a PRTPDynamic.html. La pagina ha un parametro di query, dynOption, che accetta valori default, confige custom. Il valore predefinito è default, quindi in questo caso potresti ometterlo. La pagina ha due sezioni con contenuto dinamico:

• Articoli Recenti – Cambia frequentemente durante il giorno
• Filosofi greci Cerca per data – Consente al visitatore di cercare filosofi greci per data e mostra i risultati in una tabella

Crea dei contenuti in Filosofo greco sezione inserendo un intervallo di date compreso tra -800 e 0, come mostrato nell'esempio. Quindi scegli Trovare.

Ora riproduci l'audio scegliendo Giocare nel controllo audio.

Dietro le quinte, la pagina esegue il codice seguente per eseguire il rendering e riprodurre l'audio:

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

Per prima cosa chiama la funzione buildSSMLFromDefault in PRTP.js per estrarre la maggior parte del testo dal corpo della pagina HTML. Quella funzione percorre l'albero DOM, cercando il testo in elementi comuni come p, h1, pre, spane td. Ignora il testo in elementi che di solito non contengono testo da leggere ad alta voce, come audio, optione script. Crea il markup SSML da inserire in Amazon Polly. Quello che segue è uno snippet che mostra l'estrazione della prima riga da philosopher tabella:

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

I chooseRenderAudio funzione in PRTP.js inizia con l'inizializzazione dell'SDK AWS per Amazon Cognito, Amazon S3 e Amazon Polly. Questa inizializzazione si verifica una sola volta. Se chooseRenderAudio viene richiamato di nuovo perché il contenuto della pagina è cambiato, l'inizializzazione viene saltata. Vedere il codice seguente:

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

Genera audio MP3 da Amazon Polly. La generazione è sincrona per input SSML piccoli e asincrona (con output inviato al bucket S3) per input SSML di grandi dimensioni (maggiori di 6,000 caratteri). Nel caso sincrono, chiediamo ad Amazon Polly di fornire il file MP3 utilizzando un URL preimpostato. Quando l'output sintetizzato è pronto, impostiamo il src attributo del controllo audio a tale URL e caricare il controllo. Quindi richiediamo il file mark e lo carichiamo allo stesso modo del caso statico. Vedere il codice seguente:

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

Caso guidato dalla configurazione

Nel tuo browser, vai a PRTPDynamic.html?dynOption=config. Riproduci l'audio. La riproduzione audio è simile al caso predefinito, ma ci sono piccole differenze. In particolare, alcuni contenuti vengono saltati.

Dietro le quinte, quando si utilizza il config opzione, la pagina estrae il contenuto in modo diverso rispetto al caso predefinito. Nel caso predefinito, la pagina utilizza buildSSMLFromDefault. Nel caso guidato dalla configurazione, la pagina specifica le sezioni che desidera includere ed escludere:

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

I buildSSMLFromConfig funzione, definita in PRTP.js, percorre l'albero DOM in ciascuna delle sezioni il cui ID è fornito in inclusions. Estrae il contenuto da ciascuno e li combina insieme, nell'ordine specificato, per formare un documento SSML. Sono escluse le sezioni specificate sotto exclusions. Estrae il contenuto da ciascuna sezione allo stesso modo buildSSMLFromDefault estrae il contenuto dal corpo della pagina.

Caso di personalizzazione

Nel tuo browser, vai a PRTPDynamic.html?dynOption=custom. Riproduci l'audio. Ci sono tre differenze evidenti. Prendiamo nota di questi e consideriamo il codice personalizzato che viene eseguito dietro le quinte:

• Legge le tessere principali in ordine NW, SW, NE, SE. Il codice personalizzato ottiene ciascuno di questi blocchi di celle da maintable e li aggiunge all'SSML nell'ordine NW, SW, NE, SE:

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" è pronunciato ad alta voce. Il codice personalizzato inserisce il testo "Tom Brady" all'interno di un SSML prosody etichetta:

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

• Legge solo le prime tre righe della tabella del quarterback. Legge le intestazioni di colonna per ogni riga. Controlla il codice nel repository GitHub per scoprire come viene implementato.

ripulire

Per evitare di incorrere in addebiti futuri, elimina lo stack di CloudFormation.

Conclusione

In questo post, abbiamo dimostrato una soluzione tecnica a un problema aziendale di alto valore: come utilizzare Amazon Polly per leggere il contenuto di una pagina Web ed evidenziare il contenuto mentre viene letto. Lo abbiamo mostrato usando sia le pagine statiche che quelle dinamiche. Per estrarre il contenuto dalla pagina, abbiamo utilizzato DOM traversal e XSLT. Per facilitare l'evidenziazione, abbiamo utilizzato la funzionalità dei segni vocali in Amazon Polly.

Scopri di più su Amazon Polly visitando il suo pagina di servizio.

Sentiti libero di fare domande nei commenti.

Circa gli autori

Mike Havey è un Solutions Architect per AWS con oltre 25 anni di esperienza nella creazione di applicazioni aziendali. Mike è autore di due libri e numerosi articoli. Visita la sua Amazzone pagina dell'autore leggere di più

Vigneto Kachhawaha è un Solutions Architect presso AWS con esperienza nel machine learning. È responsabile di aiutare i clienti a progettare carichi di lavoro scalabili, sicuri ed economici su AWS.