瀏覽器指令碼入門 - AWS SDK for JavaScript
使用案例步驟 1：創建一個 Amazon Cognito 身份池步驟 2：將政策新增至建立的 IAM 角色步驟 3：建立 HTML 頁面步驟 4：編寫瀏覽器指令碼步驟 5：執行範例完整範例可能的增強功能

我們宣布即將推出 end-of-support AWS SDK for JavaScript v2。建議您遷移至 AWS SDK for JavaScript v3。如需日期、其他詳細資訊和如何遷移的資訊，請參閱連結公告。

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

瀏覽器指令碼入門

JavaScript code example that applies to browser execution

這個瀏覽器指令碼範例會說明：

  • 如何使用 Amazon Cognito 身份從瀏覽器腳本訪問 AWS 服務。

  • 如何使用 Amazon Polly 將文本轉換為合成語音。

  • 如何使用 presigner 物件建立預先簽章的 URL。

使用案例

Amazon Polly 是一種雲端服務，可將文字轉換為逼真的語音。您可以使用 Amazon Polly 開發可提高參與度和可存取性的應用程式。Amazon Polly 支援多種語言，並包含各種逼真的聲音。如需 Amazon Polly 的詳細資訊，請參閱 Amazon Polly 開發人員指南。

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

注意

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

瀏覽器腳本如何與 Amazon Cognito 身份和 Amazon Polly 服務交互的插圖

瀏覽器腳本使用 SDK 來通過使用以下 API JavaScript 來合成文本：

步驟 1：創建一個 Amazon Cognito 身份池

在本練習中，您會建立並使用 Amazon Cognito 身分集區，為 Amazon Polly 服務提供對瀏覽器指令碼的未經驗證存取。建立身分集區也會建立兩個 IAM 角色，一個用於支援身分識別提供者驗證的使用者，另一個用於支援未驗證的來賓使用者。

在本範例中，我們只會使用未經驗證的使用者角色，以專注進行任務重點。您之後可以整合對身分提供者和已驗證使用者的支援。如需有關新增 Amazon Cognito 身分識別集區的詳細資訊，請參閱 Amazon Cognito 開發人員指南中的教學課程：建立身分集區。

若要建立 Amazon Cognito 身分集區

  1. 登錄到 AWS Management Console 並打開 Amazon Cognito 控制台 https://console.aws.amazon.com/cognito/.

  2. 在左側導覽窗格中，選擇 [識別集區]。

  3. 選擇 建立身分池。

  4. 在 [設定身分識別集區信任] 中，選擇 [來賓存取] 進行使用

  5. 在 [設定權限] 中，選擇 [建立新的 IAM 角色]，然後在 IAM 角色名稱中輸入名稱 (例如 getStartedRole)。

  6. 在 [設定內容] 中，在 [識別集區名稱] 中輸入名稱 (例如，getStartedPool)。

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

  8. 請記下身分集區 ID 和新建立的 Amazon Cognito 身分識別集區的區域。您需要這些值來取代中的識別碼和區域。 步驟 4：編寫瀏覽器指令碼

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

步驟 2：將政策新增至建立的 IAM 角色

若要啟用對 Amazon Polly 的瀏覽器指令碼存取以進行語音合成，請使用為 Amazon Cognito 身分集區建立的未經驗證 IAM 角色。這需要您將 IAM 政策新增至角色。如需有關修改 IAM 角色的詳細資訊，請參閱《IAM 使用者指南》中的修改角色許可政策。

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

  1. 登入 AWS Management Console 並開啟身分與存取權管理主控台，網址為 https://console.aws.amazon.com/iam/。

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

  3. 選擇您要修改的角色名稱 (例如，getStartedRole)，然後選擇 [權限] 索引標籤。

  4. 選擇 [新增權限]，然後選擇 [附加原則]

  5. 在此角色的 [新增權限] 頁面中，尋找並選取的核取方塊AmazonPollyReadOnly。

    注意

    您可以使用此過程來啟用對任何 AWS 服務的訪問。

  6. 選擇新增許可。

建立 Amazon Cognito 身分集區，並將 Amazon Polly 的許可新增至未經驗證使用者的 IAM 角色後，您就可以準備好建立網頁和瀏覽器指令碼。

步驟 3：建立 HTML 頁面

範例應用程式是由單一 HTML 頁面所組成，其中包含使用者界面和瀏覽器指令碼。若要開始，請建立 HTML 文件並將下列內容複製到該文件。該頁面包括輸入欄位和按鈕、用來播放合成語音的 <audio> 元素，以及用來顯示訊息的 <p> 元素。(請注意，本頁面底部會顯示完整範例。)

如需 <audio> 元素的詳細資訊，請參閱音訊。

<!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：編寫瀏覽器指令碼

創建瀏覽器腳本時要做的第一件事是 JavaScript 通過在頁面中的<script>元素後面添加<audio>元素來包含 SDK。若要尋找目前的 SDK_ 版本編號，請參閱 API 參考指南中適用於 SDK 的 API 參考。 JavaScript AWS SDK for JavaScript

<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> 元素擷取的數值。將下列程式碼中的識別碼和區域取代為中註明的值。步驟 1：創建一個 Amazon Cognito 身份池

    <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 服務物件。然後，建立要用來建構預先簽章 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：執行範例

請將 polly.html 載入 Web 瀏覽器，即可執行範例應用程式。瀏覽器中出現的內容應如下所示。

Web 應用程式瀏覽器界面

在輸入方塊中輸入您想轉成語音的詞句，接著選擇 Synthesize (合成)。當音訊準備好播放時，將出現一則訊息。您可以使用音訊播放器控制項來聆聽合成語音。

完整範例

以下是含有瀏覽器指令碼的完整 HTML 頁面，它也可以在這裡使用 GitHub。

<!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>

可能的增強功能

以下是此應用程序的變化，您可以用來在瀏覽器腳本 JavaScript 中進一步探索使用 SDK。

  • 實驗其他音訊輸出格式。

  • 添加選項以選擇任何由 Amazon Polly 提供的各種聲音。

  • 整合 Facebook 或 Amazon 等身分提供者，以便與經過身份驗證的 IAM 角色搭配使用。