AWS SDK untuk JavaScript V2 telah mencapai end-of-support. Kami menyarankan Anda bermigrasi ke [AWS SDK untuk JavaScript v3](https://docs.aws.amazon.com//sdk-for-javascript/v3/developer-guide/). Untuk detail dan informasi tambahan tentang cara bermigrasi, silakan lihat [pengumuman](https://aws.amazon.com/blogs//developer/announcing-end-of-support-for-aws-sdk-for-javascript-v2/) ini.

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Memulai Skrip Browser
<a name="getting-started-browser"></a>

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

**Contoh skrip browser ini menunjukkan kepada Anda:**
+ Cara mengakses AWS layanan dari skrip browser menggunakan Amazon Cognito Identity.
+ Cara mengubah teks menjadi ucapan yang disintesis menggunakan Amazon Polly.
+ Cara menggunakan objek presigner untuk membuat URL presigned.

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

Amazon Polly adalah layanan cloud yang mengubah teks menjadi ucapan yang hidup. Anda dapat menggunakan Amazon Polly untuk mengembangkan aplikasi yang meningkatkan keterlibatan dan aksesibilitas. Amazon Polly mendukung berbagai bahasa dan mencakup berbagai suara yang hidup. Untuk informasi selengkapnya tentang Amazon Polly, lihat Panduan Pengembang [https://docs.aws.amazon.com/polly/latest/dg/](https://docs.aws.amazon.com/polly/latest/dg/).

Contoh menunjukkan cara mengatur dan menjalankan skrip browser sederhana yang mengambil teks yang Anda masukkan, mengirim teks itu ke Amazon Polly, dan kemudian mengembalikan URL audio teks yang disintesis untuk Anda mainkan. Skrip browser menggunakan Identitas Amazon Cognito untuk memberikan kredensyal yang diperlukan untuk mengakses layanan. AWS Anda akan melihat pola dasar untuk memuat dan menggunakan SDK untuk JavaScript skrip browser.

**catatan**  
Pemutaran pidato yang disintesis dalam contoh ini tergantung pada berjalan di browser yang mendukung audio HTML 5.

![\[Ilustrasi bagaimana skrip browser berinteraksi dengan Amazon Cognito Identity dan layanan Amazon Polly\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v2/developer-guide/images/browserscenario.png)


Skrip browser menggunakan SDK for JavaScript untuk mensintesis teks dengan menggunakan ini: APIs
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html)konstruktor
+ [https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Polly/Presigner.html)konstruktor
+ [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)

## Langkah 1: Buat Kolam Identitas Amazon Cognito
<a name="getting-started-browser-create-identity-pool"></a>

Dalam latihan ini, Anda membuat dan menggunakan kumpulan identitas Amazon Cognito untuk menyediakan akses tidak terautentikasi ke skrip browser Anda untuk layanan Amazon Polly. Membuat kumpulan identitas juga menciptakan dua peran IAM, satu untuk mendukung pengguna yang diautentikasi oleh penyedia identitas dan yang lainnya untuk mendukung pengguna tamu yang tidak diautentikasi.

Dalam latihan ini, kami hanya akan bekerja dengan peran pengguna yang tidak diautentikasi untuk menjaga tugas tetap fokus. Anda dapat mengintegrasikan dukungan untuk penyedia identitas dan pengguna yang diautentikasi nanti. Untuk informasi selengkapnya tentang menambahkan kumpulan identitas Amazon Cognito, lihat [Tutorial: Membuat kumpulan identitas](https://docs.aws.amazon.com/cognito/latest/developerguide/tutorial-create-identity-pool.html) di Panduan Pengembang *Amazon Cognito*.

**Untuk membuat kumpulan identitas Amazon Cognito**

1. Masuk ke Konsol Manajemen AWS dan buka konsol Amazon Cognito di. [https://console.aws.amazon.com/cognito/](https://console.aws.amazon.com/cognito/)

1. Di panel navigasi kiri, pilih **Identity pool**.

1. Pilih **Buat kumpulan identitas**.

1. Di **Konfigurasikan kepercayaan kumpulan identitas**, pilih **Akses tamu** untuk otentikasi pengguna.

1. Di **Konfigurasi izin**, pilih **Buat peran IAM baru** dan masukkan nama (misalnya, *getStartedRole*) di nama peran **IAM**.

1. Di **Konfigurasi properti**, masukkan nama (misalnya, *getStartedPool*) di **nama kumpulan Identitas**.

1. Di **Tinjau dan buat**, konfirmasikan pilihan yang Anda buat untuk kumpulan identitas baru Anda. Pilih **Edit** untuk kembali ke wizard dan mengubah pengaturan apa pun. Setelah selesai, pilih **Buat kumpulan identitas**.

1. Perhatikan **ID kumpulan Identitas** dan **Wilayah** kumpulan identitas Amazon Cognito yang baru dibuat. Anda membutuhkan nilai-nilai ini untuk menggantikan *IDENTITY\$1POOL\$1ID* dan *REGION* masuk[Langkah 4: Tulis Script Browser](#getting-started-browser-write-sample).

Setelah membuat kumpulan identitas Amazon Cognito, Anda siap menambahkan izin untuk Amazon Polly yang diperlukan oleh skrip browser Anda.

## Langkah 2: Tambahkan Kebijakan ke Peran IAM yang Dibuat
<a name="getting-started-browser-iam-role"></a>

Untuk mengaktifkan akses skrip browser ke Amazon Polly untuk sintesis ucapan, gunakan peran IAM yang tidak diautentikasi yang dibuat untuk kumpulan identitas Amazon Cognito Anda. Ini mengharuskan Anda untuk menambahkan kebijakan IAM ke peran tersebut. *Untuk informasi selengkapnya tentang memodifikasi peran IAM, lihat [Memodifikasi kebijakan izin peran](https://docs.aws.amazon.com/IAM/latest/UserGuide/roles-managingrole-editing-console.html#roles-modify_permissions-policy) di Panduan Pengguna IAM.*

**Untuk menambahkan kebijakan Amazon Polly ke peran IAM yang terkait dengan pengguna yang tidak diautentikasi**

1. Masuk ke Konsol Manajemen AWS dan buka konsol IAM di [https://console.aws.amazon.com/iam/](https://console.aws.amazon.com/iam/).

1. Di panel navigasi sebelah kiri, pilih **Peran**.

1. Pilih nama peran yang ingin Anda ubah (misalnya, *getStartedRole*), lalu pilih tab **Izin**.

1. Pilih **Tambahkan izin**, lalu pilih **Lampirkan kebijakan**.

1. Di halaman **Tambahkan izin** untuk peran ini, temukan lalu pilih kotak centang untuk **AmazonPollyReadOnly**.
**catatan**  
Anda dapat menggunakan proses ini untuk mengaktifkan akses ke AWS layanan apa pun.

1. Pilih **Tambahkan izin**.

Setelah Anda membuat kumpulan identitas Amazon Cognito dan menambahkan izin untuk Amazon Polly ke peran IAM Anda untuk pengguna yang tidak diautentikasi, Anda siap untuk membuat halaman web dan skrip browser.

## Langkah 3: Buat Halaman HTML
<a name="getting-started-browser-create-html"></a>

Aplikasi sampel terdiri dari satu halaman HTML yang berisi antarmuka pengguna dan skrip browser. Untuk memulai, buat dokumen HTML dan salin konten berikut ke dalamnya. Halaman ini mencakup bidang input dan tombol, `<audio>` elemen untuk memainkan pidato yang disintesis, dan `<p>` elemen untuk menampilkan pesan. (Perhatikan bahwa contoh lengkap ditampilkan di bagian bawah halaman ini.)

Untuk informasi lebih lanjut tentang `<audio>` elemen, lihat [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>
```

Simpan file HTML, beri nama`polly.html`. Setelah Anda membuat antarmuka pengguna untuk aplikasi, Anda siap untuk menambahkan kode skrip browser yang menjalankan aplikasi.

## Langkah 4: Tulis Script Browser
<a name="getting-started-browser-write-sample"></a>

Hal pertama yang harus dilakukan saat membuat skrip browser adalah memasukkan SDK untuk JavaScript dengan menambahkan `<script>` elemen setelah `<audio>` elemen di halaman. [Untuk menemukan SDK\$1VERSION\$1NUMBER saat ini, lihat Referensi API untuk SDK untuk Panduan Referensi API. JavaScript AWS SDK untuk JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/)

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

Kemudian tambahkan `<script type="text/javascript">` elemen baru setelah entri SDK. Anda akan menambahkan skrip browser ke elemen ini. Tetapkan AWS Region dan kredensialnya untuk SDK. Selanjutnya, buat fungsi bernama `speakText()` yang akan dipanggil sebagai event handler oleh tombol.

Untuk mensintesis ucapan dengan Amazon Polly, Anda harus menyediakan berbagai parameter termasuk format suara output, laju pengambilan sampel, ID suara yang akan digunakan, dan teks untuk diputar ulang. Saat Anda awalnya membuat parameter, atur `Text:` parameter ke string kosong; `Text:` parameter akan diatur ke nilai yang Anda ambil dari `<input>` elemen di halaman web. Ganti *IDENTITY\$1POOL\$1ID* dan *REGION* dalam kode berikut dengan nilai yang tercantum dalam[Langkah 1: Buat Kolam Identitas 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 mengembalikan ucapan yang disintesis sebagai aliran audio. Cara termudah untuk memutar audio itu di browser adalah dengan meminta Amazon Polly membuat audio tersedia di URL yang telah ditentukan sebelumnya yang kemudian dapat Anda atur sebagai `src` atribut `<audio>` elemen di halaman web.

Buat objek `AWS.Polly` layanan baru. Kemudian buat `AWS.Polly.Presigner` objek yang akan Anda gunakan untuk membuat URL presigned dari mana audio ucapan yang disintesis dapat diambil. Anda harus meneruskan parameter ucapan yang Anda tentukan serta objek `AWS.Polly` layanan yang Anda buat ke `AWS.Polly.Presigner` konstruktor.

Setelah Anda membuat objek presigner, panggil `getSynthesizeSpeechUrl` metode objek itu, melewati parameter ucapan. Jika berhasil, metode ini mengembalikan URL pidato yang disintesis, yang kemudian Anda tetapkan ke `<audio>` elemen untuk pemutaran.

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

## Langkah 5: Jalankan Sampel
<a name="getting-started-browser-run-sample"></a>

Untuk menjalankan aplikasi sampel, muat `polly.html` ke browser web. Inilah yang harus menyerupai presentasi browser.

![\[Antarmuka browser aplikasi web\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v2/developer-guide/images/browsergetstarted.png)


Masukkan frasa yang ingin diubah menjadi ucapan di kotak input, lalu pilih **Sintesis**. Saat audio siap diputar, sebuah pesan muncul. Gunakan kontrol pemutar audio untuk mendengar ucapan yang disintesis.

## Sampel lengkap
<a name="getting-started-browser-full-sample"></a>

Berikut adalah halaman HTML lengkap dengan skrip browser. Ini juga tersedia [di sini 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>
```

## Kemungkinan Peningkatan
<a name="getting-started-browser-variations"></a>

Berikut adalah variasi pada aplikasi ini yang dapat Anda gunakan untuk mengeksplorasi lebih lanjut menggunakan SDK untuk JavaScript dalam skrip browser.
+ Bereksperimenlah dengan format output suara lainnya.
+ Tambahkan opsi untuk memilih salah satu dari berbagai suara yang disediakan oleh Amazon Polly.
+ Integrasikan penyedia identitas seperti Facebook atau Amazon untuk digunakan dengan peran IAM yang diautentikasi.