La AWS SDK per JavaScript v2 è arrivata. end-of-support [Ti consigliamo di migrare alla AWS SDK per JavaScript v3.](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/) [Per ulteriori dettagli e informazioni su come effettuare la migrazione, consulta questo annuncio.](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Nozioni di base su uno script di browser
<a name="getting-started-browser"></a>

![\[JavaScript code example that applies to browser execution\]](http://docs.aws.amazon.com/it_it/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**Questo script di browser di esempio illustra:**
+ Come accedere ai AWS servizi da uno script del browser utilizzando Amazon Cognito Identity.
+ Come trasformare il testo in sintesi vocale con Amazon Polly.
+ Come utilizzare un oggetto presigner per creare un URL prefirmato.

## Lo scenario
<a name="getting-started-browser-scenario"></a>

Amazon Polly è un servizio cloud che converte il testo in voce naturale. Puoi utilizzare Amazon Polly per sviluppare applicazioni che aumentano il coinvolgimento e l'accessibilità. Amazon Polly supporta più lingue e include una varietà di voci realistiche. Per ulteriori informazioni su Amazon Polly, consulta la Amazon Polly [https://docs.aws.amazon.com/polly/latest/dg/](https://docs.aws.amazon.com/polly/latest/dg/).

L'esempio mostra come configurare ed eseguire un semplice script del browser che prende il testo immesso, lo invia ad Amazon Polly e quindi restituisce l'URL dell'audio sintetizzato del testo da riprodurre. Lo script del browser utilizza Amazon Cognito Identity per fornire le credenziali necessarie per accedere ai servizi. AWS Vedrai gli schemi di base per il caricamento e l'utilizzo dell'SDK per JavaScript gli script del browser.

**Nota**  
La riproduzione della sintesi vocale in questo esempio dipende dall'esecuzione in un browser che supporta HTML 5 audio.

![\[Illustrazione di come uno script del browser interagisce con i servizi Amazon Cognito Identity e Amazon Polly\]](http://docs.aws.amazon.com/it_it/sdk-for-javascript/v2/developer-guide/images/browserscenario.png)


Lo script del browser utilizza l'SDK per JavaScript sintetizzare il testo utilizzando questi: APIs
+ Costruttore [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html)
+ Costruttore [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html)
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html#getSynthesizeSpeechUrl-property](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html#getSynthesizeSpeechUrl-property)

## Fase 1: creare un pool di identità di Amazon Cognito
<a name="getting-started-browser-create-identity-pool"></a>

In questo esercizio, crei e utilizzi un pool di identità Amazon Cognito per fornire un accesso non autenticato allo script del browser per il servizio Amazon Polly. La creazione di un pool di identità crea anche due ruoli IAM, uno per supportare gli utenti autenticati da un provider di identità e l'altro per supportare gli utenti guest non autenticati.

In questo esercizio, lavoreremo solo con il ruolo degli utenti non autenticati in modo che l'attività risulti mirata. È possibile integrare il supporto per un provider di identità e per gli utenti autenticati in un secondo momento. Per ulteriori informazioni sull'aggiunta di un pool di identità di Amazon Cognito, consulta il [Tutorial: Creazione di un pool di identità](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) nella *Amazon Cognito Developer Guide*.

**Per creare un pool di identità Amazon Cognito**

1. Accedi Console di gestione AWS e apri la console Amazon Cognito all'indirizzo. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)

1. Nel riquadro di navigazione a sinistra, scegli **Identity pool**.

1. Scegli **Crea pool di identità**.

1. In **Configura la fiducia del pool di identità**, scegli **Accesso ospite** per l'autenticazione degli utenti.

1. In **Configura le autorizzazioni**, scegli **Crea un nuovo ruolo IAM** e inserisci un nome (ad esempio, *getStartedRole*) nel **nome del ruolo IAM**.

1. In **Configure properties**, inserisci un nome (ad esempio, *getStartedPool*) in **Identity pool name**.

1. In **Esamina e crea**, conferma le selezioni effettuate per il nuovo pool di identità. Seleziona **Modifica** per tornare alla procedura guidata e modificare le eventuali impostazioni. Al termine, seleziona **Crea un pool di identità**.

1. Prendi nota dell'**ID del pool di identità** e della **regione** del pool di identità di Amazon Cognito appena creato. Questi valori sono necessari per sostituirli *IDENTITY\$1POOL\$1ID* e *REGION* inserirli. [Fase 4: scrivere lo script di browser](#getting-started-browser-write-sample)

Dopo aver creato il tuo pool di identità Amazon Cognito, sei pronto per aggiungere le autorizzazioni per Amazon Polly necessarie allo script del tuo browser.

## Fase 2: aggiungere una policy al ruolo IAM creato
<a name="getting-started-browser-iam-role"></a>

Per abilitare l'accesso tramite script del browser ad Amazon Polly per la sintesi vocale, utilizza il ruolo IAM non autenticato creato per il tuo pool di identità Amazon Cognito. Ciò richiede l'aggiunta di una policy IAM al ruolo. Per ulteriori informazioni sulla modifica dei ruoli IAM, consulta [Modifica della politica di autorizzazione di un ruolo](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) nella Guida per l'utente *IAM*.

**Per aggiungere una policy Amazon Polly al ruolo IAM associato a utenti non autenticati**

1. Accedi Console di gestione AWS e apri la console IAM all'indirizzo. [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)

1. Nel pannello di navigazione a sinistra, seleziona **Ruoli**.

1. Scegli il nome del ruolo che desideri modificare (ad esempio, *getStartedRole*), quindi scegli la scheda **Autorizzazioni**.

1. Seleziona **Aggiungi autorizzazioni**, quindi seleziona **Collega policy**.

1. Nella pagina **Aggiungi autorizzazioni** per questo ruolo, trova e seleziona la casella di controllo per. **AmazonPollyReadOnly**
**Nota**  
Puoi utilizzare questo processo per abilitare l'accesso a qualsiasi AWS servizio.

1. Scegli **Add Permissions (Aggiungi autorizzazioni)**.

Dopo aver creato il tuo pool di identità Amazon Cognito e aggiunto le autorizzazioni per Amazon Polly al tuo ruolo IAM per utenti non autenticati, sei pronto per creare la pagina Web e lo script del browser.

## Fase 3: creare la pagina HTML
<a name="getting-started-browser-create-html"></a>

L'applicazione di esempio è composta da un'unica pagina HTML che contiene l'interfaccia utente e lo script di browser. Per iniziare, è necessario creare un documento HTML e copiare i seguenti contenuti al suo interno. La pagina include un campo e un pulsante di input, un elemento `<audio>` per riprodurre la sintesi vocale e un elemento `<p>` per visualizzare i messaggi. (L'intero esempio viene visualizzato nella parte inferiore di questa pagina.)

Per ulteriori informazioni sull'elemento `<audio>`, consulta [audio](https://www.w3schools.com/tags/tag_audio.asp).

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

Salva il file HTML, denominandolo `polly.html`. Dopo aver creato l'interfaccia utente per l'applicazione, è possibile aggiungere il codice dello script di browser che esegue l'applicazione.

## Fase 4: scrivere lo script di browser
<a name="getting-started-browser-write-sample"></a>

La prima cosa da fare quando si crea lo script del browser è includere l'SDK per JavaScript aggiungendo un `<script>` elemento dopo l'elemento nella pagina. `<audio>` [Per trovare l'SDK\$1VERSION\$1NUMBER corrente, consulta l'API Reference for the SDK consultabile nella API Reference Guide. JavaScript AWS SDK per JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

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

Quindi aggiungere un nuovo elemento `<script type="text/javascript">` dopo la voce SDK. Lo script di browser sarà aggiunto a questo elemento. Imposta la regione e le credenziali per l'SDK. AWS Quindi, crea una funzione denominata `speakText()` che verrà richiamata come gestore eventi tramite il pulsante.

Per sintetizzare il parlato con Amazon Polly, devi fornire una serie di parametri tra cui il formato audio dell'output, la frequenza di campionamento, l'ID della voce da utilizzare e il testo da riprodurre. Quando crei i parametri, imposta il parametro `Text:` su una stringa vuota; il parametro `Text:` verrà impostato sul valore recuperato dall'elemento `<input>` nella pagina Web. Sostituisci *IDENTITY\$1POOL\$1ID* e *REGION* nel codice seguente con i valori indicati in. [Fase 1: creare un pool di identità di Amazon Cognito](#getting-started-browser-create-identity-pool)

```
    <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 restituisce il parlato sintetizzato come flusso audio. Il modo più semplice per riprodurre l'audio in un browser è fare in modo che Amazon Polly renda l'audio disponibile a un URL predefinito che puoi quindi impostare come `src` attributo dell'`<audio>`elemento nella pagina Web.

Crea un nuovo oggetto di servizio `AWS.Polly`. Quindi crea l'oggetto `AWS.Polly.Presigner` che verrà utilizzato per creare l'URL prefirmato da cui l'audio della sintesi vocale può essere recuperato. È necessario passare i parametri della sintesi definiti, nonché l'oggetto di servizio `AWS.Polly` creato al costruttore `AWS.Polly.Presigner`.

Una volta creato l'oggetto presigner, chiama il metodo `getSynthesizeSpeechUrl` di tale oggetto, passando i parametri della sintesi. In caso di successo, questo metodo restituisce l'URL della sintesi vocale, che è possibile assegnare all'elemento `<audio>` per la riproduzione.

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

## Fase 5: eseguire l'esempio
<a name="getting-started-browser-run-sample"></a>

Per eseguire l'applicazione di esempio, carica `polly.html` in un browser Web. La presentazione del browser dovrebbe avere un aspetto simile.

![\[Interfaccia del browser dell'applicazione Web\]](http://docs.aws.amazon.com/it_it/sdk-for-javascript/v2/developer-guide/images/browsergetstarted.png)


Inserisci una frase che desideri venga sintetizzata nella casella di input, quindi scegli **Synthesize (Sintetizza)**. Quando l'audio è pronto per la riproduzione, viene visualizzato un messaggio. Utilizza i controlli del lettore audio per ascoltare la sintesi vocale.

## Esempio completo
<a name="getting-started-browser-full-sample"></a>

Questa è la pagina HTML completa con lo script di browser. [È disponibile anche qui. GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascript/example_code//browserstart/polly.html)

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

## Possibili miglioramenti
<a name="getting-started-browser-variations"></a>

Ecco alcune varianti di questa applicazione che puoi utilizzare per esplorare ulteriormente l'utilizzo dell'SDK per JavaScript uno script del browser.
+ Esercitarsi con altri formati di output audio.
+ Aggiungi l'opzione per selezionare una delle varie voci fornite da Amazon Polly.
+ Integra un provider di identità come Facebook o Amazon da utilizzare con il ruolo IAM autenticato.