Demo program dapat dilihat di link: https://blogchem.com/teks2suara/
Dalam pemrograman kadang kita perlu mengubah teks yang ditulis menjadi suara, tentu agar sesuai dengan pelafalannya maka harus ada pilihan bahasanya. Dalam program berikut diberikan 3 bahasa, yaitu bahasa Indonesia, Inggris dan Arab.
Berikut ini kode program Javascript-nya:
<html>
<head>
<meta charset=”UTF-8″>
<title>Text to Speech – Javascript</title>
</head>
<body>
<h1>Text-to-Speech</h1>
<label for=”input-teks”>Masukkan Teks:</label><br/><br/>
<textarea rows=”10″ cols=”100″ id=”input-teks” name=”input-teks” align=”middle” value=”Bismilahi rohmani rohim”></textarea>
<br/><br/>
<label for=”select-bahasa”>Pilih Bahasa:</label>
<select id=”select-bahasa”>
<option value=”id-ID”>Bahasa Indonesia</option>
<option value=”en-US”>English (US)</option>
<option value=”ar-SA”>العربية (Arabic)</option>
</select>
<br/><br/>
<button id=”btn-mulai”>Mulai Pembacaan</button><script>
// Mendapatkan elemen HTML untuk input teks dan tombol untuk memulai
const inputTeks = document.getElementById(“input-teks”);
const btnMulai = document.getElementById(“btn-mulai”);// Mendapatkan elemen HTML untuk memilih bahasa
const selectBahasa = document.getElementById(“select-bahasa”);// Mendefinisikan variabel speechSynthesis
const speechSynthesis = window.speechSynthesis;// Mendefinisikan fungsi untuk memulai pembacaan suara
function mulaiPembacaan() {
// Cek apakah ada teks yang dimasukkan
if (inputTeks.value !== “”) {
// Mendapatkan nilai teks dan bahasa yang dipilih
const teks = inputTeks.value;
const bahasa = selectBahasa.value;// Mendefinisikan objek speechSynthesisUtterance
const suara = new SpeechSynthesisUtterance();// Set nilai teks dan bahasa pada objek suara
suara.text = teks;
suara.lang = bahasa;// Memulai pembacaan suara
speechSynthesis.speak(suara);
} else {alert(“Jangan kosong dong, Bro!”)}
}// Menambahkan event listener pada tombol untuk memulai
btnMulai.addEventListener(“click”, mulaiPembacaan);</script>
</body>
</html>
Demo program di atas dapat dilihat di link: https://blogchem.com/teks2suara/
===
Penjelasan kode di atas:
- Pertama, kita membuat sebuah input teks
- ubah nilai
valuepada elemenselectuntuk memilih bahasa, dan mengetikkan teks pada elemen textarea. Setelah itu, klik tombol “Mulai Pembacaan” untuk memulai pembacaan suara. - Ketika tombol “Mulai Pembacaan” diklik, fungsi mulaiPembacaan
()akan dipanggil. - Fungsi mulaiPembacaan
()akan mengambil nilai teks dari input, membuat objekSpeechSynthesisUtterancedengan nilai teks tersebut, dan mengatur bahasa menjadi pilihan.
Perlu diingat, Web Speech API tidak didukung oleh semua browser. Jadi, pastikan browser yang digunakan mendukung Web Speech API agar kode di atas dapat berjalan dengan baik.