适用于 JavaScript 的 AWS SDK v2 已终止支持。建议您迁移到 [适用于 JavaScript 的 AWS SDK v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/)。有关更多详情和如何迁移的信息，请参阅本[公告](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/)。

# 浏览器脚本入门
<a name="getting-started-browser"></a>

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

**此浏览器脚本示例向您演示：**
+ 如何使用 Amazon Cognito Identity 通过浏览器脚本访问 AWS 服务。
+ 如何使用 Amazon Polly 将文本转换为合成语音。
+ 如何使用预签名程序对象创建预签名 URL。

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

Amazon Polly 云服务可以将文本转化为逼真的语音。可以使用 Amazon Polly 开发能提高参与度和可用性的应用程序。Amazon Polly 支持多种语言，并包含各种逼真的语音。有关 Amazon Polly 的更多信息，请参阅《[Amazon Polly Developer Guide**](https://docs.aws.amazon.com/polly/latest/dg/)》。

本示例演示如何设置和运行简单的浏览器脚本，该脚本获取您输入的文本、将文本发送到 Amazon Polly，然后返回文本的合成音频 URL 供您播放。浏览器脚本使用 Amazon Cognito Identity 提供访问 AWS 服务所需的凭证。您将看到在浏览器脚本中加载和使用 SDK for JavaScript 的基本模式。

**注意**  
在此示例中，合成语音的播放需要在支持 HTML 5 音频的浏览器中运行。

![\[浏览器脚本如何与 Amazon Cognito Identity 和 Amazon Polly 服务交互的示意图\]](http://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v2/developer-guide/images/browserscenario.png)


浏览器脚本使用 SDK for JavaScript，通过以下 API 来对文本执行合成：
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html) 构造函数
+ [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)

## 步骤 1：创建一个 Amazon Cognito 身份池
<a name="getting-started-browser-create-identity-pool"></a>

在本练习中，您将创建并使用一个 Amazon Cognito 身份池，为浏览器脚本提供对 Amazon Polly 服务的无需验证身份的访问。创建身份池还会创建两个 IAM 角色，一个用于支持由身份提供商进行了身份验证的用户，另一个用于支持未经身份验证的来宾用户。

在本练习中，我们仅使用未经身份验证的用户角色，将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。有关添加 Amazon Cognito 身份池的更多信息，请参阅《Amazon Cognito 开发人员指南**》中的[教程：创建身份池](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html)。

**创建 Amazon Cognito 身份池**

1. 登录 AWS 管理控制台 并打开 Amazon Cognito 控制台，网址为 [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)。

1. 在左侧导航窗格中，选择**身份池**。

1. 选择**创建身份池**。

1. 在**配置身份池信任**中，选择**来宾访问权限**进行用户身份验证。

1. 在**配置权限**中，选择**创建新的 IAM 角色**并在 **IAM 角色名称**中输入一个名称（例如 *getStartedRole*）。

1. 在**配置属性**中，在**身份池名称**中输入一个名称（例如 *getStartedPool*）。

1. 在**查看并创建**中，确认您为新身份池所做的选择。选择**编辑**以返回向导并更改任何设置。完成后，选择**创建身份池**。

1. 记下新创建的 Amazon Cognito 身份池的**身份池 ID** 和**区域**。您需要这些值以便替换 [步骤 4：写入浏览器脚本](#getting-started-browser-write-sample) 中的*IDENTITY\$1POOL\$1ID* 和 *REGION*。

在创建 Amazon Cognito 身份池之后，您已准备好添加浏览器脚本使用 Amazon Polly 所需的权限。

## 步骤 2：将策略添加到创建的 IAM 角色
<a name="getting-started-browser-iam-role"></a>

要启用浏览器脚本对 Amazon Polly 的访问以进行语音合成，请使用为 Amazon Cognito 身份池创建的未经身份验证的 IAM 角色。这需要您将 IAM policy 添加到角色。有关修改 IAM 角色的更多信息，请参阅《IAM 用户指南》**中的[修改角色权限策略](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)。

**将 Amazon Polly 策略添加到与未验证身份用户关联的 IAM 角色**

1. 登录 AWS 管理控制台，然后通过以下网址打开 IAM 控制台：[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/)。

1. 在左侧导航窗格中，选择**角色**。

1. 选择要修改的角色的名称（例如，*getStartedRole*），然后选择**权限**选项卡。

1. 选择**添加权限**，然后选择**附加策略**。

1. 在此角色的**添加权限**页面中，找到并选中 **AmazonPollyReadOnly** 的复选框。
**注意**  
您可以使用此流程来启用对任何 AWS 服务的访问权限。

1. 选择**添加权限**。

创建 Amazon Cognito 身份池并将 Amazon Polly 的权限添加到未验证身份用户的 IAM 角色之后，您已准备好生成网页和浏览器脚本。

## 步骤 3：创建 HTML 页面
<a name="getting-started-browser-create-html"></a>

示例应用程序只有一个 HTML 页面，其中包含用户界面和浏览器脚本。要开始，请创建一个 HTML 文档并将以下内容复制到其中。该页面包括输入字段和按钮、`<audio>` 元素（用于播放合成语音）以及 `<p>` 元素（用于显示消息）。（请注意，完整示例显示在此页面的底部。）

有关 `<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>
```

保存 HTML 文件，并将它命名为 `polly.html`。为应用程序创建用户界面之后，您已准备好添加运行应用程序的浏览器脚本代码。

## 步骤 4：写入浏览器脚本
<a name="getting-started-browser-write-sample"></a>

创建浏览器脚本时首先要做的是，通过在页面的 `<audio>` 元素之后添加 `<script>` 元素来包括 SDK for JavaScript：要查找当前的 SDK\$1VERSION\$1NUMBER，请参阅 [适用于 JavaScript 的 AWS SDK API Reference Guide](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/) 中适用于 SDK for JavaScript 的 API 参考。

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

然后，在开发工具包条目之后添加新的 `<script type="text/javascript">` 元素。您将浏览器脚本添加到此元素。为 SDK 设置 AWS 区域和凭证。接下来，创建名为 `speakText()` 的函数，该函数由按钮作为事件处理程序调用。

要通过 Amazon Polly 合成语音，您必须提供多种参数，包括输出的声音格式、采样率、所用语音的 ID 以及要播放的文本。在您最初创建参数时，请将 `Text:` 参数设置为空字符串；`Text:` 参数将设置为您从网页的 `<input>` 元素检索的值。将以下代码中的 *IDENTITY\$1POOL\$1ID* 和 *REGION* 替换为[步骤 1：创建一个 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 将合成语音作为音频流返回。在浏览器中播放音频的最简单方法是让 Amazon Polly 通过预签名 URL 来提供音频，然后您可以在网页的 `<audio>` 元素中设置 `src` 属性。

创建新的 `AWS.Polly` 服务对象。然后创建 `AWS.Polly.Presigner` 对象，您将用它来创建可从中检索合成语音音频的预签名 URL。您必须传递所定义的语音参数，以及您为 `AWS.Polly` 构造函数创建的 `AWS.Polly.Presigner` 服务对象。

创建预签名程序对象之后，调用该对象的 `getSynthesizeSpeechUrl` 方法并传递语音参数。如果成功，此方法返回合成语音的 URL，然后您将其分配到 `<audio>` 元素进行播放。

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

## 步骤 5：运行示例
<a name="getting-started-browser-run-sample"></a>

要运行示例应用程序，请将 `polly.html` 加载到 Web 浏览器中。浏览器的演示应该类似于此。

![\[Web 应用程序浏览器界面\]](http://docs.aws.amazon.com/zh_cn/sdk-for-javascript/v2/developer-guide/images/browsergetstarted.png)


在输入框中输入您希望转换为语音的短语，然后选择 **Synthesize (合成)**。准备好播放音频时，将显示一条消息。使用音频播放器控件收听合成语音。

## 完整示例
<a name="getting-started-browser-full-sample"></a>

下面是带有浏览器脚本的完整 HTML 页面。[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>
```

## 可能的增强功能
<a name="getting-started-browser-variations"></a>

此处为该应用程序的变体，可用于进一步探索如何在浏览器脚本中使用 SDK for JavaScript。
+ 使用其他声音输出格式进行试验。
+ 添加选项，用于从 Amazon Polly 提供的多种语音中任选其一。
+ 集成 Facebook 或 Amazon 等身份提供商以使用经过身份验证的 IAM 角色。