Bikin Browser Ngomong Sendiri dengan Text-to-Speech
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:
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:
let voices = window.speechSynthesis.getVoices();
console.log(voices);Lalu kita bisa pilih suara tertentu:
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().