適用於 JavaScript 的 AWS SDK v2 已end-of-support。我們建議您遷移至 [適用於 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_tw/sdk-for-javascript/v2/developer-guide/images/browsericon.png)

**這個瀏覽器指令碼範例會說明：**
+ 如何使用 Amazon Cognito Identity 從瀏覽器指令碼存取 AWS 服務。
+ 如何使用 Amazon Polly 將文字轉換為合成語音。
+ 如何使用 presigner 物件建立預先簽章的 URL。

## 使用案例
<a name="getting-started-browser-scenario"></a>

Amazon Polly 是一種雲端服務，可將文字轉換為逼真的語音。您可以使用 Amazon Polly 來開發可提高參與度和可存取性的應用程式。Amazon Polly 支援多種語言，並包含各種栩栩如生的語音。如需 Amazon Polly 的詳細資訊，請參閱 [https://docs.aws.amazon.com/polly/latest/dg/](https://docs.aws.amazon.com/polly/latest/dg/)。

此範例示範如何設定和執行簡單的瀏覽器指令碼，該指令碼會接受您輸入的文字、將該文字傳送至 Amazon Polly，然後傳回文字的合成音訊 URL 供您播放。瀏覽器指令碼使用 Amazon Cognito Identity 來提供存取 AWS 服務所需的登入資料。您會在瀏覽器指令碼中看到載入和使用適用於 JavaScript 的 SDK 的基本模式。

**注意**  
本範例的合成語音播放，必須使用支援 HTML 5 音訊的瀏覽器執行。

![\[瀏覽器指令碼如何與 Amazon Cognito Identity 和 Amazon Polly 服務互動的圖例\]](http://docs.aws.amazon.com/zh_tw/sdk-for-javascript/v2/developer-guide/images/browserscenario.png)


瀏覽器指令碼使用以下 APIs，使用適用於 JavaScript 的 SDK 來合成文字：
+ [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 管理主控台 ，並在 [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)：// 開啟 Amazon Cognito 主控台。

1. 在左側導覽窗格中，選擇**身分集區**。

1. 選擇 **建立身分池**。

1. 在**設定身分集區信任**中，選擇**訪客存取**以進行使用者身分驗證。

1. 在**設定許可**中，選擇**建立新的 IAM 角色**，然後在 **IAM 角色**名稱中輸入名稱 （例如 *getStartedRole*)。

1. 在**設定屬性**中，在**身分集**區名稱中輸入名稱 （例如 *getStartedPool*)。

1. 在 **檢閱和建立** 中，確認您為新身分池所做的選擇。選取 **編輯** 以返回精靈並變更任何設定。當您完成時，請選取 **建立身分池**。

1. 請注意**身分集區 ID** 和新建立的 Amazon Cognito 身分集區的**區域**。您需要這些值來取代 中的 *IDENTITY\$1POOL\$1ID* 和 *REGION*[步驟 4：編寫瀏覽器指令碼](#getting-started-browser-write-sample)。

建立 Amazon Cognito 身分集區後，您就可以新增瀏覽器指令碼所需的 Amazon Polly 許可。

## 步驟 2：將政策新增至已建立的 IAM 角色
<a name="getting-started-browser-iam-role"></a>

若要啟用瀏覽器指令碼存取 Amazon Polly 以進行語音合成，請使用為 Amazon Cognito 身分集區建立的未驗證 IAM 角色。這需要您將 IAM 政策新增至角色。如需修改 IAM 角色的詳細資訊，請參閱《*IAM 使用者指南*》中的[修改角色許可政策](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy)。

**將 Amazon Polly 政策新增至與未驗證使用者相關聯的 IAM 角色**

1. 登入 AWS 管理主控台 並開啟位於 https：//[https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/) 的 IAM 主控台。

1. 在左側導覽窗格中，選擇 **Roles** (角色)。

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>

建立瀏覽器指令碼時要做的第一件事，就是在頁面的 `<script>` 元素後面新增 `<audio>`元素，以包含適用於 JavaScript 的 SDK。若要尋找目前的 SDK\$1VERSION\$1NUMBER，請參閱《 API 參考指南》中適用於 JavaScript 的 SDK 的 API 參考。 [適用於 JavaScript 的 AWS SDK](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

```
<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 上提供音訊，然後您可以在網頁中將 `src` 設定為 `<audio>`元素的屬性。

請建立新的 `AWS.Polly` 服務物件。然後，建立要用來建構預先簽章 URL 的 `AWS.Polly.Presigner` 物件，以便從中擷取合成語音音訊。您必須將定義的語音參數及建立的 `AWS.Polly` 服務物件傳遞至 `AWS.Polly.Presigner` 建構函數。

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

以下是此應用程式的變化，您可以用來進一步探索在瀏覽器指令碼中使用適用於 JavaScript 的 SDK。
+ 實驗其他音訊輸出格式。
+ 新增 選項，以選取 Amazon Polly 提供的任何各種語音。
+ 整合 Facebook 或 Amazon 等身分提供者，以搭配已驗證的 IAM 角色使用。