Lea páginas web y resalte contenido con Amazon Polly

En esta publicación, demostramos cómo usar Amazon Polly—un servicio en la nube líder que convierte el texto en voz real— para leer el contenido de una página web y resaltar el contenido a medida que se lee. Agregar reproducción de audio a una página web mejora la accesibilidad y la experiencia del visitante de la página. El contenido mejorado con audio es más impactante y memorable, atrae más tráfico a la página y aprovecha el poder adquisitivo de los visitantes. También mejora la marca de la empresa u organización que publica la página. La tecnología de texto a voz hace que estos beneficios comerciales sean alcanzables. Aceleramos ese viaje al demostrar cómo lograr este objetivo con Amazon Polly.

Esta capacidad mejora la accesibilidad para los visitantes con discapacidades y podría adoptarse como parte de la estrategia de accesibilidad de su organización. Igual de importante, mejora la experiencia de la página para los visitantes sin discapacidades. Ambos grupos tienen un poder adquisitivo significativo y gastan más libremente en páginas que usan mejoras de audio para captar su atención.

Resumen de la solución

PollyReadsThePage (PRTP), como nos referimos a la solución, permite que un editor de páginas web coloque un control de audio en su página web. Cuando el visitante elige Jugar en el control, el control lee la página y resalta el contenido. PRTP utiliza la capacidad general de Amazon Polly para sintetizar voz a partir de texto. Invoca a Amazon Polly para generar dos artefactos para cada página:

• El contenido de audio en un formato reproducible por el navegador: MP3
• Un archivo de marcas de voz que indica para cada oración de texto:
  • El tiempo durante la reproducción en que se lee la oración.
  • La ubicación en la página donde aparece la oración.

Cuando el visitante elige Jugar, el navegador reproduce el archivo MP3. A medida que se lee el audio, el navegador verifica la hora, encuentra en el archivo de marcas qué oración leer en ese momento, la ubica en la página y la resalta.

PRTP permite al visitante leer en diferentes voces e idiomas. Cada voz requiere su propio par de archivos. PRTP utiliza voces neuronales. Para obtener una lista de voces e idiomas neuronales admitidos, consulte Voces neuronales. Para obtener una lista completa de voces estándar y neuronales en Amazon Polly, consulte Voces en Amazon Polly.

Consideramos dos tipos de páginas web: páginas estáticas y dinámicas. en un estático página, el contenido está dentro de la página y cambia solo cuando se publica una nueva versión de la página. La empresa puede actualizar la página diariamente o semanalmente como parte de su proceso de creación web. Para este tipo de página, es posible generar previamente los archivos de audio en el momento de la compilación y colocarlos en el servidor web para su reproducción. Como muestra la siguiente figura, el script PRTP Pre-Gen invoca a Amazon Polly para generar el audio. Toma como entrada la propia página HTML y, opcionalmente, un archivo de configuración que especifica qué texto de la página extraer (Text Extract Config). Si se omite la configuración de extracción, el script previo a la generación hace una elección sensata de texto para extraer del cuerpo de la página. Amazon Polly genera los archivos en un Servicio de almacenamiento simple de Amazon cubo (Amazon S3); el script los copia en su servidor web. Cuando el visitante reproduce el audio, el navegador descarga el MP3 directamente desde el servidor web. Para los aspectos más destacados, una biblioteca de acceso directo, PRTP.js, utiliza el archivo de marcas para resaltar el texto que se lee.

El contenido de un lugar de trabajo dinámico la página cambia en respuesta a la interacción del visitante, por lo que el audio no se puede generar previamente, sino que se debe sintetizar dinámicamente. Como muestra la siguiente figura, cuando el visitante reproduce el audio, la página utiliza PRTP.js para generar el audio en Amazon Polly, y resalta el audio sintetizado utilizando el mismo enfoque que con las páginas estáticas. Para acceder a los servicios de AWS desde el navegador, el visitante requiere una identidad de AWS. Mostramos cómo usar un Cognito Amazonas grupo de identidades para permitir que el visitante acceda lo suficiente a Amazon Polly y al depósito de S3 para reproducir el audio.

La generación de audio MP3 y marcas de voz requiere que el servicio Polly sintetice la misma entrada dos veces. Referirse a Página de precios de Amazon Polly para entender las implicaciones de costos. La generación previa ahorra costos porque la síntesis se realiza en el momento de la compilación en lugar de a pedido para cada interacción del visitante.

El código que acompaña a esta publicación está disponible como repositorio de código abierto en GitHub.

Para explorar la solución, seguimos estos pasos:

1. Configure los recursos, incluidos el servidor de compilación anterior a la generación, el depósito S3, el servidor web y la identidad de Amazon Cognito.
2. Ejecute la compilación estática previa a la generación y pruebe las páginas estáticas.
3. Prueba páginas dinámicas.

Requisitos previos

Para ejecutar este ejemplo, necesita un Cuenta de AWS con permiso para usar Amazon Polly, Amazon S3, Amazon Cognito y (para fines de demostración) Nube de AWS9.

Aprovisionar recursos

Compartimos un Formación en la nube de AWS plantilla para crear en su cuenta un entorno de demostración independiente para ayudarlo a seguir la publicación. Si prefiere configurar PRTP en su propio entorno, consulte las instrucciones en README.md.

Para aprovisionar el entorno de demostración con CloudFormation, primero descargue una copia del Plantilla de CloudFormation. Luego complete los siguientes pasos:

1. En la consola de AWS CloudFormation, elija Crea una pila.
2. Elige Con nuevos recursos (estándar).
3. Seleccione Cargue un archivo de plantilla.
4. Elige Elija el archivo para cargar la copia local de la plantilla que descargó. El nombre del archivo es prtp.yml.
5. Elige Siguiente.
6. Introduzca un nombre de pila de su elección. Más tarde, introduzca esto de nuevo como reemplazo de .
7. Puede mantener los valores predeterminados en el parámetros .
8. Elige Siguiente.
9. Continúe con las secciones restantes.
10. Lea y seleccione las casillas de verificación en el Capacidades .
11. Elige Crear pila.
12. Cuando la pila esté completa, encuentra el valor de BucketName en las salidas de la pila.

Le recomendamos que revise la pila con su equipo de seguridad antes de usarla en un entorno de producción.

Configure el servidor web y el servidor pregenerado en un IDE de AWS Cloud9

A continuación, en la consola de AWS Cloud9, busque el entorno PRTPDemoCloud9 creado por la pila de CloudFormation. Elegir IDE abierto para abrir el entorno de AWS Cloud9. Abra una ventana de terminal y ejecute los siguientes comandos, que clonan el código PRTP, configuran dependencias previas a la generación e inician un servidor web para probar con:

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

, use el nombre que le dio a la pila de CloudFormation. Para , especifique un rango de direcciones IP permitidas para acceder al servidor web. Para restringir el acceso al navegador en su máquina local, encuentre su dirección IP usando https://whatismyipaddress.com/ y anexar /32 para especificar el rango. Por ejemplo, si su IP es 10.2.3.4, use 10.2.3.4/32. El servidor escucha en el puerto 8080. La dirección IP pública en la que escucha el servidor se proporciona en la salida. Por ejemplo:

Public IP is

3.92.33.223

Probar páginas estáticas

En su navegador, navegue hasta PRTPStaticDefault.html. (Si está utilizando la demostración, la URL es http://<cloud9host>:8080/web/PRTPStaticDefault.html, Donde es la dirección IP pública que descubrió al configurar el IDE). Elija Jugar en el control de audio en la parte superior. Escucha el audio y mira los mejores momentos. Explore el control cambiando velocidades, cambiando voces, pausando, avanzando rápidamente y rebobinando. La siguiente captura de pantalla muestra la página; el texto “Omite el párrafo oculto” está resaltado porque se está leyendo actualmente.

Prueba lo mismo para PRTPStaticConfig.html y PRTPStaticCustom.html. Los resultados son similares. Por ejemplo, los tres leyeron el texto alternativo de la foto del gato ("Imagen aleatoria de un gato"). Los tres leen NE, NW, SE y SW como palabras completas ("noreste", "noroeste", "sureste", "suroeste"), aprovechando los léxicos de Amazon Polly.

Observe las principales diferencias en el audio:

• PRTPStaticDefault.html lee todo el texto en el cuerpo de la página, incluida la parte de resumen en la parte inferior con "Sus pensamientos en una palabra", "Enviar consulta", "Última actualización el 1 de abril de 2020" y "Preguntas para el equipo de desarrollo". PRTPStaticConfig.html y PRTPStaticCustom.html no los lea porque excluyen explícitamente el resumen de la síntesis de voz.
• PRTPStaticCustom.html lee el Los más vendidos QB mesa diferente a las demás. Solo lee las primeras tres filas y lee el número de fila para cada fila. Repite las columnas para cada fila. PRTPStaticCustom.html utiliza una transformación personalizada para adaptar la lectura de la tabla. Las otras páginas utilizan la representación de tablas predeterminada.
• PRTPStaticCustom.html lee "Tom Brady" a un volumen más alto que el resto del texto. Utiliza el lenguaje de marcado de síntesis de voz (SSML) prosody etiqueta para adaptar la lectura de Tom Brady. Las otras páginas no se adaptan de esta manera.
• PRTPStaticCustom.html, gracias a una transformación personalizada, lee los mosaicos principales en orden NW, SW, NE, SE; es decir, dice “Artículos de hoy”, “Cita del día”, “Foto del día”, “Chistes del día”. Las otras páginas se leen en el orden en que aparecen los mosaicos en el orden natural NW, NE, SW, SE en el que aparecen en el HTML: "Artículos de hoy", "Foto del día", "Cita del día", "Chistes del día". Día."

Profundicemos en cómo se genera el audio y cómo la página resalta el texto.

Pregenerador estático

Nuestro repositorio de GitHub incluye archivos de audio generados previamente para el PRPTStatic páginas, pero si desea generarlas usted mismo, desde el shell bash en el IDE de AWS Cloud9, ejecute los siguientes comandos:

# 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

Ahora veamos cómo funcionan esos scripts.

Caso predeterminado

Comenzamos 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

El script comienza ejecutando el programa Python FixHTML.py para hacer el archivo HTML fuente PRTPStaticDefault.html bien formado. Escribe la versión bien formada del archivo en example/tmp_wff.html. Este paso es crucial por dos razones:

• La mayoría de las fuentes HTML no están bien formadas. Este paso repara el HTML fuente para que esté bien formado. Por ejemplo, muchas páginas HTML no se cierran P elementos. Este paso los cierra.
• Realizamos un seguimiento de dónde en la página HTML encontramos texto. Necesitamos rastrear ubicaciones usando la misma estructura de modelo de objeto de documento (DOM) que usa el navegador. Por ejemplo, el navegador agrega automáticamente un TBODY a una TABLE. El programa Python sigue las mismas reparaciones bien formadas que el navegador.

gen_ssml.sh toma el HTML bien formado como entrada, le aplica una transformación de hoja de estilo XML (XSLT) y genera un archivo SSML. (SSML es el lenguaje en Amazon Polly para controlar cómo se representa el audio a partir del texto). En el ejemplo actual, la entrada es example/tmp_wff.html. La salida es example/tmp.ssml. El trabajo de la transformación es decidir qué texto extraer del HTML y enviarlo a Amazon Polly. generic.xslt es una transformación XSLT predeterminada sensible para la mayoría de las páginas web. En el siguiente fragmento de código de ejemplo, excluye el control de audio, el encabezado HTML, así como elementos HTML como script y form. También excluye elementos con el atributo oculto. Incluye elementos que normalmente contienen texto, como P, H1y SPAN. Para estos, representa tanto una marca, incluida la expresión XPath completa del elemento, como el valor del 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>

El siguiente es un fragmento del SSML que se representa. Esto se alimenta como entrada a Amazon Polly. Observe, por ejemplo, que el texto "Omite el párrafo oculto" debe leerse en el audio y lo asociamos con una marca, que nos indica que este texto se encuentra en la ubicación de la página dada por la expresión 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>

Para generar audio en Amazon Polly, llamamos al script run_polly.sh. ejecuta el Interfaz de línea de comandos de AWS (CLI de AWS) comando aws polly start-speech-synthesis-task dos veces: una para generar audio MP3 y otra vez para generar el archivo de marcas. Debido a que la generación es asíncrona, el script sondea hasta que encuentra el resultado en el depósito de S3 especificado. Cuando encuentra la salida, la descarga al servidor de compilación y copia los archivos en el web/polly carpeta. La siguiente es una lista de las carpetas web:

• PRTPStaticDefault.html
• PRTPStaticConfig.html
• PRTPStaticCustom.html
• PRTP.js
• polly/PRTPStaticDefault/Joanna.mp3, Joanna.marcas, Matthew.mp3, Matthew.marcas
• polly/PRTPStaticConfig/Joanna.mp3, Joanna.marcas, Matthew.mp3, Matthew.marcas
• polly/PRTPStaticCustom/Joanna.mp3, Joanna.marcas, Matthew.mp3, Matthew.marcas

Cada página tiene su propio conjunto de archivos de marcas y MP3 específicos de voz. Estos archivos son los archivos generados previamente. La página no necesita invocar a Amazon Polly en tiempo de ejecución; los archivos son parte de la compilación web.

Caso controlado por configuración

Después, 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

La secuencia de comandos es similar a la secuencia de comandos en el caso predeterminado, pero las líneas en negrita indican la diferencia principal. Nuestro enfoque está basado en la configuración. Adaptamos el contenido que se extraerá de la página especificando qué extraer a través de la configuración, no del código. En particular, usamos el archivo JSON transform_config.json, que especifica que el contenido a incluir son los elementos con ID title, main, maintabley qbtable. El elemento con ID wrapup debe ser excluido. Ver el siguiente código:

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

Ejecutamos el programa Python ModGenericXSLT.py Modificar generic.xslt, utilizado en el caso predeterminado, para utilizar las inclusiones y exclusiones que especificamos en transform_config.json. El programa escribe los resultados en un archivo temporal (example/tmp.xslt), al que pasa gen_ssml.sh como su transformación XSLT.

Esta es una opción de código bajo. El editor web no necesita saber cómo escribir XSLT. Pero sí necesitan comprender la estructura de la página HTML y los ID utilizados en sus principales elementos de organización.

Caso de personalización

Finalmente, considere 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

Este script es casi idéntico al script predeterminado, excepto que usa su propio XSLT:example/custom.xslt—en lugar del XSLT genérico. El siguiente es un fragmento de 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>

Si desea estudiar el código en detalle, consulte los scripts y programas en el repositorio de GitHub.

Configuración y aspectos destacados del navegador

Las páginas estáticas incluyen un control de audio HTML5, que toma como fuente de audio el archivo MP3 generado por Amazon Polly y que reside en el servidor web:

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

En el momento de la carga, la página también carga el archivo de marcas generado por Amazon Polly. Esto ocurre en el PRTP.js archivo, que incluye la página HTML. El siguiente es un fragmento del archivo de marcas para 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 reproducción de audio, hay un controlador de eventos de temporizador de audio en PRTP.js que verifica la hora actual del audio, encuentra el texto para resaltar, encuentra su ubicación en la página y lo resalta. El texto a resaltar es una entrada de tipo sentence en el archivo de marcas. La ubicación es la expresión XPath en el atributo de nombre de la entrada de tipo SSML que precede a la oración. Por ejemplo, si la hora es 18400, según el archivo de marcas, la oración que se resaltará es "Omite el párrafo oculto", que comienza en 18334. La ubicación es la entrada SSML en la hora 17667: /html/body[1]/div[2]/ul[1]/li[1].

Probar páginas dinámicas

La página PRTPDynamic.html demuestra la lectura de audio dinámica utilizando enfoques de extracción de audio predeterminados, basados ​​en configuración y personalizados.

Caso predeterminado

En su navegador, navegue hasta PRTPDynamic.html. La página tiene un parámetro de consulta, dynOption, que acepta valores default, configy custom. Por defecto es default, por lo que puede omitirlo en este caso. La página tiene dos secciones con contenido dinámico:

• Últimos Artículos – Cambia frecuentemente a lo largo del día
• Filósofos griegos Buscar por fecha – Permite al visitante buscar filósofos griegos por fecha y muestra los resultados en una tabla

Crear algún contenido en el Filósofo griego sección ingresando un rango de fechas de -800 a 0, como se muestra en el ejemplo. Entonces escoge Encuentre.

Ahora reproduzca el audio eligiendo Jugar en el control de audio.

Detrás de escena, la página ejecuta el siguiente código para renderizar y reproducir el audio:

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

Primero llama a la función buildSSMLFromDefault in PRTP.js para extraer la mayor parte del texto del cuerpo de la página HTML. Esa función recorre el árbol DOM, buscando texto en elementos comunes como p, h1, pre, spany td. Ignora el texto de los elementos que normalmente no contienen texto para leer en voz alta, como audio, optiony script. Construye marcado SSML para ser ingresado a Amazon Polly. El siguiente es un fragmento que muestra la extracción de la primera fila de la philosopher mesa:

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

El chooseRenderAudio Funcionar en PRTP.js comienza inicializando el SDK de AWS para Amazon Cognito, Amazon S3 y Amazon Polly. Esta inicialización se produce sólo una vez. Si chooseRenderAudio se invoca de nuevo porque el contenido de la página ha cambiado, se omite la inicialización. Ver el siguiente código:

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 desde Amazon Polly. La generación es síncrona para entradas SSML pequeñas y asíncrona (con salida enviada al depósito S3) para entradas SSML grandes (más de 6,000 caracteres). En el caso síncrono, le pedimos a Amazon Polly que proporcione el archivo MP3 utilizando una URL preestablecida. Cuando la salida sintetizada está lista, configuramos el src atributo del control de audio a esa URL y cargue el control. Luego solicitamos el archivo de marcas y lo cargamos de la misma manera que en el caso estático. Ver el siguiente código:

// 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 controlado por configuración

En su navegador, navegue hasta PRTPDynamic.html?dynOption=config. Reproduce el audio. La reproducción de audio es similar al caso predeterminado, pero hay pequeñas diferencias. En particular, se salta algún contenido.

Detrás de escena, cuando se usa el config opción, la página extrae el contenido de forma diferente que en el caso predeterminado. En el caso predeterminado, la página utiliza buildSSMLFromDefault. En el caso de la configuración, la página especifica las secciones que desea incluir y excluir:

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

El buildSSMLFromConfig función, definida en PRTP.js, recorre el árbol DOM en cada una de las secciones cuyo ID se proporciona bajo inclusions. Extrae el contenido de cada uno y los combina, en el orden especificado, para formar un documento SSML. Se excluyen las secciones especificadas en exclusions. Extrae el contenido de cada sección de la misma manera buildSSMLFromDefault extrae el contenido del cuerpo de la página.

Caso de personalización

En su navegador, navegue hasta PRTPDynamic.html?dynOption=custom. Reproduce el audio. Hay tres diferencias notables. Notemos esto y consideremos el código personalizado que se ejecuta detrás de escena:

• Lee los mosaicos principales en orden NW, SW, NE, SE. El código personalizado obtiene cada uno de estos bloques de celdas de maintable y los agrega al SSML en orden 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” se dice en voz alta. El código personalizado coloca el texto "Tom Brady" dentro de un SSML prosody tag:

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

• Solo lee las tres primeras filas de la tabla de mariscales de campo. Lee los encabezados de columna para cada fila. Consulte el código en el repositorio de GitHub para descubrir cómo se implementa.

Limpiar

Para evitar incurrir en cargos futuros, elimine la pila de CloudFormation.

Conclusión

En esta publicación, demostramos una solución técnica a un problema comercial de alto valor: cómo usar Amazon Polly para leer el contenido de una página web y resaltar el contenido a medida que se lee. Mostramos esto usando páginas estáticas y dinámicas. Para extraer contenido de la página, usamos DOM transversal y XSLT. Para facilitar el resaltado, utilizamos la capacidad de marcas de voz en Amazon Polly.

Obtenga más información sobre Amazon Polly visitando su página de servicio.

No dude en hacer preguntas en los comentarios.

Sobre los autores

mike havey es arquitecto de soluciones para AWS con más de 25 años de experiencia en la creación de aplicaciones empresariales. Mike es autor de dos libros y numerosos artículos. Visita su Amazon página de autor para leer mas

Vineet Kachhawaha es arquitecto de soluciones en AWS con experiencia en aprendizaje automático. Es responsable de ayudar a los clientes a diseñar cargas de trabajo escalables, seguras y rentables en AWS.