开始使用浏览器脚本 - AWS SDK for JavaScript

帮助我们改进AWS SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:AWS SDK for JavaScriptV3 API 参考指南详细描述了所有的 API 操作AWS SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

开始使用浏览器脚本

本节将向您介绍一个示例,该示例演示了如何运行 SDK 的版本 3 (V3) JavaScript 在浏览器中。

注意

在浏览器中运行 V3 与版本 2 (V2) 略有不同。有关更多信息,请参阅 在 V3 中使用浏览器

有关使用 SDK 的 (V3) 的其他示例 JavaScript 使用浏览器中的 Node.js,请参阅:

JavaScript code example that applies to browser execution

此浏览器脚本示例向您演示:

  • 如何访问AWS使用 Amazon Cognito Idple 来自浏览器脚本的服务。

  • 如何使用 Amazon Polly 将文本转换为合成语音。

  • 如何使用预签名程序对象创建预签名 URL。

情景

Amazon Polly 云服务可以将文本转化为逼真的语音。可以使用 Amazon Polly 开发能提高参与度和可用性的应用程序。Amazon Polly 支持多种语言并包含各种逼真的声音。有关 Amazon Polly 的更多信息,请参阅Amazon Polly 开发人员指南.

该示例演示如何设置和运行浏览器脚本,该脚本获取文本、将文本发送到 Amazon Polly,然后返回文本的合成音频 URL 供您播放。浏览器脚本使用 Amazon Cognito Identity Pool 提供访问所需的凭证。AWS服务。该示例演示了加载和使用开发工具包的基本模式: JavaScript 在浏览器脚本中。

注意

您必须在支持 HTML 5 音频的浏览器中运行此示例以便播放合成语音。


                        浏览器脚本如何与 Amazon Cognito Identity 和 Amazon Polly 服务交互的示意图

浏览器脚本将 SDK 用于 JavaScript 通过以下 API 合成文本:

第 1 步:创建 Amazon Cognito 身份池

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

在本练习中,我们仅使用未经身份验证的用户角色,将重点放在任务上。您可在以后集成对身份提供商和通过身份验证的用户的支持。

创建 Amazon Cognito 身份池

  1. 登录到AWS Management Console在打开 Amazon Cognito 控制台Amazon Web Services 控制台。

  2. 在控制台打开页面上,选择 Manage Identity Pools (管理身份池)

  3. 在下一页上,选择创建新的身份池

    注意

    如果没有其他身份池,Amazon Cognito 控制台会跳过此页面并打开下一页。

  4. 入门向导身份池名称中,键入您的身份池的名称。

  5. 选择启用未经验证的身份的访问权限

  6. 选择 Create Pool(创建池)。

  7. 在下一页上,选择查看详细信查看为您身份池创建的两个 IAM 角色的名称。记录未经身份验证的身份的角色名称。您需要此名称以便为 Amazon Polly 添加所需的策略。

  8. 选择 Allow

  9. 示例代码页面上,选择 JavaScript 平台。然后,复制或记录身份池 ID 和区域。您需要这些值以便替换浏览器脚本中的 REGION 和 IDENTITY_POOL_ID。

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

第 2 步:将策略添加到创建的 IAM 角色

要启用浏览器脚本对 Amazon Polly 的访问以进行语音合成,请使用为 Amazon Cognito 身份池创建的未经身份验证的 IAM 角色。这需要您将 IAM 策略添加到角色。有关 IAM 角色的更多信息,请参阅创建向一个委派权限的角色AWS服务中的IAM 用户指南.

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

  1. 登录 AWS Management Console,然后通过以下网址打开 IAM 控制台:https://console.aws.amazon.com/iam/

  2. 在页面左侧的导航面板中,选择角色

  3. 在 IAM 角色列表中,单击之前由 Amazon Cognito 创建的未经身份验证的身份角色的链接。

  4. 在此角色的摘要页面上,选择附加策略

  5. 在此角色的附加权限页面中,查找并选中 AmazonPollyFullAccess 的复选框。

    注意

    您可以使用此流程来启用对任何的访问权限。AWS服务。

  6. 选择 Attach policy(附上策略)。

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

第 3 步:创建项目环境

设置项目环境以运行这些节点 TypeScript 示例,然后安装所需的AWS SDK for JavaScript和第三方模块。按照上的说明操作GitHub.

第 4 步:创建 HTML 页面

示例应用程序由一个 HTML 页面组成,其中包含用户界面和 JavaScript 包含所需 JavaScript 的文件。要开始,请创建一个 HTML 文档并将以下内容复制到其中。该页面包括输入字段和按钮、<audio> 元素(用于播放合成语音)以及 <p> 元素(用于显示消息)。(请注意,完整示例显示在此页面的底部。)

这些区域有:<script>元素添加main.js文件,包含所有必需的 JavaScript 例如。

你使用 webpack 来创建main.js文件,如中所述第 5 步:编写 JavaScript.

有关的更多信息<audio>元素,请参阅音频.

完整的 HTML 页面可用GitHub 上的这里.

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

使用的 V3AWS SDK for JavaScript在浏览器中,你需要 Webpack 来捆绑 JavaScript 模块和功能,你安装在第 3 步:创建项目环境.

第 5 步:编写 JavaScript

创建一个名为的文件polly.js,然后将以下代码粘贴到该文件中。完整的 JavaScript 页面可用GitHub 上的这里. 代码首先导入必需的AWSSDK 客户端和命令。然后它创建了Polly服务客户端对象,指定 SDK 的凭据。要通过 Amazon Polly 合成语音,它提供多种参数,包括输出的声音格式、采样率、所用语音的 ID 以及要播放的文本。在您最初创建参数时,请将 Text: 参数设置为空字符串;Text: 参数将设置为您从网页的 <input> 元素检索的值。

接下来,它创建一个名为的函数speakText()该按钮作为事件处理程序调用。Amazon Polly 将合成语音作为音频流返回。在浏览器中播放音频的最简单方法是让 Amazon Polly 在预签名 URL 上提供音频,然后您可以将其设置为src属性的<audio>网页中的元素。

接下来它创建这些Presigner对象用于创建可从中检索合成语音音频的预签名 URL。您必须传递所定义的语音参数,以及您为 Polly.Presigner 构造函数创建的 Polly 服务对象。

创建了预先者对象之后,它会调用getSynthesizeSpeechUrl该对象的方法,传递语音参数。如果成功,此方法返回合成语音的 URL,然后代码将其分配到<audio>播放元素。

最后,从你的项目文件夹中包含polly.js在命令提示符下运行以下命令以捆绑 JavaScript 对于此示例,在名为的文件中main.js

webpack --entry polly.js --mode development --target web --devtool false -o main.js
注意

有关安装 Webpack 的信息,请参阅使用 webpack 捆绑应用程序.

import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool, } from "@aws-sdk/credential-provider-cognito-identity"; import { Polly } from "@aws-sdk/client-polly"; import { getSynthesizeSpeechUrl } from "@aws-sdk/polly-request-presigner"; // Create the Polly service client, assigning your credentials const client = new Polly({ region: "REGION", credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: "REGION" }), identityPoolId: "IDENTITY_POOL_ID" // IDENTITY_POOL_ID }), }); // Set the parameters const speechParams = { OutputFormat: "OUTPUT_FORMAT", // For example, 'mp3' SampleRate: "SAMPLE_RATE", // For example, '16000 Text: "", // The 'speakText' function supplies this value TextType: "TEXT_TYPE", // For example, "text" VoiceId: "POLLY_VOICE" // For example, "Matthew" }; const speakText = async () => { // Update the Text parameter with the text entered by the user speechParams.Text = document.getElementById("textEntry").value; try{ let url = await getSynthesizeSpeechUrl({ client, params: speechParams }); console.log(url); // Load the URL of the voice recording into the browser document.getElementById('audioSource').src = url; document.getElementById('audioPlayback').load(); document.getElementById('result').innerHTML = "Speech ready to play."; } catch (err) { console.log("Error", err); document.getElementById('result').innerHTML = err; } }; // Expose the function to the browser window.speakText = speakText;

第 6 步:运行示例

要运行示例应用程序,请加载polly.html在 Web 浏览器中。该应用程序应类似于以下内容。


                        Web 应用程序浏览器界面

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

可能的增强功能

以下是此应用程序的变体,您可用于进一步探索使用开发工具包, JavaScript 在浏览器脚本中。

  • 使用其他声音输出格式进行试验。

  • 添加选项用于选择 Amazon Polly 提供的多种声音任意之一。

  • 集成 Facebook 或 Amazon 等身份提供商以使用经过身份验证的 IAM 角色。