Membuat Fitur Text-to-Speech di Website dengan SpeechSynthesis API (JS)
Code
Halo, sobat Teknisi Serba Bisa!
Kali ini kita akan belajar cara membuat fitur Text-to-Speech (TTS) di website menggunakan SpeechSynthesis API. Dengan fitur ini, Anda dapat membuat teks pada website dibaca oleh suara komputer secara langsung. Yuk, simak langkah-langkahnya!
Apa Itu SpeechSynthesis API?
SpeechSynthesis API adalah fitur bawaan browser modern yang memungkinkan kita membuat teks diucapkan dengan suara komputer. API ini mudah digunakan dan mendukung pengaturan nada suara, kecepatan, dan volume.
Langkah-Langkah Membuat Text-to-Speech
Berikut adalah kode sederhana untuk menambahkan fitur Text-to-Speech:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text-to-Speech</title>
</head>
<body>
<!-- Tombol untuk memulai Text-to-Speech -->
<button id="btn">Speak</button>
<script>
document.getElementById("btn").addEventListener("click", () => {
var msg = "Glad to meet you, my friend!";
const utterance = new SpeechSynthesisUtterance(msg);
// Mengontrol pitch, rate, dan volume
utterance.pitch = 1;
utterance.rate = 0.5;
utterance.volume = 1;
speechSynthesis.speak(utterance);
});
</script>
</body>
</html>Penjelasan Kode
- Tombol Speak: Tombol ini memulai fitur TTS ketika diklik.
- SpeechSynthesisUtterance: Objek yang memuat teks untuk diucapkan. Pada contoh ini, teksnya adalah "Glad to meet you, my friend!".
- Pengaturan Suara: Anda dapat mengontrol suara dengan tiga properti utama:
- utterance.pitch: Mengatur nada suara (0-2, default = 1).
- utterance.rate: Mengatur kecepatan pembacaan (0.1-10, default = 1).
- utterance.volume: Mengatur volume suara (0-1, default = 1).
- speechSynthesis.speak(): Fungsi untuk memulai pembacaan teks.
Cara Mencobanya
- Salin kode di atas ke file HTML.
- Buka file tersebut di browser yang mendukung SpeechSynthesis API (seperti Chrome, Edge, atau Firefox).
- Klik tombol Speak dan dengarkan teksnya dibacakan!
Kesimpulan
SpeechSynthesis API adalah cara sederhana dan efektif untuk menambahkan fitur Text-to-Speech ke website Anda. Fitur ini sangat berguna untuk meningkatkan aksesibilitas, seperti membantu pengguna dengan gangguan penglihatan.
Terima kasih sudah membaca, dan sampai jumpa di artikel selanjutnya, Teknisi Serba Bisa!
