Introducción a los script de navegador - AWS SDK for JavaScript

LaAWS SDK for JavaScript versión 3 (v3) es una reescritura de la versión 2 con algunas funciones nuevas y excelentes, incluida la arquitectura modular. Para obtener más información, consulte la Guía para desarrolladores de la versiónAWS SDK for JavaScript 3.

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Introducción a los script de navegador

JavaScript code example that applies to browser execution

Este ejemplo de script de navegador le muestra:

  • Cómo acceder aAWSservicios de un script de navegador utilizando Amazon Cognito Identity.

  • Cómo convertir texto en voz sintetizada con Amazon Polly.

  • Cómo utilizar un objeto prefirmado para crear una URL prefirmada.

El escenario

Amazon Polly es un servicio en la nube que convierte el texto en un segmento hablado muy realista. Puede utilizar Amazon Polly para desarrollar aplicaciones que aumenten la participación y mejoren la accesibilidad. Amazon Polly admite varios idiomas e incluye una variedad de voces realistas. Para obtener más información acerca de Amazon Polly, consulte laGuía para desarrolladores de Amazon Polly.

En este ejemplo se muestra cómo configurar y ejecutar un sencillo script de navegador que toma texto que se introduce, envía dicho texto a Amazon Polly y luego devuelve la URL del audio sintetizado del texto para que se reproduzca. El script de navegador utiliza Amazon Cognito Identity para proporcionar las credenciales necesarias para tener acceso aAWSServicios de . Verá los patrones básicos de carga y uso del SDK de para JavaScript en scripts de navegador.

nota

La reproducción de voz sintetizada de este ejemplo depende de si se ejecuta en navegador compatible con audio HTML 5.


                        Ilustración de cómo interactúa un script de navegador con los servicios de Amazon Cognito Identity y Amazon Polly

El script de navegador utiliza el SDK de para JavaScript para sintetizar texto mediante las API siguientes:

Paso 1: Creación de un grupo de identidades de Amazon Cognito

En este ejercicio, deberá crear y utilizar un grupo de identidades de Amazon Cognito para proporcionar acceso sin autenticar a su script de navegador para el servicio de Amazon Polly. Al crear un grupo de identidades también creará dos roles de IAM, uno para admitir usuarios autenticados mediante un proveedor de identidades y otro para admitir usuarios invitados no autenticados.

En este ejercicio, vamos a trabajar con el rol de usuario sin autenticar para concentrarnos en la tarea. Puede integrar la compatibilidad con un proveedor de identidades y los usuarios autenticados más adelante.

Para crear un grupo de identidades de Amazon Cognito
  1. Inicie sesión enAWS Management Consoley abra la consola de Amazon Cognito enConsola de Amazon Web Services.

  2. Elija Manage Identity Pools (Administrar grupos de identidades) en la página de inicio de la consola.

  3. En la página siguiente, seleccione Create new identity pool (Crear nuevo grupo de identidades).

    nota

    Si no hay otros grupos de identidades, la consola de Amazon Cognito omitirá esta página y abrirá la página siguiente.

  4. En el Getting started wizard (Asistente de introducción), escriba un nombre para el grupo de identidades en Identity pool name (Nombre de grupo de identidades).

  5. Elija Enable access to unauthenticated identities (Habilitar el acceso a identidades sin autenticar).

  6. Elija Create Pool.

  7. En la página siguiente, seleccioneVisualización de detallesPara ver los nombres de los dos roles de IAM creados para su grupo de identidades. Apunte el nombre del rol para identidades sin autenticar. Necesitará este nombre para añadir la política necesaria para Amazon Polly.

  8. Elija Allow.

  9. En la página Sample code (Código de muestra), seleccione la plataforma de JavaScript. A continuación, copie o apunte el ID del grupo de identidades y la región. Necesitará estos valores para sustituir REGION e IDENTITY_POOL_ID en su script de navegador.

Después de crear el grupo de identidades de Amazon Cognito, ya estará listo para añadir los permisos para Amazon Polly que el script de navegador necesita.

Paso 2: Añadir una política de al rol de IAM creado

Para habilitar el acceso del script de navegador a Amazon Polly para el proceso de síntesis de voz, utilice el rol de IAM sin autenticar para su grupo de identidades de Amazon Cognito. Para ello tiene que añadir una política de IAM al rol. Para obtener más información acerca de los roles de IAM, consulteCreación de un rol para delegar permisos a unAWSService (Servicio)en laIAM User Guide.

Para añadir una política de Amazon Polly al rol de IAM asociado a usuarios sin autenticar
  1. Inicie sesión en la AWS Management Console y abra la consola de IAM en https://console.aws.amazon.com/iam/.

  2. En el panel de navegación, en la parte izquierda de la página, elija Roles.

  3. En la lista de roles de IAM, haga clic en el enlace del rol de identidades sin autenticar que ha creado previamente Amazon Cognito.

  4. En la página Summary (Resumen) de este rol, elija Attach policies (Asociar políticas).

  5. En la página Attach Permissions (Asociar permisos) de este rol, busque y luego seleccione la casilla de verificación de AmazonPollyFullAccess.

    nota

    Puede utilizar este proceso para habilitar el acceso a cualquier servicio de Amazon.

  6. Elija Asociar política.

Después de crear el grupo de identidades de Amazon Cognito y de añadir los permisos para Amazon Polly a su rol de IAM para usuarios sin autenticar, estará listo para crear la página web y el script de navegador.

Paso 3: Creación de la página HTML

La aplicación de muestra se compone de una sola página HTML que contiene la interfaz de usuario y el script de navegador. Para empezar cree un documento HTML y copie el siguiente contenido en él. La página contiene un campo de entrada y un botón, un elemento <audio> para reproducir la voz sintetizada y un elemento <p> para mostrar mensajes. (Tenga en cuenta que el ejemplo completo se muestra en la parte inferior de esta página).

Para obtener más información acerca del elemento <audio>, consulte audio.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AWS SDK for JavaScript - Browser Getting Started Application</title> </head> <body> <div id="textToSynth"> <input autofocus size="23" type="text" id="textEntry" value="It's very good to meet you."/> <button class="btn default" onClick="speakText()">Synthesize</button> <p id="result">Enter text above then click Synthesize</p> </div> <audio id="audioPlayback" controls> <source id="audioSource" type="audio/mp3" src=""> </audio> <!-- (script elements go here) --> </body> </html>

Guarde el archivo HTML y asígnele el nombre polly.html. Una vez que haya creado la interfaz de usuario para la aplicación, ya podrá agregar el código del script de navegador que ejecuta la aplicación.

Paso 4: Escritura del script de navegador

Lo primero que debe hacer al crear el script de navegador consiste en incluir el SDK de para JavaScript añadiendo un<script>elemento después de la<audio>elemento de la página:

<script src="https://sdk.amazonaws.com/js/aws-sdk-SDK_VERSION_NUMBER.min.js"></script>

(Para saber el SDK_VERSION_NUMBER actual, consulte la referencia de la API del SDK de para JavaScript enAWS SDK for JavaScriptGuía de referencia de la API.

A continuación, añada un elemento <script type="text/javascript"> después de la entrada del SDK. Añadirá el script de navegador a este elemento. Establecimiento de la propiedad deAWSRegión y credenciales del SDK. A continuación, cree una función denominada speakText() que el botón invocará como controlador de eventos.

Para sintetizar voz con Amazon Polly, debe proporcionar una serie de parámetros como el formato de sonido de la salida, la frecuencia de muestreo, el ID de la voz que se va a utilizar y el texto que debe reproducirse. Al crear inicialmente los parámetros, establezca el parámetro Text: en una cadena vacía; el parámetro Text: se definirá como el valor que recuperara del elemento <input> en la página web.

<script type="text/javascript"> // Initialize the Amazon Cognito credentials provider AWS.config.region = 'REGION'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'IDENTITY_POOL_ID'}); // Function invoked by button click function speakText() { // Create the JSON parameters for getSynthesizeSpeechUrl var speechParams = { OutputFormat: "mp3", SampleRate: "16000", Text: "", TextType: "text", VoiceId: "Matthew" }; speechParams.Text = document.getElementById("textEntry").value;

Amazon Polly devuelve voz sintetizada como una secuencia de audio. La forma más sencilla de reproducir dicho audio en un navegador consiste en hacer que Amazon Polly ponga el audio a disposición del usuario en una URL prefirmada que se puede establecer comosrcatributo del<audio>elemento de la página web.

Cree un nuevo objeto de servicio AWS.Polly. A continuación, cree el objeto AWS.Polly.Presigner que utilizará para crear la URL prefirmada de la que se podrá recuperar el audio de la voz sintetizada. Debe transferir los parámetros de voz que ha definido, así como el objeto de servicio AWS.Polly que ha creado al constructor AWS.Polly.Presigner.

Después de crear el objeto presigner, llame al método getSynthesizeSpeechUrl de dicho objeto y pase los parámetros de voz. Si la operación se ejecuta correctamente, este método devuelve la dirección URL de la voz sintetizada, que a continuación puede asignar al elemento <audio> para la reproducción.

// Create the Polly service object and presigner object var polly = new AWS.Polly({apiVersion: '2016-06-10'}); var signer = new AWS.Polly.Presigner(speechParams, polly) // Create presigned URL of synthesized speech file signer.getSynthesizeSpeechUrl(speechParams, function(error, url) { if (error) { document.getElementById('result').innerHTML = error; } else { document.getElementById('audioSource').src = url; document.getElementById('audioPlayback').load(); document.getElementById('result').innerHTML = "Speech ready to play."; } }); } </script>

Paso 5: Ejecute el ejemplo

Para ejecutar la aplicación de muestra, cargue polly.html en un navegador web. La presentación del navegador debe tener un aspecto similar al siguiente.


                        Interfaz de navegador de aplicaciones web

Escriba una frase que desea que se convierta en voz en el cuadro de entrada y, a continuación, elija la Synthesize (Sintetizar). Cuando el audio esté lista para reproducirse, aparecerá un mensaje. Utilice los controles del reproductor de audio para escuchar la voz sintetizada.

Muestra completa

A continuación se muestra la página HTML completa con el script de navegador. También está disponible aquí, en GitHub.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AWS SDK for JavaScript - Browser Getting Started Application</title> </head> <body> <div id="textToSynth"> <input autofocus size="23" type="text" id="textEntry" value="It's very good to meet you."/> <button class="btn default" onClick="speakText()">Synthesize</button> <p id="result">Enter text above then click Synthesize</p> </div> <audio id="audioPlayback" controls> <source id="audioSource" type="audio/mp3" src=""> </audio> <script src="https://sdk.amazonaws.com/js/aws-sdk-2.410.0.min.js"></script> <script type="text/javascript"> // Initialize the Amazon Cognito credentials provider AWS.config.region = 'REGION'; AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'IDENTITY_POOL_ID'}); // Function invoked by button click function speakText() { // Create the JSON parameters for getSynthesizeSpeechUrl var speechParams = { OutputFormat: "mp3", SampleRate: "16000", Text: "", TextType: "text", VoiceId: "Matthew" }; speechParams.Text = document.getElementById("textEntry").value; // Create the Polly service object and presigner object var polly = new AWS.Polly({apiVersion: '2016-06-10'}); var signer = new AWS.Polly.Presigner(speechParams, polly) // Create presigned URL of synthesized speech file signer.getSynthesizeSpeechUrl(speechParams, function(error, url) { if (error) { document.getElementById('result').innerHTML = error; } else { document.getElementById('audioSource').src = url; document.getElementById('audioPlayback').load(); document.getElementById('result').innerHTML = "Speech ready to play."; } }); } </script> </body> </html>

Mejoras posibles

A continuación se muestran variaciones de esta aplicación que puede utilizar para profundizar en el uso del SDK de para JavaScript en un script de navegador.

  • Experimentar con otros formatos de salida de sonido.

  • Añade la opción de seleccionar cualquiera de las distintas voces que ofrece Amazon Polly.

  • Integre un proveedor de identidades como Facebook o Amazon para utilizarlo con el rol de IAM autenticado.