开始使用浏览器脚本 - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

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

这些区域有:Amazon SDK for JavaScriptV3 API 参考指南详细描述了Amazon 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

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

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

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

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

情景

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

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

注意

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


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

浏览器脚本将开发工具包用于 JavaScript 使用以下 API 来合成文本:

第 1 步:创建一个 Amazon Cognito 身份池

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

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

创建 Amazon Cognito 身份池

  1. 登录到Amazon Web Services 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 身份池之后,您已准备好为添加浏览器脚本所需的对 Amazon Polly 的权限。

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

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

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

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

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

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

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

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

    注意

    您可以使用此流程来启用对任何Amazon服务。

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

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

第 3 步:创建项目环境

设置项目环境以运行这些节点 TypeScript 示例,然后安装所需的Amazon 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。为应用程序创建用户界面之后,您已准备好添加运行应用程序的浏览器脚本代码。

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

第 5 步:写 JavaScript

创建一个名为的文件polly.js将以下代码粘贴到该文件中。完整 JavaScript 页面可用GitHub 上的这里. 代码首先导入必需的AmazonSDK 客户端和命令。然后它创建了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 角色。