> ## Content Index
> Fetch the complete content index at: https://lintar.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Bikin Browser Ngomong Sendiri dengan Text-to-Speech
- URL: https://lintar.my.id/bikin-browser-ngomong-sendiri-dengan-text-to-speech/
- Published: 2025-09-02T12:58:59.000Z
- Updated: 2025-09-02T13:06:32.000Z
- Author: dev
- Tags: #Import 2026-08-27 23:08

Hari ini aku dapat task dari tim: bikin **web antrian**.  
Awalnya aku mikir, “Wah, ini pasti butuh API tambahan untuk suara. Kayak harus connect ke Google TTS atau semacamnya.”

Tapi ternyata… **browser kita udah punya fitur bawaan** buat bikin suara keluar langsung, namanya **Text-to-Speech API** alias `SpeechSynthesis`. Jadi nggak perlu ribet-ribet pakai API eksternal.

---

## Awal Ceritanya

Aku mulai dari bikin tampilan sederhana dulu: list antrian dengan nomor.  
Tapi karena konsepnya *antrian*, pasti ada momen di mana sistem harus **memanggil nomor otomatis**. Nah, disinilah ide Text-to-Speech masuk.

---

## Cara Pakainya

Di JavaScript, ternyata gampang banget. Cukup pakai:

```javascript
function panggilNomor(nomor) {
  let text = `Nomor antrian ${nomor}, silakan menuju loket.`;
  let speech = new SpeechSynthesisUtterance(text);
  speech.lang = 'id-ID'; // pakai bahasa Indonesia
  speech.pitch = 1;      // nada suara (0–2)
  speech.rate = 1;       // kecepatan bicara (0.1–10)
  speech.volume = 1;     // volume (0–1)
  window.speechSynthesis.speak(speech);
}

// Contoh panggil nomor 15
panggilNomor(15);

```

Dan boom 💥, browser langsung ngomong sendiri!

---

## Settingan Lain yang Bisa Dipakai

Selain `lang`, `pitch`, `rate`, dan `volume`, ada juga **pilihan suara** (voices).  
Setiap browser/device biasanya punya daftar suara bawaan, bisa dicek dengan:

```javascript
let voices = window.speechSynthesis.getVoices();
console.log(voices);
```

Lalu kita bisa pilih suara tertentu:

```javascript
let speech = new SpeechSynthesisUtterance("Halo, ini tes suara");
speech.voice = voices.find(v => v.lang === "id-ID"); 
window.speechSynthesis.speak(speech);

```

Jadi kita bisa atur:

- **Bahasa** → misalnya `id-ID` (Indonesia), `en-US` (English US), dll.
- **Jenis suara** → laki-laki / perempuan (tergantung device).
- **Pitch, rate, volume** → untuk bikin suara lebih natural atau lebih lucu.

Awalnya kupikir harus bikin integrasi ribet dengan API suara.  
Ternyata, cukup beberapa baris kode aja, browser udah bisa jadi announcer otomatis.  
Jadi untuk **web antrian**, tinggal setiap kali nomor baru dipanggil, kita jalankan fungsi `panggilNomor()`.

---

## Referensi Buat Ngulik Lebih Lanjut

- MDN Web Docs – SpeechSynthesis
- MDN Web Docs – SpeechSynthesisUtterance