La AWS SDK pour JavaScript v2 est arrivée end-of-support. Nous vous recommandons de migrer vers la [AWS SDK pour JavaScript version 3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Pour plus de détails et d'informations sur la façon de migrer, veuillez consulter cette [annonce](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/).

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Démarrage dans un script de navigateur
<a name="getting-started-browser"></a>

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

**Cet exemple de script de navigateur vous montre :**
+ Comment accéder aux AWS services à partir d'un script de navigateur à l'aide d'Amazon Cognito Identity.
+ Comment transformer du texte en discours synthétisé à l'aide d'Amazon Polly.
+ Comment utiliser un objet Presigner pour créer une URL présignée.

## Scénario
<a name="getting-started-browser-scenario"></a>

Amazon Polly est un service cloud qui convertit le texte en un enregistrement audio réaliste. Vous pouvez utiliser Amazon Polly pour développer des applications qui améliorent l'engagement et l'accessibilité. Amazon Polly prend en charge plusieurs langues et inclut une variété de voix réalistes. Pour plus d'informations sur Amazon Polly, consultez le guide du développeur [https://docs.aws.amazon.com/polly/latest/dg/](https://docs.aws.amazon.com/polly/latest/dg/).

L'exemple montre comment configurer et exécuter un script de navigateur simple qui prend le texte que vous saisissez, l'envoie à Amazon Polly, puis renvoie l'URL de l'audio synthétisé du texte pour que vous puissiez le lire. Le script de navigateur utilise Amazon Cognito Identity pour fournir les informations d'identification nécessaires pour accéder AWS aux services. Vous verrez les modèles de base pour le chargement et l'utilisation du SDK JavaScript dans les scripts de navigateur.

**Note**  
La lecture de la voix de synthèse dans cet exemple doit s'effectuer dans un navigateur prenant en charge les contenus audio HTML 5.

![\[Illustration de la façon dont un script de navigateur interagit avec les services Amazon Cognito Identity et Amazon Polly\]](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v2/developer-guide/images/browserscenario.png)


Le script du navigateur utilise le SDK pour JavaScript synthétiser du texte en utilisant les éléments suivants : APIs
+ Constructeur [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html)
+ Constructeur [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)

## Étape 1 : créer un pool d'identités Amazon Cognito
<a name="getting-started-browser-create-identity-pool"></a>

Dans cet exercice, vous allez créer et utiliser un pool d'identités Amazon Cognito afin de fournir un accès non authentifié au script de votre navigateur pour le service Amazon Polly. La création d'un pool d'identités crée également deux rôles IAM, l'un pour prendre en charge les utilisateurs authentifiés par un fournisseur d'identité et l'autre pour prendre en charge les utilisateurs invités non authentifiés.

Dans cet exercice, nous allons uniquement avoir recours à un rôle utilisateur non authentifié afin de rester concentré sur la tâche. Vous pouvez vous former à la prise en charge d'un fournisseur d'identité et des utilisateurs authentifiés ultérieurement. Pour plus d'informations sur l'ajout d'un pool d'identités Amazon Cognito, consultez [Tutoriel : Création d'un pool d'identités](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) dans le guide du développeur *Amazon Cognito*.

**Pour créer un pool d'identités Amazon Cognito**

1. Connectez-vous à la console Amazon Cognito AWS Management Console et ouvrez-la à l'adresse. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)

1. Dans le volet de navigation de gauche, choisissez **Identity pools**.

1. Choisissez **Créer un groupe d'identités**.

1. Dans **Configurer la confiance du pool d'identités**, choisissez **Accès invité** pour l'authentification des utilisateurs.

1. Dans **Configurer les autorisations**, choisissez **Créer un nouveau rôle IAM** et entrez un nom (par exemple, *getStartedRole*) dans le nom du **rôle IAM**.

1. Dans **Configurer les propriétés**, entrez un nom (par exemple, *getStartedPool*) dans **Nom du pool d'identités**.

1. Dans **Vérifier et créer**, confirmez les sélections que vous avez effectuées pour votre nouvelle réserve d'identités. Sélectionnez **Modifier** pour revenir dans l'assistant et modifier des paramètres. Lorsque vous avez terminé, sélectionnez **Créer un groupe d'identités**.

1. Notez l'**ID du pool d'identités** et la **région** du pool d'identités Amazon Cognito récemment créé. Vous avez besoin de ces valeurs pour les remplacer *IDENTITY\$1POOL\$1ID* et *REGION* les insérer[Étape 4 : Écrire le script de navigateur](#getting-started-browser-write-sample).

Après avoir créé votre pool d'identités Amazon Cognito, vous êtes prêt à ajouter les autorisations requises par le script de votre navigateur pour Amazon Polly.

## Étape 2 : ajouter une politique au rôle IAM créé
<a name="getting-started-browser-iam-role"></a>

Pour activer l'accès par script de navigateur à Amazon Polly pour la synthèse vocale, utilisez le rôle IAM non authentifié créé pour votre pool d'identités Amazon Cognito. Cela nécessite que vous ajoutiez une politique IAM au rôle. Pour plus d'informations sur la modification des rôles IAM, consultez la section [Modification d'une politique d'autorisations de rôle](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) dans le Guide de l'*utilisateur IAM*.

**Pour ajouter une politique Amazon Polly au rôle IAM associé aux utilisateurs non authentifiés**

1. Connectez-vous à la console IAM AWS Management Console et ouvrez-la à [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)l'adresse.

1. Dans le volet de navigation de gauche, choisissez **Rôles**.

1. Choisissez le nom du rôle que vous souhaitez modifier (par exemple, *getStartedRole*), puis cliquez sur l'onglet **Autorisations**.

1. Choisissez **Ajouter des autorisations**, puis **Attacher des politiques**.

1. Sur la page **Ajouter des autorisations** pour ce rôle, recherchez puis cochez la case correspondant à **AmazonPollyReadOnly**.
**Note**  
Vous pouvez utiliser ce processus pour autoriser l'accès à n'importe quel AWS service.

1. Choisissez **Ajouter des autorisations**.

Après avoir créé votre pool d'identités Amazon Cognito et ajouté des autorisations pour Amazon Polly à votre rôle IAM pour les utilisateurs non authentifiés, vous êtes prêt à créer la page Web et le script de navigateur.

## Étape 3 : Créer une page HTML
<a name="getting-started-browser-create-html"></a>

L'exemple d'application est constitué d'une seule page HTML qui contient l'interface utilisateur et le script de navigateur. Pour commencer, créez un document HTML et copiez-y le contenu suivant. La page comprend un champ de saisie et un bouton, un élément `<audio>` permettant de lire la synthèse vocale et un élément `<p>` permettant d'afficher des messages. (Notez que l'exemple complet est présenté au bas de cette page.)

Pour plus d'informations sur l'élément `<audio>`, consultez la section [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>
```

Enregistrez le fichier HTML en le nommant `polly.html`. Une fois que vous avez créé l'interface utilisateur de l'application, vous êtes prêt à ajouter le code du script de navigateur qui exécute l'application.

## Étape 4 : Écrire le script de navigateur
<a name="getting-started-browser-write-sample"></a>

La première chose à faire lors de la création du script de navigateur est d'inclure le SDK pour JavaScript en ajoutant un `<script>` élément après l'`<audio>`élément dans la page. [Pour trouver le SDK\$1VERSION\$1NUMBER actuel, consultez la référence d'API du SDK pour le guide de référence des API. JavaScript AWS SDK pour JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

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

Ensuite, ajoutez un nouvel élément `<script type="text/javascript">` après l'entrée du kit SDK. Vous allez ajouter le script de navigateur à cet élément. Définissez la AWS région et les informations d'identification du SDK. Créez ensuite une fonction nommée `speakText()` qui sera appelée en tant que gestionnaire d'événements via le bouton.

Pour synthétiser la parole avec Amazon Polly, vous devez fournir divers paramètres, notamment le format sonore de la sortie, le taux d'échantillonnage, l'identifiant de la voix à utiliser et le texte à lire. Lorsque vous créez initialement les paramètres, définissez le paramètre `Text:` sur une chaîne vide. Le paramètre `Text:` sera défini sur la valeur que vous récupérez à partir de l'élément `<input>` dans la page web. Remplacez *IDENTITY\$1POOL\$1ID* et *REGION* dans le code suivant par les valeurs indiquées dans[Étape 1 : créer un pool d'identités 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 renvoie le discours synthétisé sous forme de flux audio. Le moyen le plus simple de diffuser cet audio dans un navigateur est de demander à Amazon Polly de le rendre disponible sur une URL présignée que vous pouvez ensuite définir comme `src` attribut de l'`<audio>`élément sur la page Web.

Créez un nouvel objet de service `AWS.Polly`. Créez ensuite l'objet `AWS.Polly.Presigner` que vous utiliserez pour créer l'URL présignée qui permettra de récupérer le contenu audio de la synthèse vocale. Vous devez transmettre les paramètres vocaux que vous avez définis, ainsi que l'objet de service `AWS.Polly` que vous avez créé, au constructeur `AWS.Polly.Presigner`.

Une fois que vous avez créé l'objet Presigner, appelez la méthode `getSynthesizeSpeechUrl` de cet objet, en transmettant les paramètres vocaux. En cas de réussite, cette méthode renvoie l'URL de la synthèse vocale, que vous attribuez ensuite à l'élément `<audio>` pour la lecture.

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

## Étape 5 : Exécuter l'exemple
<a name="getting-started-browser-run-sample"></a>

Pour exécuter l'exemple d'application, chargez `polly.html` dans un navigateur web. La présentation du navigateur doit ressembler à ce qui suit.

![\[Interface du navigateur de l'application web\]](http://docs.aws.amazon.com/fr_fr/sdk-for-javascript/v2/developer-guide/images/browsergetstarted.png)


Entrez la phrase dont vous souhaitez obtenir une synthèse vocale dans la zone d'entrée, puis choisissez **Synthesize (Synthétiser)**. Lorsque la fonction audio est prête à lire, un message s'affiche. Utilisez les commandes du lecteur audio pour écouter la synthèse vocale.

## Exemple complet
<a name="getting-started-browser-full-sample"></a>

Voici l'intégralité de la page HTML avec le script de navigateur. Il est également disponible [ici sur 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>
```

## Améliorations possibles
<a name="getting-started-browser-variations"></a>

Voici des variantes de cette application que vous pouvez utiliser pour explorer plus en détail l'utilisation du SDK JavaScript dans un script de navigateur.
+ Expérimentez cet exemple avec d'autres formats de sortie audio.
+ Ajoutez la possibilité de sélectionner l'une des différentes voix proposées par Amazon Polly.
+ Intégrez un fournisseur d'identité tel que Facebook ou Amazon à utiliser avec le rôle IAM authentifié.